Шаблоны Joomla. Часть 8.
(Вертикальное меню. Продолжение)
Уровень: Пользователь - Веб-мастер
Здравствуйте, уважаемые подписчики. Сегодня мы продолжим разговор о стилевом оформлении меню сайта. И объясним некоторые тонкости, с которыми не разобрались в предыдущем выпуске нашей рассылки №28. Шаблоны Joomla. Часть 7. Повторимся. Мы сравнили дизайн меню mailist.ru и результаты применения стилей из прошлого выпуска рассылки: в mailist.ru пункты меню расположены плотнее, чем в нашем шаблоне. Попытаемся устранить расхождение.
Почему в нашем шаблоне лишние отступы?
Для начала необходимо выяснить, какой элемент разметки устанавливает эти отступы. Для чего мы должны увидеть границы элемента и расположение в нем текста. Как это сделать? Самое простое, на время выяснения ситуации установить для анализируемого элемента какой-либо цвет фона и посмотреть на результат.
Расскомментируем цвет для фона в стиле для ссылок меню и добавим стиль display: block:
a.mainlevel:link, a.mainlevel:visited, a.mainlevel:hover {
...
background-color:red;
display:block;
}
Применяем и видим, что красный фон только за текстом ссылок и не выступает за текст. Значит дело в другом. Отступы могут давать, например, стили height или line-height. Можете поэкспериментировать с ними.
Ищем контейнеры
Со ссылками вроде бы все нормально. Что проверять дальше? Для этого смотрим код шаблона, где выводится главное меню :
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">Главное меню </th>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="http://joomla/index.php?option=com_frontpage&Itemid=1" class="mainlevel" id="active_menu">Главная</a></td></tr>
<tr align="left"><td><a href="http://joomla/index.php?option=com_content&task=view&id=5&Itemid=6" class="mainlevel" >Лицензия Joomla!</a></td></tr>
...
Все, наверно, поняли, что - в ячейках таблицы. Как установить фон для этих ячеек. Стиль через css-файл применить сложно или даже невозможно, потому что ни у таблицы ни у ячеек не задан класс. Придется залезть в код Джумлы.
Как Джумла выводит меню сайта
Здесь меню подразумевается во множественном числе, потому что вывод всех меню (вертикальных, горизонтальных, одноуровневых, многоуровневых) происходит в одном модуле mod_mainmenu. Исходный код модуля в файле /modules/ mod_mainmenu.php
Ищем в нем, где формируется таблица (это функция mosShowVIMenu), конкретная строка следующая:
$indents = array(
// префикс блока / префикс объекта / суффикс объекта / суффикс блока
array( '<table width="100%" border="0" cellpadding="0" cellspacing="0">', '<tr align="left"><td>' , '</td></tr>', '</table>' ),
...
Задаем для ячейки класс "main_menu":
'<tr align="left"><td class="main_menu">'
Исходник исправили, теперь задаем стиль ячеек в css-файле шаблона:
table.moduletable td.main_menu {
background-color:gray;
}
Если стиль указать без иерархии (не прописать table.moduletable ), то эффекта не будет. Смотрим на результат и видим, что ссылки имеют отступ слева и снизу (серый фон) в каждом пункте меню. Вот кто дает отступы! Вот только почему и где это указано? А указано в стиле table.moduletable td
Получается, что этот стиль действует не только для ячеек самой таблицы, но и для вложенных таблиц. Что, собственно, полностью соответствует идеологии CSS. Чтобы убрать отступы, надо подправить наш новый стиль:
table.moduletable td.main_menu {
background-color:gray;
padding:0;
}
- Добавили стиль padding:0;
- Вы заметили, что ссылки теперь сместились ближе к левому краю столбца. Отступ слева для ячеек меню стал равен 0 и текст сместился.
На этом примере можно обратить внимание еще на один момент. До последних изменений отступ текста меню слева складывался из двойного применения стиля padding-left: 10px; описанного в table.moduletable td из-за ВЛОЖЕННОСТИ ячеек. Поэтому, если бы у нас было больше вложенных таблиц, смещение слева для каждой увеличивалось бы на 10 точек.
Меню готово!
Все неясные моменты устранены! Новая версия учебного шаблона по итогам двух последних выпусков на нашем сайте скачать шаблон efft_table_29. Чтобы все заработало, не забудьте у себя подправить код mod_mainmenu.php
В этом выпуске мы проделали некоторую лишнюю работу с точки зрения знающего человека. Если Вы понимаете, что стили вложенных таблиц и ячеек могут накладываться и увидели в коде, что меню выводится в таблице, то сразу надо обратить внимание, что у нас задан стиль для ячеек таблиц класса moduletable После чего думать, как устранять накладку. А вот способ устранения накладки путем переопределения стиля вложенной таблицы - самый оптимальный.
И последнее на сегодня. Наш демо-сайт закрыт на некоторое время, изменяем в нем права доступа различных категорий пользователей в админке. Всем успехов в изучении Джумлы :)
Автор данной статьи: Леонид Мальков
