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