Стиль CSS для виджета календаря WordPress

Я вижу, что многие разработчики тем WordPress делают это, и я знаю, что много делал это в прошлом … мы забываем включать ВСЕ стили для основных классов WordPress, такие как выравнивание изображений, подписи и виджеты. Вот почему я добавил его в свой контрольный список разработки тем WordPress. Большинство этих классов довольно легко настроить, и я уже создал стандартный CSS, который использую и настраиваю для любой темы, над которой работаю, сегодня я решил поделиться очень простым стилем для вашего виджета календаря WordPress, который вы можете скопировать и вставить. в файл style.css вашей темы, чтобы придать ей такой минималистичный вид.

CSS виджет календаря

Ниже приведен код CSS, необходимый для придания вашему виджету календаря такого минималистичного вида. Примечание. Тень вокруг календаря предназначена только для изображения в сообщении.

/* calendar widget */
.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }

Стиль виджета календаря (как он должен выглядеть)

После того, как вы добавили приведенный выше CSS в свою тему WordPress, виджет календаря должен выглядеть как на следующем изображении. Если это не так, возможно, ваша тема уже имеет некоторые встроенные стили для таблиц или сам виджет, который переопределяет ваш недавно добавленный CSS. Конечно, это виджет очень простого стиля, но всегда легче начать с простого стиля и двигаться дальше. Кроме того, кто в наши дни вообще пользуется виджетом «Календарь»?

Вы используете виджет календаря? Мне любопытно узнать, пожалуйста, дайте мне знать в комментариях ниже. Лично я никогда не использовал этот виджет, но как разработчик важно его стилизовать, если кто-то, использующий вашу тему, действительно захочет его использовать.

Подпишитесь на рассылку новостей

Получайте наши последние новости, учебные материалы, руководства, советы и предложения, доставленные на ваш почтовый ящик.

Источник записи: https://www.wpexplorer.com