Создание шаблона 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. В итоге внешний вид  сайта при использовании шаблона станет таким:

Сайт с использованием шаблона Joomla

sourse

 

Анонс

В следующем уроке будет представлено, как скрывать колонки шаблона, в которые ничего не выводится.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/tutorials/site-builds/create-a-template-with-joomla-step-by-step/
Перевел: Сергей Фастунов
Урок создан: 22 Июня 2011
Просмотров: 50571
Правила перепечатки

5 последних уроков рубрики "Joomla!"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 23 Июня 2011 08:35
    WI_Wind
    Спасибо!
  • 23 Июня 2011 16:32
    StalkerAA
    Хочется видеть что то более интересное. Может проще делиться знаниями, которые реально пригодятся, а не заниматься плагиатом. Обратите внимание, что на Этом сайте нет практического применения того что нам предлагают в уроках.
    • 24 Июня 2011 00:38
      Svasus
      ну если ты не можешь найти практического применения быстрой вёрстке на джумле, то кто ж врач тебе)
    • 24 Июня 2011 19:43
      vladuhliy
      Тут на практике применена система комментирования, которая есть в уроках )
      • 26 Июня 2011 11:29
        StalkerAA
        Я в курсе, но это единичный случай.
    • 7 Апреля 2012 19:17
      KonevDN
      ага
    • 7 Апреля 2012 19:17
      KonevDN
      ну т ы типочек с молоточек, я б тебя об гвоздик - что значит бесполезные уроки, ??? ты глаза открой получше
  • 4 Февраля 2012 20:40
    lanworks
    Подскажите как подключить код к шаблону <style>body{ текст кода } </style>
  • Комментарий удален
    • 23 Июня 2011 15:39
      graft
      Почему?
    • 23 Июня 2011 16:12
      flasher777
      Это серия переводов с сайта http://net.tutsplus.com/ http://net.tutsplus.com/tutorials/site-builds/create-a-template-with-joomla-step-by-step/ И что тот сайт тоже умирает???
    • 24 Июня 2011 19:51
      vladuhliy
      почему умирает? Судя по всему скоро будет форум, вот где жизнь будет кипеть! )
      • 7 Апреля 2012 19:20
        KonevDN
        да не, форумы это прошлый век, как IE6 , ну вы че ребятки... сообщества типа соц сети , вто что давно должно уже вытеснить все эти невзрачные форумы
  • Комментарий удален
    • 25 Июня 2011 22:35
      WI_Wind
      +1 - поддерживаю!!!
^ Наверх ^