Strict Standards: Assigning the return value of new by reference is deprecated in /home/maleon/efft.ru/docs/joom/includes/joomla.php on line 842

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/includes/joomla.php on line 710

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 122

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 123

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 124

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 125

Warning: Cannot modify header information - headers already sent by (output started at /home/maleon/efft.ru/docs/joom/includes/joomla.php:842) in /home/maleon/efft.ru/docs/joom/index2.php on line 126
CMS Joomla! для начинающих - №29. Шаблоны Joomla. Часть 8
№29. Шаблоны Joomla. Часть 8
Автор Леонид Мальков   
12.09.2008 г.

Шаблоны 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 После чего думать, как устранять накладку. А вот способ устранения накладки путем переопределения стиля вложенной таблицы - самый оптимальный.

И последнее на сегодня. Наш демо-сайт закрыт на некоторое время, изменяем в нем права доступа различных категорий пользователей в админке. Всем успехов в изучении Джумлы :)

 

Автор данной статьи: Леонид Мальков

 


Просмотров: 25607

Коментарии (7)
 
Прикольно получилось с этим только ребенок не разберется  
поставил такое можете посматреть на сайте http://www.inoe.uz
 
Антон, 08:26 19 марта 2009 г.
 
А мне так нравятся как выглядят эти коментарии! И что это за расширение, подскажите, please, Очень хочется знать. 
А про шаблоны инфо - то что надо. :zzz 8)
 
Виктор, 15:44 13 апреля 2009 г.
 
Now that's sutlbe! Great to hear from you.
 
Ikha, 03:54 01 августа 2013 г.
 
This is an arctlie that makes you think "never thought of that!"
 
Wibi, 09:43 03 августа 2013 г.
 
This is a really innelligett way to answer the question.
 
Sam, 04:37 10 августа 2013 г.
 
Alhirgt alright alright that's exactly what I needed!
 
Bhwana, 07:33 12 августа 2013 г.
 
Помогите, плиз, нашел готовый шаблон и импортировал его в Joomla, при открытии в браузере получается, что пропадает вертикальное меню. Что интересно, аналогично его нет в стандартных шаблонах, которые по умолчанию есть в Joomla, хотя в менеджере шаблонов видно, что меню есть. Кто-нибудь сталкивался с подобным???
 
Сергей, 03:41 04 сентября 2013 г.

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Последнее обновление ( 12.09.2008 г. )