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

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

Прочли предыдущую статью? Если нет - советую прочитать, если да - поехали дальше! В нашем теперешнем шаблоне будем изменять верхнее меню. Как и говорилось ранее, сделаем его в синих тонах. Сейчас оно имеет следующий вид:

Верхнее меню шаблона блога на WordPress

Просматриваем код элемента. За верхнее меню отвечает элемент с идентификатором navcontainer:

Элемент navcontainer

В редакторе тем WordPress находим правила с селектором navcontainer. Вот они:

Элементы верхнего меню в таблице стилей

Верхнее правило отвечает за весь блок целиком, нижнее - за кнопки, когда на них наведён курсор мыши. Заметим, что фон верхнего меню и элементов в нём задан при помощи фоновых рисунков, которые для CMS WordPress находятся в папке wp-content => themes => letis (название шаблона в нашем случае) => images. Вот все фоновые рисунки для используемого нами шаблона:

Рисунки, используемые для шаблона Letis на WordPress

Нужные нам nav-bg.png и nav-hover.png находятся среди них. Изменим их, при помощи программы photoshop или любого другого редактора для растровой графики. После изменений получилось следующего вида верхнее меню:

Верхнее меню блога на WordPress

Теперь оно сделано в синих тонах и лишь его выдвижная часть осталась розовой. За выпадающее меню основная таблица стилей ответственности здесь никакой не несёт. Если на эту выдвинутую часть кликнуть правой кнопкой мыши, а затем выбрать Просмотр кода элемента, то в правом нижнем углу отобразится таблица стилей для выпадающих элементов меню и путь к месту, где она находится:

Местонахождение таблицы стилей выпадающего меню

Переходим к нужному нам файлу, открываем его и меняем цвет фона выпадающего меню, на цвет кнопки, на которую наведён курсор мыши. Для этого в программе фотошоп откроем рисунок nav-hover.png и, при помощи инструмента пипетка, посмотрим на его цвет. Потом уже в нужной таблице стилей изменим необходимые нам элементы. Посмотрим на конечный результат:

Обновлённое выпадающее меню блога на WordPress

В следующих уроках продолжим изменять оставшиеся элементы розового цвета на синие.


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