Опубликовано автор в категориях Joomla, Верстальщику.

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
    }
    ?>
  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 вашего шаблона и можете смело использовать новый стиль. При этом, как я уже и говорил, возможности оформления блоков у вас значительно расширятся. Да и еще. Этот пример разметки можно использовать и для обычной верстки блоков с закругленными углами. Вот такой вот простой примерчик.

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

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

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

  1. anton

    Не получается переопределить функцию вывода модулей, пишет:
    Fatal error: Cannot redeclare modchrome_rounded() (previously declared in /home/tmnwebru/domains/tmn-web.ru/public_html/templates/system/html/modules.php:80) in /home/tmnwebru/domains/tmn-web.ru/public_html/templates/rusoil/html/modules.php on line 34.

    Но мы не сдаемся — бум кивирять 🙂

    Ответить
  2. Hiway

    Самый простой вариант не преодолеть, а просто создать навой chrome, вместо rounded сделать например rounded2

    Ответить
  3. Hiway

    В статье, все расписано по шагам, есть ссылка на статью в которой даны основы. Если вам не понятно, то бросьте это дело — это не ваше.

    Ответить
  4. Hiway

    @zzzone: решается очень просто! Нужно просто сделать свое название для нового хрома — например, mystyle.

    Ответить
  5. Андрей

    Пробелы добавил не помогло, сейчас без пробелов
    вот картинка _http://www.save-img.com/v.php?id=ea66abfe9021a5689f1d3f98e377abd7

    Ответить
  6. Hiway

    В общем, действительно проблема в пустом теге span. Решения два. 1. Попробовать поставить в него точку и назначить fonte-size:1px и цвет, согласно фона.
    2. Прямо в спан вставить нужные картинки, но это несколько менее гибко.
    Кстати, это валидатор встроенный в FireBug, а вы попробуйте проверить обычным. Я раньше что-то не видел такой проблемы при валидации.

    Ответить
  7. Der Golem

    Artister подобным образом тени делает. А способ отличный, у меня все браузеры его прекрасно проглатывают.

    Ответить
  8. Thelearning

    Отличная статья!! )) Многое стало понятно. Но есть вопрос… Данный способ для вывода всего модуля в блок с закругленными углами, а что нужно переписать, чтобы отдельные части контента модуля так выводились. (Вообщем как сделать чтобы каждый новый пункт стандартного меню Joomla! 1.5 выводился на фоне нужной картинки, так же с закругленными углами). Заранее спасибо за ответ. =)

    Ответить

Оставить комментарий

  • (не будет показан)