В Joomla есть один очень мощный инструмент стилизации, о котором многие не знают. Он называется «Суффикс CSS-класса модуля». Звучит страшно, особенно для новичков. Но понимая, как работает этот механизм, в сочетании со знанием CSS-стилей, можно отображать модули на странице так, так душе угодно. В этой статье я подробно расскажу про работу с CSS-суффиксом модулей, а также приведу пример его использования в Joomla.
Постановка цели
Прежде всего стоит упомянуть, что суффикс класса модуля одинаково может применяться как в Joomla 3, так и в более ранних версиях CMS. Мы рассмотрим пример в Joomla 2.5. В Joomla 3 и Joomla 4 всё работает точно также.
Начнем с постановки задания. Предположим, что заказчик хочет, чтобы модули в правой колонке сайта имели следующие особенности:
- Располагались не друг под другом, а со сдвигом влево и чередованием;
- Чередовались между прямыми и скругленными углами;
- Заголовки модулей, как и рамки, обрамляющие их, должны соответствовать цветам радуги.
Если представить всё это схематично, то получится что-то вроде:
На самом деле в такой задачке нет ничего особенного. С нынешними дизайнами она может казаться даже простой. Но если дать ее начинающему web-мастеру, то он как минимум впадет в ступор. Как же сделать в Joomla такое задание? Легко, если вы умеете использовать CSS-суффиксы модулей. Ниже разберем всё подробно.
Для примера я взял стандартный шаблон Joomla. Вот его пример:
Для того, чтобы получить достаточное количество модулей, пришлось добавить несколько новых. Все добавленные модули – модули html, или, проще говоря, обычные модули с текстом. После их создания и публикации сайт стал выглядеть следующим образом:
Немного о CSS-классах
Для тех, кто совсем плохо представляет себе, что такое CSS, я решил написать этот параграф. Если вы имеете представление о том, что это, смело пропускайте параграф. Для понимания данной статьи нужно представлять две вещи: что такое CSS-класс и CSS-стиль.
CSS-стиль (свойство) – минимальная единица CSS. Размер или цвет шрифта, рамка, позиционирование – всё это CSS-стили.
СSS-класс – это контейнер для стилей.
Пример:
У нас есть html-блок DIV:
<div>пример</div>
Мы хотим сделать текст в этом блоке 20 шрифтом и красным цветом. Для этого мы добавляет нашему блоку атрибут класса, например «myclass». В результате у нас получается:
<div class="myclass">пример</div>
Сейчас мы создали CSS-класс для блока. Но он пока пуст (не содержит стилей).
Теперь в любом, подключенном к шаблону CSS-файле, мы добавляем строчку:
.myclass{font-size:20pt; color: red;}
Мы внесли в класс два CSS-стиля: font-size и color.
После этого наш блок будет содержать текст красного цвета 20 шрифтом.
Вообще, если вы всерьёз планируете заниматься сайтостроением, советую купить какой-нибудь хороший учебник по HTML и CSS. Эти технологии – основа основ. Освоив их по учебнику, в дальнейшем вы сэкономите очень много времени на верстке.
Создание CSS-суффиксов для модулей
Теперь нужно немного подумать о том, чем внешний вид наших модулей отличается и чем он схож. Понятно, что отличия – разные цвета, контуры цветов и положение. А «похожесть» в том, что некоторые контуры и положения повторяются.
Суффикс класса модуля устроен таким образом, что позволяет задавать для модуля неограниченное количество классов. Изначально в нашем шаблоне все модули имеют класс moduletable.
Здесь нужно уточнить, что наличие CSS-класса moduletable зависит от используемого шаблона Joomla. Его может не быть совсем, или мы можем изменить его в коде шаблона. Но для всех этих манипуляций требуется достаточно хорошее понимание принципов работы Joomla. В это же статье мы рассматриваем стилизацию модулей с точки зрения человека, который знает только CSS).
Задавая новые названия в поле суффикса класса модуля через пробел, мы получим для модуля множество новых классов. Звучит всё это сложно и страшно. Давайте посмотрим, как оно работает на практике.
Очевидно, для того, чтобы задать каждому модулю свой цвет, у каждого должен быть уникальный CSS-класс. Но контуров и положений, в отличие от цветов, всего по два. Следовательно для них понадобится всего четыре класса (два для контуров и два для положений). Также важно то, что цвет не должен пересекаться с контуром и положением в одном классе, иначе мы получим очень неприятную зависимость цвета от контура и положения.
Что мы в итоге делаем?
1) Создаем семь классов на каждый цвет радуги:
- color1 – красный
- color2 – оранжевый
- color3 – желтый
- color4 – зеленый
- color5 – голубой
- color6 – синий
- color7 – фиолетовый
2) Создаем два класса на каждый из контуров:
- squareblock – квадратный контур
- roundblock – контур со скругленными углами
3) Создаем два класса на каждое положение:
- normalpos – модуль в центре
- leftpos – модуль, сдвинутый влево
Если точно следовать исходному заданию, второй и третий пункты мы могли объединить, т.е. создать не четыре, а только два класса. При этом результат получился бы такой же, как и на картинке, но мы уже не смогли бы простым изменением суффикса получить, например, квадратный блок, сдвинутый влево. Поэтому, для максимальной гибкости наших модулей, мы разделим контур и сдвиг по разным классам.
Теперь необходимо определиться с тем, какому модулю какие суффиксы будут присвоены. Это легко. Просто смотрим модули по картинке сверху вниз:
- модуль1 – color1 squareblock normalpos
- модуль2 – color2 roundblock leftpos
- модуль3 – color3 squareblock normalpos
- модуль4 – color4 roundblock leftpos
- модуль5 – color5 squareblock normalpos
- модуль6 – color6 roundblock leftpos
- модуль7 – color7 squareblock normalpos
Вот и всё. Подготовительный этап завершен. Остается только задать CSS-суффиксы нашим модулям. Перед суффиксом обязательно должен стоять пробел, иначе он приклеется к базовому классу, т.е. будет выглядеть, как «moduletablecolor1 squareblock normalpos».
На рисунке показано, как задается суффикс для модуля1:
После того, как все суффиксы заданы, можно переходить к формированию CSS-стилей. С помощью веб-инспектора браузера подбираем необходимые стили:
/* Задаем цвета рамок */
.moduletable.color1 {border-color:#D2232A;} /* Задаем красный цвет */ .moduletable.color2 {border-color:#F7941E;} /* Задаем оранжевый цвет */ .moduletable.color3 {border-color:#FFDE00;} /* Задаем желтый цвет */ .moduletable.color4 {border-color:#40AE49;} /* Задаем зеленый цвет */ .moduletable.color5 {border-color:#00B2EB;} /* Задаем голубой цвет */ .moduletable.color6 {border-color:#23408F;} /* Задаем синий цвет */ .moduletable.color7 {border-color:#624099;} /* Задаем фиолетовый цвет */ /* Задаем цвета заголовков */ .moduletable.color1 h3 span{color:#D2232A;} /* Задаем красный цвет */ .moduletable.color2 h3 span{color:#F7941E;} /* Задаем оранжевый цвет */ .moduletable.color3 h3 span{color:#FFDE00;} /* Задаем желтый цвет */ .moduletable.color4 h3 span{color:#40AE49;} /* Задаем зеленый цвет */ .moduletable.color5 h3 span{color:#00B2EB;} /* Задаем голубой цвет */ .moduletable.color6 h3 span{color:#23408F;} /* Задаем синий цвет */ .moduletable.color7 h3 span{color:#624099;} /* Задаем фиолетовый цвет */ /* Задаем формы рамок */ .moduletable.squareblock{border: 2px solid;} /* квадратная рамка */ .moduletable.roundblock{border: 2px solid; border-radius: 10px 10px 10px 10px;} /* скругленная рамка */ /* Задаем положение рамок */
.moduletable.normalpos{} /* нормальное положение не требует дополнительных стилей */ .moduletable.leftpos{position: relative; right: 13%;} /* сдвигаем модуль немного влево. */
После этого любуемся результатом:
В заключении хочу сказать, что Joomla имеет хорошую гибкость в оформлении. Имея навыки работы с HTML и CSS, а также понимая структуру Joomla, можно создавать для нее очень красивые разнообразные шаблоны.
Виталий, ты, наверное, имел ввиду "сдвигаем модуль немного влево"
Интересуюсь разработкой сайтов.
Могли бы порекомендовать хорошие на Ваш взгляд учебники по html и CSS?!
Заранее спасибо!
А зачем нужен пример? Если он не упоминается в суффиксе.
Я уже неделю бьюсь, чтобы изменить модуль, результат пока равен нулю...
Я имел ввиду "пример"
---div class="myclass">пример
Кстати, я подписался получать по емайл ответы от вас, но это не работает - емайла не было.
Могу я попросить вас помочь мне? Я уже дня 4 мучаюсь с модулем, не могу ему поменять класс... а очень нужно, не могу понять где его менять!
Как я понимаю, в частном порядке - это платно?
.moduletable.modJoomulus_1 {
text-align: center;
color: #999999;
}
Результата нет, подскажите что не правильно !?
http://juron.net/info.html
.moduletable.modJoomulus1
В cSS пишешь эту строчку
div.moduletable_qwer {здесь правила}
Где _qwer и есть твой суффикс (который ты задаешь в модуле).... Только пробел снизу поставь и в CSS и в Юмле. Почему- то только так робит сцуко....
Сергей11, выше пост читайте. Создаете такой класс, и в модуле потом прописываете суффикс, суффикс из примера выше будет: _qwer
в поле суффикса в настройках модуля я поставила:
В чём ошибка?
итак , вопрос:
в поле суффикса в настройках модуля я поставила:
Wedal , в чём ошибка?
ничего, что я тут у вас сама с собой разговариваю?
"После того, как все суффиксы заданы, можно переходить к формированию CSS-стилей. С помощью Firebug подбираем необходимые стили:"
это в каком окне мы должны открыть firebug? на самом сайте выделив модуль или при написании суффикса модуля в панели управления сайта?
где запустить firebug на какой странице? на той на которой мы пишем суффиксы классов модулей или где?
Задаю суффикс, ну скажем [пробел]suff. В style.css пишу:
.module.suff {border:1px solid red;} - ничего не происходит, вместо точки ставил и нижнее подчеркивание и тире, ничего не помогает. А потом модуль целиком перестал отображаться, правда только в Мозилле. Если на модуль смотреть с помощью firebug, то он название модуля выводи как class="module m suff". Соответственно если и это название прописать в css, то также ничего не происходит.
.suff{}
1) читаем статью
2) внимательно читаем статью
3) очень внимательно читаем статью
Если всё равно ничего не понятно значит вы совершенно не знаете html и css. Без этих знаний статья действительно не имеет смысла. Но проблема в том, что в этом случае нет такой статьи, которая поможет вам изменить стиль у модуля. Только учебники.
Подскажите,pls: хочу вывести в правой колонке два модуля один под другим. Верхний модуль выводиться, а нижний нет. Притом, что позиция(в моем случае:sm_bottomright)есть в выборе. пробовала выводить разные модули в эту позицию - не выводиться. В чем загвоздка?
Мой код:
div style="float:left;
width:360px;"
div style="width:100%; padding:20px;"
jdoc:include type="modules" name="sm_topright" style="xhtml"
/div
div style="width:100%; padding:20px;"
jdoc:include type="modules" name="sm_bottomright" style="xhtml"
/div
/div
Давайте решим этот вопрос раз и навсегда.
Прописываете в окошке настройках модуля класс, например _terra
Далее жмете кнопку сохранить.
Обновляете страничку своего сайта. Затем жмете ctrl+u (исходный код страницы).
Затем жмете ctrl+f (поиск в коде). Вводите туда суффикс класс прописанный ранее в настройках модуля, и увидите код примерно такой
О насЦели и задачи
Ладно давайте так:
Железобетонно!!!
Давайте решим этот вопрос раз и навсегда.
Прописываете в окошке настройках модуля класс, например _terra
Далее жмете кнопку сохранить.
Обновляете страничку своего сайта. Затем жмете ctrl+u (исходный код страницы).
Затем жмете ctrl+f (поиск в коде). Вводите туда суффикс класс прописанный ранее в настройках модуля, и увидите код примерно такой
div class= "custom_terra"
-p- О нас -br- Цели и задачи -br-
Как видите юмла добавила свой коммент перед вашим суффиксом.... Вот здесь все и спотыкаются-)!!!!
Далее открываете ваш основной файл css (используйте firebug он покажет Вам путь к данному файлу)
И в этом файле (в любом месте) ставите точку (указать что это класс а не стиль)и пишите custom_terra должно получиться так:
.custom_terra {здесь правила}
И все вопрос можно снять раз и навсегда!
Не спрашивайте почему юмла добавляет коммент - этот вопрос к разработчикам или к крутым мегапрогерам.
Надо еще посмотреть как он будет выглядеть через исходный код.
Что бы добраться до истины сам мучался долго догадками...
Знаете, ведь можно еще прописать класс как " terra", а не "_terra", тогда получится класс "custom terra" и CSS будет обрабатывать как .custom , так и .terra .
Соединение основного класса модуля и суффикса сделано специально, чтобы вы сами решали использовать ".custom_terra" или .custom и .terra .
Все-таки после простановки суффикс класса просто необходимо заглянуть в исходный код.
Видите, наши мнения разошлись по факту.
Следовательно выражение "А еще "СТУДИО" какое-то..." тут совсем не уместно.
Почти... Я пробовал делать на модуле "Популярные статьи". У меня берется в рамку сам модуль и все пункты по отдельности! На 5 строчек модуля у меня 8 рамок :)
Помогите разобраться.
Спасибо!
У меня вопрос к знающим:
Может предложу альтернативу - а может знак плохого тона...
я делаю так - создаю например mycss.css и в нем правлю именно правлю любой класс на странице будь то .moduletable или body.
например чтобы присвоить класс конкретному модулю к нему можно обратиться по ID.
самое главное объявить этот файл нужно в index.php шаблона в конце всех объявленных css. Почему в конце - потому что походу браузер приоритет ставит последней объявленной css. И если находит одинаковый класс то работает тот который в маем css прописан.
Плюс - нет привязки по конкретному модулю(удалил модуль через два года понадобился - вспоминай какой суффикс использовал как его писал - где хранил класс)
- все мои изменения в одном файле css.
Мне кажется единственный случай использования суффикса это когда элементы модуля вообще не имеют объявленных классов...
Собственно вопрос: так можно работать, с точки зрения создания сайтов и т.д.?
#sidebar-a div + div {...}
С таким стилем можно будет применить стиль только ко второму и последующим блокам в сайдбаре. Конечно, это далеко не идеальный вариант, т.к. если блоки изменят положения то всё слетит. Хотя возможно будет нужно именно такое поведение, например для чёткого оформления независимо от порядка модулей.
Сам я такой приём использую обычно в других местах, для модуля лучше суффикс всё таки.
у меня не работает главная страница: mebel-interio.com
но открывается через: mebel-interio.com/index.php
сайт создан на Joomla 2.5
в чем проблема я не понял.
до этого ковырялся в админке в top menu и main menu. переделывал там категории
Подскажите, а где можно посмотреть готовые Суффиксы используемого шаблона?
Буду чаще заходить.
Вы можете переопределить макет вашего модуля в шаблон Joomla и добавить CSS-класс в него. Другой вариант - создать под такой модуль отдельную позицию в шаблоне, чтобы можно было цепляться к нему через CSS. Еще один вариант - псевдоклассы CSS :first-child и :last-child. Но все это, конечно, костыли. Суффикс должен быть.
Скорее всего у вас первый вариант. Решение только одно - править CSS-файл шаблона.
1) Переопределить макет модуля в шаблон Joomla и внести нужный CSS-класс прямо в html-разметку.
2) Написать CSS-код для модуля самостоятельно, с учетом его текущей разметки
.mod_djclassifieds_items div.title a.title {
display: block;
text-align: center;
border: 1px solid #f00;
font-size: 20px;
color: #00aaff;
line-height: 1.1;
padding-bottom: 5px;
} Тут нужно убрать border: 1px solid #f00;
.shadow {
display: block;
text-align: center;
убрал стиль
font-size: 20px;
color: #00aaff;
line-height: 1.1;
padding-bottom: 5px;
}
И всё равно не выходит так как задумал. Сайт http://vovkas6l.beget.tech На главной странице VIP вверху и VIP в подкатегориях с право. Что для этого еще нунжо прописать и где что бы всё получилось как задумал? Сильно не пинайте и не посылайте что бы читал,смотрел. Всё это дело и читал и смотрел всё равно не могу понять! Всем спасибо!!!
В вашем примере, вы должны не удалять стиль, а написать: border: none;
Если после этого рамка не исчезнет, значит она применяется к другому блоку. Чтобы проще определить к какому именно, используйте веб-инспектор (вызывается клавишей F12 в браузере). О том, как им пользоваться, можно почитать здесь: https://wedal.ru/internet/rukovodstvo-po-firebug.html
Всем привет. Я не хочу полностью убирать border: 1px solid #f00;, а только на главной странице. У меня есть два одинаковых модуля на главной странице вверху http://vovkas6l.beget.tech.html и на странице категории http://vovkas6l.beget.tech/transport.html и мне нужно убрать только на главной странице. Но не могу понять куда прописать и как суффикс-CSS класса модуля что бы сделать одинаковые модули разными! И если я прописываю border: none; то и там у меня убирается и там там!
Если у вас два модуля, то только для одного из них вы должны задать CSS-суффикс и через него убрать рамки.
Если у вас один модуль, то вам проще задать уникальный CSS-класс для главной страницы сайта (это можно сделать в настройках пункта меню главной страницы) и через него обратиться к модулю (т.к. он будет только на главной, правило отмены рамок также будет применяться только на ней).
Если рамка исчезает у обоих модулей, значит или ваш суффикс совпадает с каким-то CSS-классом, которые уже есть в коде модуля, либо вы прописали суффикс для обоих модулей. Других вариантов нет.
Всем добрый вечер. Если одному модулю прописать CSS-суффикс, то меняется всё что захочешь в самом модуле, а вот рамка вокруг картинок не исчезает! На первом скрине видно что меняется только сам модуль, но не его внутренности. А вот на втором скрине видно где находится у меня BORDER вокруг картинок. Вот я и не могу понять что прописать что бы убрать у одного только модуля рамку именно вокруг картинок.
Скажите, пожалуйста, как сделать так, чтоб модуль появлялся при разрешении 1920 на 1080 и исчезал при любых других разрешениях экрана?
Заранее спасибо большое?
Всё это делается с помощью CSS и так называемых медиа-запросов. Вы создаете в файле CSS такой запрос и в нем прописываете display:none для класса модуля, созданного с помощью суффикса, вот и всё. Только следует учесть, что потом, для других разрешений, модуль нужно снова проявить через display:block, например.
Также существует 2 подхода для медиа-запросов:
1) Mobile first strategy
2) Non-mobile first strategy
Разница там только в том, как создаются базовые медиа-запросы и в какую сторону переопределяются, т.е. просто идем мы от маленьких разрешений к большим или наоборот.
В целом, всё написал. Погуглите примеры медиа-запросов и этих стратегий. Дальше ваша задача решится очень легко.