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

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

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

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

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

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

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

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

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

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

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


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