Верстка для веб сайта : HTML5 + CSS3

Создание шаблона BITRIX, OpenCart, HostCMS

Как сделать рамку для модуля?

Очень часто, просмотрев огромное количество шаблонов на демо-сайтах производителей шаблонов, возникает желание сделать на своем сайте что-нибудь похожее из увиденного. Самый распространенный вопрос - как сделать такую же рамку 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++. Ни в коем случае не пользуйтесь обычным встроенным блокнотом!