Совершенствуем блоки с закругленными углами в Joomla! 1.5

Joomla! 1.5 внесла качественно отличается от Joomla! 1.0 и это факт. Но, к сожалению, в новой версии остались некоторые рудиментарные явления, которые стоит усовершенствовать. Например, модель для вывода блоков с закругленными углами.

По умолчанию, если вы выберите для своего модуля позицию «rounded» то Joomla! автоматически сгенерирует вам следующую модель:

<div class="module">
 <div>
  <div>
   <div>
     Content
   </div>
  </div>
</div>
</div>

Но данная модель, хотя и является наиболее простым и распространенным способом создания блоков с закругленными краями, не является оптимальным решением. Поэтому, я решил немного усовершенствовать модель для вывода скроенных углов в Joomla!

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

1. Используется одно маленькое изображение вместо четырех (минус три запроса, значительно меньший размер файла)
2. Можно использовать как форму, так и контр-форму (например, с помощью одного и того же небольшого графического элемента вы можете варьировать как закругленными, так и вдавленными уголками, или использовать различные элементы цвета.)
3. Не используется наследование при создании стилей, что не требует очистки свойств вложенных элементов.

Итак, приступаем к созданию нашей разметки. Для начала создадим единственный графический элемент, который на понадобится для создания уголков. Размеры форма элемента зависят от необходимых вам размеров закругленных углов. Например, если вам нужны углы с радиусом в 10px то ваш элемент будет выглядеть вот так:

Сразу скажу, что можно было бы ограничиться кружочком размером 20x20px, но есть IE6 — который заставляет нас использовать элементы высотой не менее 15px. Отмечу, что в данной модели этот момент не решающий, поэтому я не стал писать дополнительные стили или использовать фикс для принудительного диалога с IE6. Кроме того, если радиус ваших углов больше 15px, то проблемы нет вообще.

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

<div class="module">
	<span class="tl"></span>
	<span class="tr"></span>
        	 		<div>
        	 		  Module content
                               </div> 	
        <span class="bl"></span>
        <span class="br"></span>
</div>

Для главного контейнера мы будем использовать стандартный класс Joomla! .module. Вложенные в основной контейнер строчные элементы span будут иметь классы названные согласно их положения в основном блоке: .tl, .tr, .bl, .br (top left, top right, bottom left, и bottom right соответственно).

CSS код для оформления будет выглядеть вот так:

div.module {
	position:relative;
	border:1px solid #999999;/*Граница под цвет закругленных углов*/
	width:100%;/*Ширина бокса обязательно только для ie6, для нормальных браузеров можно не ставить. Или же ставим нужную вам.*/
}
 
div.module div {
	padding:10px;/* Отступ контента, желательно не меньше чем радиус закругленного блока*/
}
 
div.module .tl {
	background:url(images/round.png) 0 0 no-repeat;/*путь к картинке - у каждого свой*/
	width:10px; height:10px;
	top:-1px;
	left:-1px;
	position:absolute;
}
 
div.module .tr {
	background:url(images/round.png) 100% 0 no-repeat; /*путь к картинке - у каждого свой*/
	width:10px; height:10px;
	top:-1px;
	right:-1px;
	position:absolute;
}
 
div.module .bl {
	background:url(images/round.png) 0 100% no-repeat; /*путь к картинке - у каждого свой*/
	width:10px; height:10px;
	bottom:-1px;
	left:-1px;
	position:absolute;
}
 
div.module .br {
	background:url(images/round.png) 100% 100% no-repeat; /*путь к картинке - у каждого свой*/
	width:10px; height:10px;
	bottom:-1px;
	right:-1px;
	position:absolute;
}

В принципе, когда у нас готова и разметка и оформление, то осталось дело за малым — вписать нашу разметку в chrome «rounded» для модулей Joomla!. Сделать то не сложно. Для тех, кто хочет понять основы и углубиться в теорию — есть статья Понимание системы «переписывания разметки» вывода контента (output overrides) в Joomla! 1.5, а для тех, кто хочет быстро и «чтобы работало» рассказываю.

1. Идете в папку системных шаблонов Joomla! 1.5 и находите там файлик module.php — путь-> templates/system/html/module.php.
2. Копируете module.php и вставляете его в папку /html вашего шаблона. Если такой папки нет, то создайте ее. Путь к файлу в вашем шаблоне ->/templates/ваш_шаблон/html/modules.php
3. Далее в этом файле удаляем все стили chrome кроме rounded. В итоге должно получиться вот так:

   <?php // no direct access defined('_JEXEC') or die('Restricted access');   /* * Module chrome that allows for rounded corners by wrapping in nested div tags */ function modChrome_rounded($module, &$params, &$attribs) { ?> <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> <?php } ?>

   <?php // no direct access defined('_JEXEC') or die('Restricted access'); /* * Module chrome that allows for rounded corners by wrapping in nested div tags */ function modChrome_rounded($module, &$params, &$attribs) { ?> <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> <?php } ?>

4. А потом вставляем в файл нашу разметку и в нужных местах вставляем функции вывода заголовка и контента модуля.

В конечно счете содержание вашего файла module.php должно выглядеть примерно так:

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
 
/*
 * Module chrome that allows for rounded corners by wrapping in nested div tags
 */
function modChrome_rounded($module, &$params, &$attribs)
{ ?>
		<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
			<span class="tl"></span>
			<span class="tr"></span>
				<div><?php if ($module->showtitle != 0) : ?>
					<h3><?php echo $module->title; ?></h3>
					<?php endif; ?>
					<?php echo $module->content; ?>
				</div>
			<span class="bl"></span>
			<span class="br"></span>
		</div>
	<?php
}
?>

В принципе, все. Осталось только не забыть про CSS и вставить его в template.css вашего шаблона и можете смело использовать новый стиль. При этом, как я уже и говорил, возможности оформления блоков у вас значительно расширятся. Да и еще. Этот пример разметки можно использовать и для обычной верстки блоков с закругленными углами. Вот такой вот простой примерчик.

Постовой:
Уметь сделать сайт — хорошо, но еще лучше уметь продвинуть. Но уметь все сразу нельзя. Поэтому если вы сделали свой сайт то закажите продвижение сайта в интернет у профи.

Хотите рекламировать ваш сайт оффлайн — тогда закажите печать брошюр классного качества.