Этот урок будет продолжением темы каскадных таблиц стилей CSS. Я хочу рассказать вам, как можно разнообразить вывод контента на сайте с помощью расширений для CMS Joomla.

У меня есть любимый модуль представления контента News Show Pro GK4. Огромное количество настроек и вариантов форматирования текста и изображений, дает возможность сделать страницы сайта необычными и привлекательными.

News Show Pro GK4 полностью русифицирован, поэтому у вас не будет сложностей в изучении возможностей и настроек этого модуля. В свою очередь, хочу показать вам, как можно разукрасить его при помощи каскадных таблиц стилей CSS.

Скриншот шаблона Trip с выводом в позиции «user3» модуля News Show Pro GK4

При создании модуля News Show Pro GK4 я определила суффикс класса модуля _gk4

Фотошопе сделала вот такую картинку фона модуля шириной 950 px.

 Потом вырезала по горизонтали тоненькую полоску 950х2 px и сохранила ее в файле user3_bg.png, который поместила в папку images нашего шаблона.

Далее в файле template.css написала следующий код:

Оформление модуля

.moduletable_gk4{

font:12px Arial, Helvetica, sans-serif ;

color:#000;

font-style:italic;

background:url('../images/user3_bg.png') repeat-y;}

Заголовок модуля выводится в тегах H3, а заголовки статей в тегах H4. В моем случае заголовок модуля отключен, поэтому в таблицах стилей я задаю только оформление заголовка статей H4.

.moduletable_gk4 h4{

padding: 2px 0px;

font:bold 14px Arial, Helvetica, sans-serif;

color:#000;

font-style:italic;}

Заголовок, как ссылка.

.moduletable_gk4 h4 a{

padding: 2px 0px;

font:bold 14px Arial, Helvetica, sans-serif;

color:#000;

font-style:italic;}

Оформление ссылок «Далее»

.moduletable_gk4 a{

font-size:12px;

color:#000;

padding:5px;

text-decoration:underline;}

Ссылка при наведении.

.moduletable_gk4 a:hover {

color:#fe1919;

text-decoration:none;}

В графическом файле фона модуля нарисовано три разных блока, поэтому необходимо настроить вывод статей в стандартном режиме, в три колонки и в одну линию.

Внимательно изучите настройки, кроме стандартного режима с горизонтальным выводом статей, модуль работает еще в шести режимах:

• Вертикальный скроллер;
• Новостной слайд-Шоу;
• Новости аккордеон;
• Новости галерея;
• Отзывчивая новостная галерея;
• Speakers

Итак, работа с таблицами стилей шаблона TRIP закончена. На следующем уроке мы займемся созданием файлов template_thumbnail.png, template_preview.png и favicon.ico.

Скачать установочный пакет шаблона TRIP

Скачать модуль News Show Pro GK4