Главная arrow РАССЫЛКА arrow №29. Шаблоны Joomla. Часть 8
17.12.2017 г.

Joomla для начинающих

Опрос (НОВЫЙ!)

Интересна ли Вам тема интернет-магазина для Джумлы?

Авторизация






Забыли пароль?

Последние 3 записи в Гостевой

Елена Васильева
Перед покупкой прилегающей одежды важно знать вашу форму тела. Некоторые женщины имеют неправильное представление о том, что ношение прилегающей одежд
Slimera Garcinia Cam
. You can select any trustworthy hospital when you purchase slimming tablets online.So searching for a sliming treatment? Wish to loose weight as earl
Фактор 4
Этот тип упражнений делается на коленях или лежа на животе. Это упражнение также устраняет напряжение в спине и шее, которое можно получить, делая скр

Sony официально подтвердила миллиардные убытки

Представители Sony недавно опубликовали официальные результаты деятельности корпорации за второй финансовый квартал 2014 года. К сожалению, легендарная компания подтвердила, что сумма убытков за прошедший квартал превысила $1,2 миллиарда.

 

 

Последние новости
  • Компания Microsoft в июле 2015 года объявила о сокращении более 7 тысяч рабочих мест.
  • Facebook проектирует строительство дата-центра, электричество для которого будет полностью вырабатываться от энергии ветра.
Реклама:
На этом сайте много подробностей про профессиональный картинг в России
 

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

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

 

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

 


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

Коментарии (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 г. )
 
Далее...

 
   

2007+ © "efft" Lab

Яндекс цитирования