
В 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
Разница там только в том, как создаются базовые медиа-запросы и в какую сторону переопределяются, т.е. просто идем мы от маленьких разрешений к большим или наоборот.
В целом, всё написал. Погуглите примеры медиа-запросов и этих стратегий. Дальше ваша задача решится очень легко.