Среди вопросов, посвященных оформлению сайтов на 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.