Среди вопросов, посвященных оформлению сайтов на Joomla, часто встречается такие: «как изменить оформление у конкретных модулей?» и «как изменить цвет заголовков определенных модулей?». В этой статье мы расскажем вам, как правильно использовать альтернативное оформление модулей.
Как правило, все модули берут общее оформление из класса table.moduletable, оформление заголовка модуля — соответственно из класса table.moduletable th и оформление «тела» модуля — из класса table.moduletable td. Также может существовать еще класс table.moduletable ul, который заведует оформлением списков в модулях.
Шаг 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;
} - Добавляем в скопированные классы суффикс (например -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. Назначаем альтернативное оформление модулю
Теперь мы должны разобраться, как сделать так, чтобы некоторые модули оформлялись при помощи созданного нами альтернативного класса.
- Авторизуемся в административной панели Джумла
- Выбираем пункт меню Модули->Модули сайта (Modules->Site modules)
- Выбираем в списке модуль, к которому мы хотим применить альтернативное оформление и нажимаем кнопку «Изменить» (Edit)
- В качестве значения параметра Суффикс класса CSS (Module Class Suffix) указываем -alt (именно так, начиная с дефиса или подчеркивания - в зависимости от того, что вы использовали в css)
- Нажимаем кнопку «Сохранить»
В заключение хочется отметить, что количество альтернативных стилей может быть неограниченным. Главное, не запутайтесь в суффиксах и собственном css.