как редактировать верхнее меню

Оформление интернет-проекта в соответствии со своими требованиями и удобством пользователей (при их разумном сочетании) называется емким словом юзабилити сайта, которое в свою очередь состоит из множества элементов. Сегодня я на простейшем примере расскажу, как редактировать верхнее меню в Joomla и пусть это будет первым шагом к достижению задач и целей проекта.

Зачем редактировать меню

Часто бывает, что top menu Joomla ну никак не вписывается в дизайн, а нанимать программиста нецелесообразно, так как работа по редактированию верхнего меню несложна, но требует оплаты. Для самостоятельного внесения изменений нам понадобится браузер Mozilla Firefox и специальный плагин firebug, с помощью которого мы и узнаем то, ради чего надо долго читать умные книги, точнее как изменить стили CSS в шаблоне Joomla.

Ну, описывать, как загрузить браузер и плагин не стоит, а открывается он так, как показано на первом рисунке в шапке статьи. После того как firebug открыт, можно приступать к редактированию таблицы стилей CSS в той её части, которая ответственна за верхнее меню. В консольной строке нажимаем CSS и кликаем по второму окну слева для анализа элемента. Выделяем верхнее меню Joomla и смотрим в правый нижний угол страницы, где откроется окно с участком таблицы стилей, содержащей данные об элементе (рисунок 2).

редактируем верхнее меню на Joomla

Строка background ответственна за указание места, где расположен графический файл меню и за цвет элемента. Давайте всё уберём и просто укажем цвет, предположим, это будет green для хорошей ассоциации.

Теперь переходим к строке height , которая указывает ширину элемента и я поставил для примера 50 вместо имевшихся 44, то есть сделал наше новое зелёное меню немного шире.

Параметр text-align формирует месторасположение разделов, и я его изменил на left, сдвинув заголовки несколько влево. В результате получилась такая картина –

редактирование верхнего меню

Что получаем

Сравнить можно с тем, что имеется на блоге – стало однозначно хуже, но это лишь потому, что я уже прорабатывал юзабилити и редактирование верхнего меню Joomla уже производилось. Таким же образом можно привести весь проект в порядок, а возможных ошибок бояться не стоит, просто сделайте бэкап и если что-то пойдёт не так, то всё можно откатить буквально за минуту.

Остаётся только перенести изменения на хостинг, для чего открываем с ним ftp-соединение и идём по адресу

public_html – templates – Ваш шаблон – CSS

и выбираем нужный файл, в данном случае это style.css, начиная со строки 129. Копируем стили с fitebug и переносим их на хостинг, подтверждая замену и сохранение файла. На сегодня всё.