Joomla! 1.5 внесла качественно отличается от Joomla! 1.0 и это факт. Но, к сожалению, в новой версии остались некоторые рудиментарные явления, которые стоит усовершенствовать. Например, модель для вывода блоков с закругленными углами.
По умолчанию, если вы выберите для своего модуля позицию «rounded» то Joomla! автоматически сгенерирует вам следующую модель:
<div class="module"> <div> <div> <div> Content </div> </div> </div> </div> |
Но данная модель, хотя и является наиболее простым и распространенным способом создания блоков с закругленными краями, не является оптимальным решением. Поэтому, я решил немного усовершенствовать модель для вывода скроенных углов в Joomla!
Для начала необходимо было выбрать способ, для того чтобы создать более-менее универсальную модель вывода контейнера с закругленными краями. Сразу скажу, что способов создания подобных моделей довольно много, и изучив многие вариант, я остановился на способе при котором единственны минусом, от которого избавиться не удалось, является наличие шести элементов разметки вместо четырех в простом способе. Но при этом есть и плюсы:
- Используется одно маленькое изображение вместо четырех (минус три запроса, значительно меньший размер файла)
- Можно использовать как форму, так и контр-форму (например, с помощью одного и того же небольшого графического элемента вы можете варьировать как закругленными, так и вдавленными уголками, или использовать различные элементы цвета.)
- Не используется наследование при создании стилей, что не требует очистки свойств вложенных элементов.
Итак, приступаем к созданию нашей разметки. Для начала создадим единственный графический элемент, который на понадобится для создания уголков. Размеры форма элемента зависят от необходимых вам размеров закругленных углов. Например, если вам нужны углы с радиусом в 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, а для тех, кто хочет быстро и «чтобы работало» рассказываю.
- Идете в папку системных шаблонов Joomla! 1.5 и находите там файлик module.php — путь-> templates/system/html/module.php.
- Копируете module.php и вставляете его в папку /html вашего шаблона. Если такой папки нет, то создайте ее. Путь к файлу в вашем шаблоне ->/templates/ваш_шаблон/html/modules.php
- Далее в этом файле удаляем все стили 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 } ?>
- А потом вставляем в файл нашу разметку и в нужных местах вставляем функции вывода заголовка и контента модуля.
В конечно счете содержание вашего файла 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”
полезная заметка
Не получается переопределить функцию вывода модулей, пишет:
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.
Но мы не сдаемся — бум кивирять 🙂
Самый простой вариант не преодолеть, а просто создать навой chrome, вместо rounded сделать например rounded2
этим вот и занимаемся 🙂
не понятно 🙁 не чего… дайте объяснения
В статье, все расписано по шагам, есть ссылка на статью в которой даны основы. Если вам не понятно, то бросьте это дело — это не ваше.
О интресный вариант, надо использовать :=)
та же проблема что и у антона, как то решаемо?
@zzzone: решается очень просто! Нужно просто сделать свое название для нового хрома — например, mystyle.
Hiway, не подскажете в чем проблема? Валидатор ругается на
span class=»tl»></span
Ругается возможно на пустой элемент, попробуйте добавить
. А лучше покажите текст сообщения валидатора.
пробел добавить 🙂
Пробелы добавил не помогло, сейчас без пробелов
вот картинка _http://www.save-img.com/v.php?id=ea66abfe9021a5689f1d3f98e377abd7
В общем, действительно проблема в пустом теге span. Решения два. 1. Попробовать поставить в него точку и назначить fonte-size:1px и цвет, согласно фона.
2. Прямо в спан вставить нужные картинки, но это несколько менее гибко.
Кстати, это валидатор встроенный в FireBug, а вы попробуйте проверить обычным. Я раньше что-то не видел такой проблемы при валидации.
Artister подобным образом тени делает. А способ отличный, у меня все браузеры его прекрасно проглатывают.
Большое спасибо. Продолжаю открывать для себя возможности joomla 1.5 и никак не нарадуюсь.
Отличная статья!! )) Многое стало понятно. Но есть вопрос… Данный способ для вывода всего модуля в блок с закругленными углами, а что нужно переписать, чтобы отдельные части контента модуля так выводились. (Вообщем как сделать чтобы каждый новый пункт стандартного меню Joomla! 1.5 выводился на фоне нужной картинки, так же с закругленными углами). Заранее спасибо за ответ. =)