Оформление модулей с помощью CSS в CMS Joomla

Здравствуйте дорогие друзья и любители Joomla. Работая с модулями в панели администрирования вашего сайта, вы скорее всего замечали поле Суффикс Класса Модуля в разделе Дополнительные Параметры. Это одно из тех полей, которые люди часто игнорируют, поскольку понятия не имеют, для чего они нужны. И это очень досадно, ведь его использование способно сильно облегчить вам кастомизацию своего сайта.

Чтобы указать собственный стиль, вам нужно прописать его в CSS файле текущего шаблона, а затем внести ссылку на него в поле Суффикс Класса Модуля. Для этого вам понадобится знание CSS. К счастью, изучение этой технологии не займёт много времени. Вполне достаточно будет знания основных стилей CSS ,а так же того, как и куда вставлять новый код.

Оформляем модули в CMS Joomla при помощи css стилей

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

Прежде чем показать пример использованного мною кода, хочу обратить ваше внимание на две вещи. Во-первых, если вы не знаете CSS и понятия не имеете с чего начать его изучение, введите в поисковик запрос «Учебник CSS» и вы получите огромное количество результатов, любого из которых достаточно для нашей задачи (лично я иногда пользуюсь сайтом htmlbook.ru). Во-вторых, я хочу, чтобы вы освоились с использованием расширений Firefox. В частности, Firebug, способный сэкономить разработчику немало времени. Опять же, в сети достаточно информации, касающейся его применения.

В этой демонстрации мы внесём лишь небольшие изменения. Мы добавим тонкую границу вокруг модуля, изменим цвет фона и настроим цвет ссылок. Открывающиеся перед вами возможности стилизации модулей практически безграничны. Очень легко увлечься и начать изменять стили без всякой на то причины. Старайтесь фокусироваться на текущей задаче, например, привлечении внимания посетителей к форме авторизации.

В конец нашего главного CSS файла я добавлю следующие строки:

.moduletable_custom1 { padding: 8px; border: 1px solid #2e2e2e; }

.moduletable_custom1 { background-color: #BBBFB8; }

.moduletable_custom1 a { color: #2e2e2e; text-shadow: 1px 1px 0 #fff }

Как вы могли заметить, я взял «.moduletable» и просто добавил к нему «_custom1». Таким образом, я получил стиль модуля под названием «_custom1», который можно использовать в панели администрирования Joomla для стилизации модулей.

Теперь, когда я обновлю страницу сайта, то увижу следующее:

Это не самый красивый дизайн, но мы использовали всего три простых строки CSS кода, чтобы продемонстрировать вам потенциал этой технологии.

Зачем вообще тратить время и силы на стилизацию модулей? Самая очевидная причина в том, чтобы улучшить дизайн сайта. Однако, вы можете использовать различные стили для определённых целей, например, привлечения внимания посетителей к элементам сайта, призывающим его совершить какие-то действия. Мы всегда думаем в контексте того, как форма (включая дизайн) согласовывается с содержанием. Вы можете потратить кучу времени, разрабатывая стиль модуля с «идеальными» цветами, границами и тенями. Но если это не приведёт к выполнению определённых целей, таких как увеличение конверсии или количества просмотров страниц, лучше займитесь чем-нибудь более полезным.

На этом пост Оформление модулей с помощью CSS в CMS Joomla я завершаю. Желаю вам оформить ваш сайт так, чтобы конкуренты завидовали. Увидимся.

Joomla Блог Nauca – научись работать с Joomla

Хочешь получать на e-mail свежие статьи о компонентах, модулях, плагинах и других полезных вещах связанных с Joomla? Не пропусти ничего полезного, подпишись на новости блога Nauca: