Создание шаблона Joomla за 6 шагов. Шаг 6.
В предыдущем уроке мы изменили код шаблона так, что он стал изменять ширину колонок, чтобы не выводить пустое место там, где нет содержания. Но если посмотреть код полученной страницы, то в нем можно найти пустые блоки div
. Такое положение может привести к проблемам при отображении в различных браузерах.
Следующим шагом в улучшении шаблона является отключение генерации кода модулей, если в них нет содержания. Для решения задачи будем использовать простую конструкцию:
<?php if($this->countModules('left')) : ?> <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>"> <jdoc:include type="modules" name="left"style="xhtml"/> </div> <?php endif; ?>
Такой код не будет генерировать <div id="sidebar">
, если в данной позиции нет никакого содержания.
Используя такую конструкцию для левой и правой панели получим код файла index.php:
<?php /** * @copyrightCopyright (C) 2011 Евгений Попов. * @licenseGPL */ defined('_JEXEC') or die; $app = JFactory::getApplication(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/grid.css" type="text/css" /> </head> <body> <div id="header" class="container_12"> <h1><?php echo $app->getCfg('sitename');?></h1> <jdoc:include type="modules" name="top" style="xhtml"/> </div> <?php $leftcolgrid= "3"; $rightcolgrid= "3"; if ($this->countModules('left') == 0): $leftcolgrid = "0"; endif; if ($this->countModules('right') == 0): $rightcolgrid = "0"; endif; ?> <div id="content" class="container_12"> <?php if($this->countModules('left')) : ?> <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>"> <jdoc:include type="modules" name="left"style="xhtml"/> </div> <?php endif; ?> <div id="maincolumn" class="grid_<?php echo(12-$leftcolgrid-$rightcolgrid);?>"> <jdoc:include type="modules" name="breadcrumbs" style="xhtml" /> <jdoc:include type="component" /> </div> <?php if($this->countModules('right')) : ?> <div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> <?php endif; ?> </div> <div id="footer" class="container_12"> <jdoc:include type="modules" name="footer" style="xhtml"/> </div> <jdoc:include type="modules" name="debug" /> </body>
Основные принципы построения шаблона для Joomla раскрыты. Теперь попробуем сделать внешний вид шаблона более привлекательным.
Делаем шаблон для Joomla 1.6
В результате предыдущих действий у нас есть базовая структура шаблона. Но реальное проектирование шаблона начинается с создания визуального макета страницы. То есть, сначала проектируется дизайн или внешний вид. Для этого можно использовать какой-либо графический редактор. А Макет страницы может быть как растровым, так и векторным. Затем из макета нарезаются изображения для различных элементов шаблона - для фонов, для кнопок, для меток и так далее. Процесс создания макета и нарезка из него комплекта изображений для шаблона выходит за рамки нашего урока. По данной теме можно найти много материала.
За основу для нашего шаблона мы возьмем следующий макет:
В комплект исходников к данному уроку включены изображения, которые нарезаны с данного макета для нашего шаблона.
Раздел заголовка страницы
Изображение для фона заголовка имеет небольшой градиент цвета сверху. Добавим фон к заголовку, а также установим соответствующий цвет позади изображения. Такой подход позволит растягивать заголовок по вертикали (например, если в дальнейшем потребуется увеличить размер шрифта). Также необходимо поменять цвет текста, чтобы он соответствовал фону.
Вот код CSS для заголовка, который надо добавить в файл template.css нашего шаблона:
#header { border-bottom: 3px solid #87B825; background: #B4E637 url(../images/header-bg.gif) repeat-x top left; } #header h1 { margin: 0; padding: 25px; font-family: Georgia, serif; font-size: 150%; color: #374C0E; background: url(../images/bulls-eye.gif) no-repeat top left; }
Для тега h1
устанавливается в качестве фона изображение, которое является своеобразным логотипом нашего шаблона. Его можно не использовать, оно приведено только в качестве демонстрации возможного решения таких задач при разработке шаблонов.
После внесения изменения в стили шаблона, заголовок будет выглядеть так:
Фон колонок
Если указать цвет для фона колонок, то он будет использоваться только на высоту контента колонки. Поэтому, если колонки имеют разную высоту содержания, то и фон для них будет заканчиваться на разной высоте. Такое положение в сочетании со стилизацией нижнего колонтитула выглядит очень коряво. Ситуация возникает по причине того, что элемент div
, в нашем случае - это sidebar
и sidebar-2
— имеют высоту содержания. И они не будут растягиваться до нижнего колонтитула. Это является недостатком системы построенной на основе сетки. Придется использовать JavaScript, чтобы получить нормальное заполнение фоном боковых колонок.
В нашем шаблоне используется скрипт Dynamic Drive для вычисления высоты колонок и выравнивания их. Добавляем в папку нашего шаблона каталог js, в котором размещаем файл скрипта. Обратите внимание, что нужно изменить имена элементов, которые используются при вызове скрипта, чтобы они соответствовали нашему шаблону. А в разделе head файла index.php нашего шаблона надо добавить загрузку скрипта:
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/equalcolumns.js" type="text/javascript"></script>
Также мы добавим еще один блочный элемент “maincolbck
” для использования затухающего желтого цвета сверху центральной колонки.
В файле скрипта equalcolumns.js инициализация скрипта для нашего шаблона будет выглядеть следующим образом (все перечисленные элементы будут иметь одинаковую высоту):
ddequalcolumns.columnswatch=["content","maincolbck","sidebar", "maincolumn", "sidebar-2"]
Основная часть кода файла index.php будет выглядеть следующим образом:
<div id="content" class="container_12"> <div id="maincolbck"> <?php if($this->countModules('left')) : ?> <div id="sidebar" class="grid_<?php echo $leftcolgrid;?>"> <jdoc:include type="modules" name="left"style="xhtml"/> </div> <?php endif; ?> <div id="maincolumn" class="grid_<?php echo(12-$leftcolgrid-$rightcolgrid);?>"> <jdoc:include type="modules" name="breadcrumbs" style="xhtml" /> <jdoc:include type="component" /> </div> <?php if($this->countModules('right')) : ?> <div id="sidebar-2" class="grid_<?php echo $rightcolgrid;?>"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> <?php endif; ?> </div> </div>
А в файл template.css добавим следующие правила:
#content { font-size: 95%; color: #333; line-height: 1.5em; background: url(../images/content-bg.gif) repeat-x top left; } #maincolbck { background: url(../images/wrap-bg.gif) repeat-y top right; } #footer { background: #828377 url(../images/footer-bg.gif) repeat-x top left; padding:1px 0; }
После сохранения изменений сайт с нашим шаблоном будет иметь вид:
Модули
При разработке шаблона нужно продумывать следующие моменты: будет ли он растягиваться по вертикали и по горизонтали, куда будут выводиться меню. Для фонов модулей нашего шаблона будут использоваться пара простых изображений, которые будут растягиваться по обеим осям.
Добавим следующие правила в файл template.css:
#sidebar .moduletable,#sidebar-2 .moduletable { margin: 10px 0 10px 0; padding: 0 0 12px 0; font-size: 85%; line-height: 1.5em; color: #666; background: #fff url(../images/box-b.gif) no-repeat bottom right; } #sidebar h3,#sidebar-2 h3 { margin: 0; padding: 12px; font-family: Georgia, serif; font-size: 140%; font-weight: normal; color: #693; background: url(../images/box-t.gif) no-repeat top left; } #sidebar p,#sidebar-2 p,sidebar ul,#sidebar-2 ul { margin: 0; padding: 0 12px; } sidebar ul li,#sidebar-2 ul li { margin: 0 0 0 12px; padding: 0 0 0 18px; list-style: none; background: url(../images/li-bullet.gif) no-repeat 0 3px; }
Теперь нужно убрать у всех модулей меню суффикс _menu и удалить из файла template.css все стили для класса moduletable_menu.
После сохранения изменений и обновления страницы наш сайт будет выглядеть следующим образом:
Типографика
Работа с типографикой значительно упрощена в Joomla 1.6. В предыдущих версиях существовали специальные классы, например contentheading, для различных частей выводимого содержания. Теперь используются теги заголовков и полностью отсутствует табличная верстка. Поэтому для заголовков статей можно просто установить определенный вид:
h1, h2, h3, h4, h5, h6 { font-family: Georgia, serif; font-size: 150%; color: #663; font-weight: normal; } h1 {font-size:2em;line-height:1;margin-bottom:0.5em;} h2 {font-size:1.5em;margin-bottom:0.75em;} h3 {font-size:1.25em;line-height:1;margin-bottom:1em;} h4 {font-size:1.1em;line-height:1.25;margin-bottom:1.25em;}
Также можно добавить обработку определенных классов для вывода информирующих иконок:
p.info { background: #F8FAFC url(../images/info.png) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding: 5px 20px 5px 45px; border-top: 2px solid #B5D4FE; border-bottom: 2px solid #B5D4FE; } p.warn { background: #FFF7C0 url(../images/warn.png) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding: 5px 20px 5px 45px; border-top: 2px solid #F7D229; border-bottom: 2px solid #F7D229; } p.alert { background: #FBEEF1 url(../images/exc.png) center no-repeat; background-position: 15px 50%; /* x-pos y-pos */ text-align: left; padding: 5px 20px 5px 45px; border-top: 2px solid #FEABB9; border-bottom: 2px solid #FEABB9; } ul.checklist li { list-style:none; background: url(../images/tick.png) no-repeat 0 4px; line-height: 24px; padding-left: 20px; }
В окончательном виде наш шаблон будет выглядеть так:
Все. В данной серии уроков были представлены базовые сведения для создания шаблона Joomla. Изучение документации по функциям системы позволит вам создавать действительно сложные и отлично работающие варианты.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/tutorials/site-builds/create-a-template-with-joomla-step-by-step/
Перевел: Сергей Фастунов
Урок создан: 1 Июля 2011
Просмотров: 69396
Правила перепечатки
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 шагов. Шаг 5.
В данном уроке серии разбирается вопрос скрытия колонок шаблона, в которых отсутствует контент.