Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Изменяем шаблон WordPress. Часть 4

Откроем главную страницу нашего блога. Что мы здесь видим? При наведении курсора мыши на заголовок любой из статей, он становится малиновым:

Заголовок статьи при наведённом на него курсоре мыши

Также, можно заметить, что кнопки "Читать далее »" при наведении мыши на них становятся примерно того же цвета, что и заголовки:

Кнопка при наведённом на неё курсоре мыши

Придадим кнопкам и заголовкам более синий оттенок. Для этого воспользуемся функцией браузера Просмотр кода элемента. Видим, что за цвет заголовка отвечает элемент h2, определяемый классом title:

Элемент h2, определяемый классом title

Находим его в редакторе тем. Видим, что за цвет заголовка, на который наведён курсор мыши, отвечает псевдокласс .title a:hover:

Псевдокласс .title a:hover в редакторе тем WordPress

Меняем его цвет на #0042D9, сохраняем таблицу стилей и обновляем главную страницу блога в браузере:

Обновлённый заголовок статьи в блоге на WordPress

Видно, что заголовок поменял цвет, но появилась надпись "Редактировать" розового цвета. Видна она только администратору, поэтому её менять не обязательно. Теперь переходим к кнопке "Читать далее »". За стиль этого элемента отвечает класс readmore:

Ссылка с классом readmore

В редакторе тем находим селектор a.readmore:hover. Вот он:

Селектор a.readmore:hover в редакторе тем WordPress

Видно, что цвет кнопке придаёт рисунок readmore-hover. Также видно, что у кнопки имеется граница, цвет которой - #D375A3. Создадим новый рисунок для кнопки при помощи программы photoshop и зададим новый цвет границе. Где искать изображения для шаблонов написано в статье Изменяем шаблон WordPress. Часть 2. Вот, что у нас получилось после того, как изменения вступили в силу:

Новая кнопка для шаблона Letis

Цвет границы изменили на #516EDF, просто вписав это число в таблицу стилей. Фоновое изображение поменяли при помощи инструмента прямоугольник в фотошопе. На сегодня всё.


<<Предыдущая | В раздел | Следующая>>