Печать

Создаем шаблон Joomlа по стандартам - CSS для Joomla

CSS для Joomla


Хотя Joomla 1.5 имеет функциональность для переопределения с помощью шаблонов того, что отображается ядром, ее вывод по умолчанию все еще использует множество таблиц для отображения контента в основном теле страницы. Наряду с этими таблицами, для изменения стилей страницы дизайнеру доступны некоторые заранее заданные CSS-классы. По результатам небольшого исследования, проведенного членами сообщества, мы составили таблицу, которая содержит текущий перечень этих классов. Обратите внимание, что список не содержит базовые элементы страниц, такие как H1, H2, p, ul, a, form и т.д.

CSS-стили, унаследованные в версии 1.5 от версии 1.0

 

article_separator
adminform
author
bannerfooter
bannergroup
bannerheader
banneritem
blog
blog_more
blogsection
breadcrumbs
button
buttonheading
clr
componentheading
content_email
content_rating
content_vote
contentdescription
contentheading
contentpagetitlw
contentpane
contentpaneopen
contenttoc
createdate
created-date
date
input
inputbox
intro
latestnews
loclink
mainlevel
message
metadata
modifydate
module
moduletable
mosimage
mosimage_caption
mostread
newsfeed
outline
pagenav
pagenav_next
pagenav_prev
pagenavbar
pagenavcounter
pathway
pollstableborder
read
search
searchintro
sections
sectiontable_footer
sectiontableentry
sectiontablefooter
sectiontableheader
small
smalldark
sublevel
title
wrapper



Многие классы, которые вы видите в этой таблице, имеют более специфичные CSS-стили. Обычно, более специфичное правило имеет преимущество перед менее специфичным правилом.

Например:

a {color:blue;} a:link {color:red;}
.contentheading {color:blue;}
div.contentheading {color:red;}


Цвет ссылки и цвет .contentheading будет красным, так как это правило более специфично (поскольку .contentheading находится внутри <div>)

В случае шаблонов Joomla вы часто увидите использование более специфичных правил. Это часто случается, когда класс применятся к таблице. Вот еще примеры:

.moduletable
table.moduletable


.moduletable это класс для блока <div>, в котором содержится модуль. table.moduletable всего лишь определяет стиль для таблицы с заданным классом class=«moduletable».
.moduletable определяет стиль не зависимо от того, к какому элементу этот класс относится.

a.contentpagetitle:link
.contentpagetitle a:link


a.contentpagetitle:link применяет стиль к любому тегу «a», являющемуся ссылкой, для которого задан класс .contentpagetitle.
.contentpagetitle a:link применяет стиль ко всем ссылкам внутри элемента, для которого задан класс .contentpagetitle.

Специфичность не так легко понять, поэтому гораздо легче начинать использовать более простые, базовые стили, в дальнейшем переходя к более специфичным, если вы не добиваетесь нужного результата.

Вот несколько ссылок на сайты, на которых специфичность обсуждается в деталях:


В настоящий момент наш шаблон использует несколько таблиц. Как было отмечено ранее, это замедляет отображение страниц и усложняет их дальнейшую модификацию. Для того, чтобы уменьшить количество таблиц, получаемых при выводе модулей, мы должны использовать параметр style при вызове jdoc:include.

Что необходимо знать


Joomla будет выводит конкретные, заранее заданные элементы, id и классы непосредственно в коде страницы. Этого можно избежать, если мы хотим перейти к дизайну с использованием CSS.

Модули и шаблоны


При вызове модуля в index.php можно использовать некоторые опции, чтобы задать, как он будет отображаться. Синтакс следующий:

<jdoc:include type="modules" name="LOCATION" style="OPTION" />


Параметр style не обязательный, его варианты задаются в templates/system/html/modules.php. В настоящий момент файл modules.php по умолчанию содержит следующие варианты:

