Использование расширений Joomla для вывода контента. Урок 7

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

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

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

Изначально при разработке блоковой схемы шаблона я предполагала, что в блоке «user3» будет выводиться именно этот модуль. Но, как выяснилось, что для Joomla 3.0 пока нет стабильно работающей версии этого расширения, поэтому я расскажу, как разнообразить веб-страницы с помощью News Show Pro GK4 для сайтов, работающих на Joomla 2.5.

Скриншот шаблона 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;}

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

Заголовок модуля выводится в тегах 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

 

Комментарии 

 
# Lidia 19.09.2013 14:52
Скачала модуль News Show Pro GK4, но он не работает.
Написано: Ошибка: Нет статей для показа
Кстати, я не использую компонент K2.
Этот модуль работает только с этим компонентом или что? Ничего не пойму.
Ответить | Ответить с цитатой | Цитировать
 
 
# Administrator 26.09.2013 18:44
Этот модуль работает сам по себе. Вы в настройке модуля укажите какие статьи показывать будете.
Ответить | Ответить с цитатой | Цитировать
 
 
# Котярость 30.10.2013 17:07
Большое спасибо за подсказку в статье о том, где поменять CSS-свойства для вывода текста и заголовков в модуле. Отличный модуль, всё работает! Автору удачи! :-)
Ответить | Ответить с цитатой | Цитировать
 
 
# Наталья 13.02.2015 16:01
Скажите пожалуйста, не понимаю, а где располагаются сами статьи, которые выводит плагин. Нужен отдельный пункт меню, Например, "Новости" на главной странице?
Ответить | Ответить с цитатой | Цитировать
 
Главная Как сделать шаблон с нуля для Joomla 2.5 и Joomla 3.0 Использование расширений Joomla для вывода контента. Урок 7