Настройка дочерней темы Luxeritas (style.css)
Luxeritas - это домашняя бесплатная и очень функциональная тема Wordpress.В этом блоге я представлю настраиваемое содержимое style.css дочерней темы.
Как редактировать дочернюю тему Luxeritas
Есть два способа редактировать style.css
1. Введите прямо в «Таблицу стилей: style.css».
Экран управления: Luxeritas → Изменить дочернюю тему → Выбрать тег style.css.
Введите код после «/ * Пожалуйста, напишите стиль дочерней темы в соответствии с вашими предпочтениями. * /».
2.Введите «Дополнительный CSS» для настройки внешнего вида.
Экран управления: Luxeritas → Настроить (внешний вид) → Дополнительные CSS
Мы рекомендуем это, потому что вы можете увидеть результат отражения кода одновременно с вводом кода.
Настроенный style.css
Полужирный заголовок сайта
Для тех, кому кажется, что стандартные символы тонковаты, а впечатление - тонкое.
/ * Название сайта * / #sitename {font-weight: bold;}
Добавьте тень под меню полосы, чтобы оно выглядело как материал
На этом есть тень ...
Будет это.Разница небольшая, но неожиданно меняется атмосфера на сайте.
/ * Тень при глобальной навигации * / #nav {box-shadow: 0 2px 10px rgba (0,0,0, .2)}
Цвет наведения, который нельзя установить при настройке внешнего вида
Стандартный цвет наведения для заголовков статей, а также предыдущих и следующих статей - красный.Не думаю, что нужно было что-то менять непосредственно из настройки внешнего вида.
цвет: вы можете изменить его, указав его в коде вашего любимого цвета ниже.Кстати, «# 00b22f» светло-зеленый.Кроме того, заголовок статьи выделен жирным шрифтом, чтобы ее было легче читать.
/ * Название статьи * / .entry-title a: hover {color: # 00b22f;} .entry-title {font-weight: bold;} / * Предыдущая и следующая статьи * / #pnavi a: hover {color: # 00b22f }
Карточка блога для материального дизайна
У вас будет такая карточка блога.Переместите курсор, чтобы он получился пушистым.
/ * Дизайн карточки блога * / a.blogcard-href {padding: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba (0, 0, 0, .13); transition: .3s;} a. blogcard-href: hover {box-shadow: 0 4px 20px rgba (0,0,0,0.25); transform: translateY (-5px);} .blogcard-img {margin: 0px 10px 0 0; border: none} p .blog-card-title {margin: 5px 5px 5px 5px;} p.blog-card-desc {display: none;} p.blogcard-link {clear: none; margin: 5px 0 5px 5px;} экран только @media и (максимальная ширина: 430 пикселей) {p.blogcard-link {display: none;}}
Я сослался на следующую страницу.
Настройте свою карточку блога Luxeritas, чтобы она плавала, как SANGO
Изменить цвет разбивки на страницы
Как и заголовок статьи, он остался красным и не мог быть изменен с помощью настройки внешнего вида. Он выделен серым цветом с "# 999999".
.pagination> .active> span, .pagination> li> a: hover {background: none; background-color: # 999999;}
Когда вы его меняете, это выглядит так ↓
Изменение дизайна облака тегов
/ * Изменение дизайна облака тегов * / .tagcloud a {border-radius: 3px; / * Закругление углов * / padding-bottom: 1px; padding-left: 6px; padding-right: 3px; padding-top: 1px}
Я скругил углы метки, чтобы уменьшить ширину линии.
Убраны поля под заголовком статьи
Когда я поместил объявление Google AdSense под заголовком статьи, я был обеспокоен тем, что межстрочный интервал до и после объявления казался большим. После снятия запаса мне удалось установить его максимально компактно.
/ * Мета-информация (обновлено) Удалить нижнее поле * / .meta, .post .meta {padding: 5px 0; margin-bottom: 0px;} / * Удалить поле над и под статьей * / .post- title-upper,. заголовок сообщения под {margin-bottom: 1px;}
Вот и все.