- Метки урока:
- шаблон
- joomla
- css
- web дизайн
Создание шаблона Joomla за 6 шагов. Шаг 4.
Определим, как будет выводиться меню в нашем простом шаблоне.
Преимущество использования правил CSS перед табличной структурой HTML проявляется в меньшем размере кода и более простой верстке. Кроме того, существует большое количество примеров организации различного типа меню на основе CSS, которые достаточно просто адаптировать для использования в шаблоне Joomla.
Рассмотрим типовую структуру меню на основе неупорядоченного списка :
<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href=" #" id="current">Пункт один</a></li> <li><a href="#">Пункт два</a></li> <li><a href="#">Пункт три</a></li> <li><a href="#">Пункт четыре</a></li> <li><a href="#">Пункт пять</a></li> </ul> </div>
Список <ul>
имеет идентификатор navlist и помещен в контейнер <div>
c идентификатором navcontainer. Чтобы воспроизвести такую же структуру в шаблоне Joomla, необходимо организовать внешний контейнер <div>
. Задача решается с помощью суффикса модуля. Модуль с опцией style="xhtml"
будет иметь вид в итоговом коде:
<div class="moduletable"> <h3>...Заголовок модуля...</h3> ...Содержание модуля... </div>
Если установить для модуля суффикс _menu
, то он будет добавлен к названию класса moduletable:
<div class="moduletable_menu"> <h3>...Заголовок модуля...</h3> ...Содержание модуля... </div>
Теперь если вы будете использовать готовый код CSS для меню, то в нем надо будет заменить имя класса navcontainer на moduletable_menu.
Использование суффиксов для модулей позволяет очень гибко настраивать интерфейс шаблона. Например, задавать различные стили для разных меню.
Добавим в файл template.css нашего шаблона следующий код для формирования меню:
.moduletable_menu{ padding:0; color: #333; margin-bottom:1em; } .moduletable_menu h3 { background:#666; color:#fff; padding:0.25em 0; text-align:center; font-size:1.1em; margin:0; border-bottom:1px solid #fff; } .moduletable_menu ul{ list-style: none; margin: 0; padding: 0; } .moduletable_menu li{ border-bottom: 1px solid #ccc; margin: 0; } .moduletable_menu li a{ display: block; padding: 3px 5px 3px 0.5em; border-left: 10px solid #333; border-right: 10px solid #9D9D9D; background-color:#666; color: #fff; text-decoration: none; } html>body .moduletable_menu li a { width: auto; } .moduletable_menu li a:hover,a#active_menu:link,a#active_menu:visited{ border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
Чтобы внешний вид меню изменился, надо для их модулей установить суффикс _menu.
В итоге внешний вид сайта при использовании шаблона станет таким:
Анонс
В следующем уроке будет представлено, как скрывать колонки шаблона, в которые ничего не выводится.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/tutorials/site-builds/create-a-template-with-joomla-step-by-step/
Перевел: Сергей Фастунов
Урок создан: 22 Июня 2011
Просмотров: 52250
Правила перепечатки
5 последних уроков рубрики "Joomla!"
-
Краткий обзор файла configuration.php для системы Joomla!
При перемещениях или других действиях с сайтом под управлением Joomla частенько требуется решить небольшие проблемы с настройкой путей, паролей, базы данных и других основных моментов конфигурации. Большая часть таких вопросов легко решается прямым редактированием файла конфигурации configuration.php.
-
Использование капчи в Joomla 2.5
Обратной стороной использования популярных систем, таких как Joomla, WordPress или Drupal, является то, что спаммеры знают, как устроено программное обеспечение. Поэтому вполне вероятна ситуация, когда на сайте имеется большое число регистраций для спама.
-
Установка и настройка модуля новостей для Joomla 1.7 AidaNews2 (Чaсть 2)
В данном уроке мы научимся устанавливать и настраивать очень гибкий модуль для отображения новостей на Joomla 1.7
-
Установка и настройка модуля новостей для Joomla 1.7 AidaNews2 (Часть 1)
В данном уроке мы научимся устанавливать и настраивать очень гибкий модуль для отображения новостей на Joomla 1.7
-
Создание шаблона Joomla за 6 шагов. Шаг 6.
В данном уроке мы закончим построение простого шаблона Joomla.