1PROMTAI.RU

CSS-стиль для календаря WP

CSS-стиль для календаря.

#wp-calendar {
width: 100%;
max-width: 27.5rem;
background: #dddddd;
margin-left: auto;
margin-right: auto;

}

#wp-calendar caption {
background: #336188;
color: white;
padding: 0.25rem;
text-align: center;
text-align: center;
padding: 10px;
border-radius: 25px;
}

#wp-calendar thead tr {
border-right: 1px solid #ccc;
}

nav.wp-calendar-nav {
padding: 0;
width: 100%;
color: white;
background: #232325;
text-align: center;
padding: 10px;
border-radius: 25px;
}

nav.wp-calendar-nav a {
color: white;
padding-left: 30px;
text-decoration: none;
}

#wp-calendar thead th {
font-size: 90%;
font-weight: bold;
padding: 0.25rem;
background: #dddddd;
text-transform: uppercase;
text-align: center;
}

#wp-calendar tbody td {
position: relative;
padding: 0.125rem;
text-align: center;
border: 1px solid #dddddd;
background: white;
}

#wp-calendar tbody td.pad {
opacity: 0.6;
}

#wp-calendar tbody td#today {
font-weight: bold;
}

#wp-calendar tbody td#today:after {
content: »;
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 10px solid #dddddd;
border-left: 10px solid transparent;
}

#wp-calendar tbody td a {
display: block;
background: #dddddd;
}

#wp-calendar tbody td a:hover {
background: #dddddd;
color: #fff;
}

#wp-calendar tfoot tr {
background: gray;
border: 1px solid #dddddd;
}

#wp-calendar tfoot tr td {
border: 0;
padding: 0;
}

#wp-calendar tfoot tr a {
display: block;
padding: 0.25rem 0.75rem;
}

#wp-calendar tfoot tr a:hover {
background: #fff;
}

#wp-calendar tfoot tr #prev {
text-align: left;

}

#wp-calendar tfoot tr #next {
text-align: right;
}

Вот краткое объяснение каждого блока стилей:
.calendar_wrap

Устанавливает отступы вокруг обёртки календаря: сверху и снизу 6%, слева и справа 4%.

#wp-calendar

Задает ширину календаря в 100% от родительского элемента, с максимальной шириной 27.5rem.
Устанавливает фоновый цвет #dddddd и выравнивание по центру.

#wp-calendar caption

Устанавливает фоновый цвет заголовка календаря как teal (тёмно-зелёный) и текст белым.
Добавляет отступы и выравнивание текста по центру.
Округляет углы заголовка с радиусом 30px.

#wp-calendar thead tr

Добавляет правую границу к строкам заголовка календаря с цветом #ccc (светло-серый).

nav.wp-calendar-nav

Устанавливает отступы, ширину и фоновый цвет навигационной панели календаря.
Устанавливает цвет текста белым, выравнивание по центру и округление углов.

nav.wp-calendar-nav a

Устанавливает цвет ссылок белым и добавляет отступ слева. Убирает подчеркивание текста.

#wp-calendar thead th

Устанавливает размер шрифта и жировый начертание для заголовков таблицы.
Добавляет отступы, фоновый цвет #dddddd и делает текст верхним регистром.

#wp-calendar tbody td

Устанавливает относительное позиционирование, отступы, выравнивание текста и границу для ячеек таблицы.
Фоновый цвет ячеек — белый.

#wp-calendar tbody td.pad

Устанавливает прозрачность для ячеек с классом .pad в 0.6.

#wp-calendar tbody td#today

Устанавливает жирное начертание текста для ячейки с id today.

#wp-calendar tbody td#today:after

Добавляет стрелку у ячейки с id today, используя псевдоэлемент :after.

#wp-calendar tbody td a

Устанавливает фоновый цвет для ссылок внутри ячеек и делает их блочными элементами.

#wp-calendar tbody td a:hover

Меняет фоновый цвет ссылок на белый при наведении и делает текст белым.

#wp-calendar tfoot tr

Устанавливает фоновый цвет серый и границу для строк в подвале таблицы.

#wp-calendar tfoot tr td

Убирает границу и устанавливает отступы в ячейках подвала таблицы.

#wp-calendar tfoot tr a

Устанавливает отступы для ссылок в подвале таблицы.

#wp-calendar tfoot tr a:hover

Меняет фоновый цвет ссылок на белый при наведении.

#wp-calendar tfoot tr #prev и #wp-calendar tfoot tr #next

Выравнивает ссылки в подвале таблицы: #prev — слева, #next — справа.

Этот стиль создаёт современный и аккуратный календарь с хорошо структурированным дизайном, ясными заголовками, удобной навигацией и стилями для интерактивных элементов.

Метки: , , ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Поиск по сайту

Блок

Вход

Блок

Календарь

Октябрь 2024
Пн Вт Ср Чт Пт Сб Вс
 123456
78910111213
14151617181920
21222324252627
28293031  

Блок

теги

Новое

Комментарии

Рубрики

Архивы

RSS 1promtai.ru

Статистика

Блок