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 — справа.

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

Метки: вордпресс, оформление календаря, Своя тема Вордпресс, стили

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