Изменяем внешний вид меню в Joomla

Если по какой-либо причине вас не устраивает внешний вид меню в шаблоне Joomla, не обязательно менять весь шаблон целиком, можно обойтись только изменением самого меню, которое вам не нравится.

В этой статье я продемонстрирую как это можно сделать. Для этого нам понадобится: сайт на Joomla (я использую сайт с демо-данными и стандартным шаблоном, который вы можете скачать и установить в CMS).

Начинаем с того, что устанавливаем шаблон. Открываем сайт с установленным шаблоном в браузере. Просматриваем код (для этого щелкаем правой кнопкой в окне и выбираем «просмотр html кода»). Находим код меню и копируем его в ваш любимый html – редактор. В первоначальном виде код выглядит так:

HTML

Нам нужно удалить из кода все значения аттрибутов href у ссылок, заменив их на символ «#».

HTML

Получили «очищенный» код — с ним и будем работать. Теперь нам нужно определиться все ли меню мы хотим изменить или только одно. Если только одно, нам нужно присвоить ему суффикс класса. Это делается в системе (Расширения ► менеджер модулей). Находим нужный модуль (в нашем случае «Главное меню»), открываем, и в разделе Параметры ► расширенные параметры, указываем суффикс класса — в нашем случае «_menu». Контейнер div после добавления суффикса теперь имеет класс «moduletable_menu».

Пока мы отсюда не вышли нам нужно отключить заголовок меню, чтобы он не появлялся выше всех пунктов меню.

Идем далее. Мы хотим, чтобы наше меню выглядело вот так:

Наша задача сделать так, чтобы применив несколько правил css, наше меню, код которого мы сохранили, выглядело как меню на рисунке. Сначала уберем все отступы у всех элементов на странице и присвоим все текстовым элементам одинаковый размер шрифта:

CSS

Дело в том, что у каждого элемента по умолчанию заданы значения свойств margin и padding. причем в разных браузерах они разные, поэтому это обнуление свойств необходимо делать при верстке любых html — страничек, для того, чтобы потом не было сюрпризов с неизвестно откуда взявшимися пробелами и отступами у элементов.

Далее указываем следующие правила нашему списку:

CSS

Сохраняем и смотрим, что у нас получилось в браузере:

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

CSS

Теперь нам нужно поместить код сss, который мы написали в систему. Для этого в строенном редакторе редактируем файл стилей.

Расширения ► Менеджер шаблонов ► щелкаем по имени нашего шаблона (он выбран по умолчанию) и выбираем в верхнем меню пункт «Редактировать css».

Так как в тестовом шаблоне к элементам не применяются стили, файл template. css пустой.

Копируем наш код css в этот файл во встроенном редакторе. Нажимает кнопку «сохранить»(если вы больше ничего не хотите поменять в файле стилей, если вы еще не закончили редактировать файл стилей нажимаем кнопку «применить» — дело в том, что если нажать «сохранить», система присвоит файлу стилей атрибут «только для чтения» и редактировать вы его сможете только после того как снимите этот атрибут через файловый менеджер). Затем можно увидеть результат наших стараний, нажав на ссылку «Просмотр».

Добавить комментарий