Создание шаблона 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;
}

В окончательном виде наш шаблон будет выглядеть так:

Окончательный вид шаблона

sourse

Все. В данной серии уроков были представлены базовые сведения для создания шаблона Joomla. Изучение документации по функциям системы позволит вам создавать действительно сложные и отлично работающие варианты.

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

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

^ Наверх ^