Если по какой-либо причине вас не устраивает внешний вид меню в шаблоне 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 в этот файл во встроенном редакторе. Нажимает кнопку «сохранить»(если вы больше ничего не хотите поменять в файле стилей, если вы еще не закончили редактировать файл стилей нажимаем кнопку «применить» - дело в том, что если нажать «сохранить», система присвоит файлу стилей атрибут «только для чтения» и редактировать вы его сможете только после того как снимите этот атрибут через файловый менеджер). Затем можно увидеть результат наших стараний, нажав на ссылку «Просмотр».