OPTION=«table» (отображение по умолчанию) модули отображаются в колонке таблицы. Вот пример такого отображения:

 <table cellpadding="0" cellspacing="0" class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
 <?php if ($module->showtitle != 0) : ?>
  <tr>
   <th valign="top">
    <?php echo $module->title; ?>
   </th>
  </tr>
 <?php endif; ?>
  <tr>
   <td>
    <?php echo $module->content; ?>
   </td>
  </tr>
  </table>


OPTION=«horz» заставляет модули отображаться горизонтально. Каждый модуль выводится в ячейке таблицы. Пример отображения:

 <table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
   <td valign="top">
    <?php modChrome_table($module, $params, $attribs); ?>
   </td>
  </tr>
 </table>


OPTION=«xhtml» заставляет модули отображаться в блоках div. Пример отображения:

  <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
  <?php if ($module->showtitle != 0) : ?>
   <h3><?php echo $module->title; ?></h3>
  <?php endif; ?>
   <?php echo $module->content; ?>
  </div>


OPTION=«rounded» заставляет модули отображаться в формате, который позволяет создавать растягиваемые скругленные углы. Если задан этот вариант style, то имя блока div изменяется с «moduletable» на «module». Пример отображения:

  <div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
   <div>
    <div>
     <div>
      <?php if ($module->showtitle != 0) : ?>
       <h3><?php echo $module->title; ?></h3>
      <?php endif; ?>
     <?php echo $module->content; ?>
     </div>
    </div>
   </div>
  </div>


OPTION=«none» заставляет модули отображаться в «сыром» виде, не содержащем элементы или заголовки. Вот пример:

 echo $module->content;


Как вы видите, опции с использованием CSS (xhtml и rounded) более линейны в коде, что облегчает применение стилей к веб-страницам. Я не рекомендую использовать опции table (по умолчанию) или horz, если только это не абсолютно необходимо.

А вот теперь по-настоящему хороший момент!


Если вы посмотрите файл modules.php, вы увидите все варианты опций, которые существуют для модулей. Но можно легко создать свой вариант, это часть новых мощных возможностей шаблонизации в версии 1.5. Мы рассмотрим эту тему в нашей следующей главе о переопределении шаблонов.

Для разработки нашего шаблона мы зададим всем нашим модулям style=«xhtml»:

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
        <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <div id="content">
    <div class="inside">
      <jdoc:include type="module" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />     </div>
  </div>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div>
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div>
  </div>
<!--end of wrap-->
</body>


Заметьте, что мы не можем задавать эти стили в <jdoc:include type=«component» />, поскольку это не модуль.

Что необходимо знать


В версии 1.5 вывод модулей можно полностью кастомизировать, или вы можете использовать встроенный вывод. Все эти варианты называются «module chrome».

Мы также поместили заголовок сайта в теги <H1>. Это более семантически корректно и поможет с SEO. Еще мы уберем подложку из блоков div разметки.

А также добавим немного CSS для задания стилей рамок и подложки для заголовков модулей.

Наш CSS теперь выглядит следующим образом:

* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
li,dd {
margin-left:1em;
}
fieldset {
padding:.5em;
}
body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}
#wrap {
border:1px solid #999;
}
#header {
border-bottom:1px solid #999;
}
#footer {
border-top:1px solid #999;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
h1,.componentheading {
font-size:1.7em;
}
h2,.contentheading {
font-size:1.5em;
}
h3 {
font-size:1.3em;
}
h4 {
font-size:1.2em;
}
h5 {
font-size:1.1em;
}
h6 {
font-size:1em;
font-weight:700;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption {
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable {
margin-bottom:1em;
border:1px #CCC solid;
padding:0 10px;
}
.moduletable h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em;
padding:0.25em 0;
}


Примечание
  Некоторые меню при установке по умолчанию имеют суффикс _menu в свойствах модуля. Для того, чтобы все работало правильно, я удалил этот параметр.

Интересная статья? Поделись ей с другими: