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

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

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

Обсуждение закрыто.