Изменяем шаблон WordPress. Часть 2
Прочли предыдущую статью? Если нет - советую прочитать, если да - поехали дальше! В нашем теперешнем шаблоне будем изменять верхнее меню. Как и говорилось ранее, сделаем его в синих тонах. Сейчас оно имеет следующий вид:
Просматриваем код элемента. За верхнее меню отвечает элемент с идентификатором navcontainer:
В редакторе тем WordPress находим правила с селектором navcontainer. Вот они:
Верхнее правило отвечает за весь блок целиком, нижнее - за кнопки, когда на них наведён курсор мыши. Заметим, что фон верхнего меню и элементов в нём задан при помощи фоновых рисунков, которые для CMS WordPress находятся в папке wp-content => themes => letis (название шаблона в нашем случае) => images. Вот все фоновые рисунки для используемого нами шаблона:
Нужные нам nav-bg.png и nav-hover.png находятся среди них. Изменим их, при помощи программы photoshop или любого другого редактора для растровой графики. После изменений получилось следующего вида верхнее меню:
Теперь оно сделано в синих тонах и лишь его выдвижная часть осталась розовой. За выпадающее меню основная таблица стилей ответственности здесь никакой не несёт. Если на эту выдвинутую часть кликнуть правой кнопкой мыши, а затем выбрать Просмотр кода элемента, то в правом нижнем углу отобразится таблица стилей для выпадающих элементов меню и путь к месту, где она находится:
Переходим к нужному нам файлу, открываем его и меняем цвет фона выпадающего меню, на цвет кнопки, на которую наведён курсор мыши. Для этого в программе фотошоп откроем рисунок nav-hover.png и, при помощи инструмента пипетка, посмотрим на его цвет. Потом уже в нужной таблице стилей изменим необходимые нам элементы. Посмотрим на конечный результат:
В следующих уроках продолжим изменять оставшиеся элементы розового цвета на синие.