Очень часто, просмотрев огромное количество шаблонов на демо-сайтах производителей шаблонов, возникает желание сделать на своем сайте что-нибудь похожее из увиденного. Самый распространенный вопрос — как сделать такую же рамку css для модуля? И желательно без использования картинок? Предлагаю вам прочитать полезный совет верстальщику и попробовать его в своем шаблоне. Это займет не более 10 минут!
Нет ничего проще! Само сложное — найти класс стиля, который назначен на нужный вам модуль, это зависит от применяемого шаблона. Поэтому будем отталкиваться от наиболее часто применяемого класса для модуля — .module или как вариант .module-inner, иногда в шаблоне применяются оба класса, тогда используем .module. Открываем папку шаблона и находим файл стилей template.css.
Как вы помните, чуть выше я написал, что это самый сложный этап в рисовании рамки для модуля. Почему? Потому что дальнейшие действия — это вставка подготовленного кода в ваш файл стилей, чаще всего это файл template.css и он находится в папке css шаблона джумла.
А вот и сам код))):
background: none repeat scroll 0 0 white; border: 1px solid #C7CDD1; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 3px #939FA7; padding: 9px;
Что делать с этим кодом? Находим в файле template.css нужный нам класс .module и добавляем вышеприведенный код к тем стилям, которые уже присутствуют, стили заключаются в такие кавычки {…Здесь ваш код…}
Т.е. если первоначально было так (код приведен примерный, у вас может быть и другой):
.module {margin-botom: 10px; color: #333333;}
то теперь должно получиться так:
.module {margin-botom: 10px; color: #333333; background: none repeat scroll 0 0 white; border: 1px solid #C7CDD1; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 3px #939FA7; padding: 9px;}
Сохраняем файл и закачиваем его в папку своего шаблона! Не забудьте, что редактировать файлы шаблона лучше всего такой программой, как Notepad++. Ни в коем случае не пользуйтесь обычным встроенным блокнотом!