Настройка оформления модулей

Среди вопросов, посвященных оформлению сайтов на Joomla, часто встречается такие: «как изменить оформление у конкретных модулей?» и «как изменить цвет заголовков определенных модулей?». В этой статье мы расскажем вам, как правильно использовать альтернативное оформление модулей.

Как правило, все модули берут общее оформление из класса table.moduletable, оформление заголовка модуля — соответственно из класса table.moduletable th и оформление «тела» модуля — из класса table.moduletable td. Также может существовать еще класс table.moduletable ul, который заведует оформлением списков в модулях.

Шаг 1. Создаем альтернативные стили оформления

1. В файле css шаблона, в котором вы хотите применить альтернативное оформление модулей, находим все, что начинается с table.moduletable и копируем:

   table.moduletable {
   width: 100%;
   margin-bottom: 10px;
   border-bottom: 1px solid #FFFFFF;
   }
    
   table.moduletable th {
   height: 20px;
   vertical-align: middle;
   background-color: #BB0000;
   border-bottom: 2px solid #FFFFFF;
   }
    
   table.moduletable td {
   background-color: #5F68A0;
   }

2. Добавляем в скопированные классы суффикс (например -alt).
   
   Важно: суффикс может быть любым, главное, чтоб он был прописан латинскими буквами через дефис или подчеркивание (дефис или подчеркивание нужны для того, чтоб вы сами не путались).

   table.moduletable-alt {
   width: 100%;
   margin-bottom: 10px;
   }
    
   table.moduletable-alt th {
   height: 20px;
   vertical-align: middle;
   background-color: #BB0000;
   border-bottom: 2px solid #FFFFFF;
   }
    
   table.moduletable-alt td {
   background-color: #DEDEDE;
   }

В классе с суффиксом -alt мы убрали нижний бордюр и заменили цвет бэкграунда в оформлениии «тела» модуля. Теперь у нас имеются как бы два разных CSS-класса, отвечающих за оформление модулей, но реально Joomla пока еще выглядит по-старому, как будто бы мы ничего не добавляли.

Шаг 2. Назначаем альтернативное оформление модулю

Теперь мы должны разобраться, как сделать так, чтобы некоторые модули оформлялись при помощи созданного нами альтернативного класса.

1. Авторизуемся в административной панели Джумла
2. Выбираем пункт меню Модули->Модули сайта (Modules->Site modules)
3. Выбираем в списке модуль, к которому мы хотим применить альтернативное оформление и нажимаем кнопку «Изменить» (Edit)
4. В качестве значения параметра Суффикс класса CSS (Module Class Suffix) указываем -alt (именно так, начиная с дефиса или подчеркивания - в зависимости от того, что вы использовали в css)
5. Нажимаем кнопку «Сохранить»

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