В этой статье я подробно расскажу про работу с CSS-суффиксом модулей, а также приведу пример его использования в Joomla.
Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.

В Joomla есть один очень мощный инструмент стилизации, о котором многие не знают. Он называется «Суффикс CSS-класса модуля». Звучит страшно, особенно для новичков. Но понимая, как работает этот механизм, в сочетании со знанием CSS-стилей, можно отображать модули на странице так, так душе угодно. В этой статье я подробно расскажу про работу с CSS-суффиксом модулей, а также приведу пример его использования в Joomla.

Прежде всего стоит упомянуть, что суффикс класса модуля одинаково может применяться как в Joomla 3, так и в более ранних версиях CMS. Мы рассмотрим пример в Joomla 2.5. В Joomla 3 и Joomla 4 всё работает точно также.

Начнем с постановки задания. Предположим, что заказчик хочет, чтобы модули в правой колонке сайта имели следующие особенности:

  1. Располагались не друг под другом, а со сдвигом влево и чередованием;
  2. Чередовались между прямыми и скругленными углами;
  3. Заголовки модулей, как и рамки, обрамляющие их, должны соответствовать цветам радуги.

Если представить всё это схематично, то получится что-то вроде:

Module Class SuffixНа самом деле в такой задачке нет ничего особенного. С нынешними дизайнами она может казаться даже простой. Но если дать ее начинающему web-мастеру, то он как минимум впадет в ступор. Как же  сделать в Joomla такое задание? Легко, если вы умеете использовать CSS-суффиксы модулей. Ниже разберем всё подробно.

Для примера я взял стандартный шаблон Joomla. Вот его пример:

Module Class Suffix

Для того, чтобы получить достаточное количество модулей, пришлось добавить несколько новых. Все добавленные модули – модули html, или, проще говоря, обычные модули с текстом. После их создания и публикации сайт стал выглядеть следующим образом:

Module Class Suffix

Немного о 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 – модуль, сдвинутый влево

Если точно следовать исходному заданию, второй и третий пункты мы могли объединить, т.е. создать не четыре, а только два класса. При этом результат получился бы такой же, как и на картинке, но мы уже не смогли бы простым изменением суффикса получить, например, квадратный блок, сдвинутый влево. Поэтому, для максимальной гибкости наших модулей, мы разделим контур и сдвиг по разным классам.

Теперь необходимо определиться с тем, какому модулю какие суффиксы будут присвоены. Это легко. Просто смотрим модули по картинке сверху вниз:

  • модуль1color1 squareblock normalpos
  • модуль2color2 roundblock leftpos
  • модуль3color3 squareblock normalpos
  • модуль4color4 roundblock leftpos
  • модуль5color5 squareblock normalpos
  • модуль6color6 roundblock leftpos
  • модуль7color7 squareblock normalpos

Вот и всё. Подготовительный этап завершен. Остается только задать CSS-суффиксы нашим модулям. Перед суффиксом обязательно должен стоять пробел, иначе он приклеется к базовому классу, т.е. будет выглядеть, как «moduletablecolor1 squareblock normalpos».

На рисунке показано, как задается суффикс для модуля1:

Module Class Suffix

После того, как все суффиксы заданы, можно переходить к формированию 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%;} /* сдвигаем модуль немного влево. */

После этого любуемся результатом:

Module Class Suffix

В заключении хочу сказать, что Joomla имеет хорошую гибкость в оформлении. Имея навыки работы с HTML и CSS, а также понимая структуру Joomla, можно создавать для нее очень красивые разнообразные шаблоны.

Об авторе
Об авторе
Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.

Другие статьи серии

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Комментарии  

0 # Andrei 24.08.2011 11:36
Отличная статья, не знал что так тоже можно использовать суфиксы. Спасибо автору.
Ответить | Ответить с цитатой | Цитировать
0 # VARion 25.08.2011 11:47
Статья хорошая. Уже давно использую суффиксы у модулей: без них вообще не знаю как можно работать :-)
Цитата:
.moduletable.leftpos{position: relative; right: 13%;} /* сдвигаем модуль немного вправо. */
Виталий, ты, наверное, имел ввиду "сдвигаем модуль немного влево"
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 26.08.2011 04:09
VARion, да, конечно влево. Спасибо! Поправил.
Ответить | Ответить с цитатой | Цитировать
0 # Иван 26.08.2011 15:18
Wedal,
Интересуюсь разработкой сайтов.
Могли бы порекомендовать хорошие на Ваш взгляд учебники по html и CSS?!
Заранее спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # Антон 15.09.2011 16:59
Шикарная статья. Автору большое спасибо, теперь благодаря вам я узнал как разнообразить внешний вид модулей на сайте.
Ответить | Ответить с цитатой | Цитировать
-2 # Вадим 21.10.2011 01:20
Обьясните идиоту :-)
А зачем нужен пример? Если он не упоминается в суффиксе.
Я уже неделю бьюсь, чтобы изменить модуль, результат пока равен нулю...
Ответить | Ответить с цитатой | Цитировать
-3 # Вадим 21.10.2011 01:22
Цитирую Вадим:
Обьясните идиоту :-)
А зачем нужен пример? Если он не упоминается в суффиксе.
Я уже неделю бьюсь, чтобы изменить модуль, результат пока равен нулю...

Я имел ввиду "пример"
Ответить | Ответить с цитатой | Цитировать
-1 # Вадим 21.10.2011 01:23
Цитирую Вадим:
Цитирую Вадим:
Обьясните идиоту :-)
А зачем нужен пример? Если он не упоминается в суффиксе.
Я уже неделю бьюсь, чтобы изменить модуль, результат пока равен нулю...

Я имел ввиду "пример"

---div class="myclass">пример
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 21.10.2011 04:52
Вадим, пример нужен только для того, чтобы показать, как работают классы.
Ответить | Ответить с цитатой | Цитировать
0 # Вадим 22.10.2011 03:02
Цитирую Wedal:
Вадим, пример нужен только для того, чтобы показать, как работают классы.


Кстати, я подписался получать по емайл ответы от вас, но это не работает - емайла не было.
Могу я попросить вас помочь мне? Я уже дня 4 мучаюсь с модулем, не могу ему поменять класс... а очень нужно, не могу понять где его менять!
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 22.10.2011 03:23
Вадим, если помощь нужна бесплатно, открывайте новую тему на форуме и подробно описывайте что вам нужно, желательно с картинками и кодом(если есть). Если помощь нужна в частном порядке, то пишите мне через форму обратной связи на странице "Контакты".
Ответить | Ответить с цитатой | Цитировать
0 # Вадим 22.10.2011 03:50
Цитирую Wedal:
Вадим, если помощь нужна бесплатно, открывайте новую тему на форуме и подробно описывайте что вам нужно, желательно с картинками и кодом(если есть). Если помощь нужна в частном порядке, то пишите мне через форму обратной связи на странице "Контакты".


Как я понимаю, в частном порядке - это платно?
Ответить | Ответить с цитатой | Цитировать
-1 # Wedal 22.10.2011 04:14
Вадим, естественно.
Ответить | Ответить с цитатой | Цитировать
0 # Юрий 16.11.2011 10:36
подскажите как мне пришить модуль к CSS, делаю так: суффикс "1" без пробела, позиция debug, template.css

.moduletable.modJoomulus_1 {
text-align: center;
color: #999999;
}
Результата нет, подскажите что не правильно !?
http://juron.net/info.html
Ответить | Ответить с цитатой | Цитировать
-1 # Wedal 17.11.2011 03:29
Юрий, нужно:
.moduletable.modJoomulus1
Ответить | Ответить с цитатой | Цитировать
-1 # Юрий 17.11.2011 09:18
все равно не работает, я уже как только не пробовал, с другими модулями получается а с этим нет :sad: не чего понять не могу!
Ответить | Ответить с цитатой | Цитировать
-1 # WiX-studio 27.01.2012 20:13
Суффикс класс прописывается следующим образом:

В cSS пишешь эту строчку

div.moduletable_qwer {здесь правила}

Где _qwer и есть твой суффикс (который ты задаешь в модуле).... Только пробел снизу поставь и в CSS и в Юмле. Почему- то только так робит сцуко....
Ответить | Ответить с цитатой | Цитировать
+1 # Сергей11 17.02.2012 08:38
Здравствуйте скажите пожалуйста как изменить фон только одного модуля?
Ответить | Ответить с цитатой | Цитировать
0 # Galyanoff 24.02.2012 16:45
Цитирую Сергей11:
Здравствуйте скажите пожалуйста как изменить фон только одного модуля?

Сергей11, выше пост читайте. Создаете такой класс, и в модуле потом прописываете суффикс, суффикс из примера выше будет: _qwer
Ответить | Ответить с цитатой | Цитировать
0 # Magnum79 05.03.2012 21:29
xscript.org/obuchenieuroki/84-suffiks-klassa-modulya-ili-kak-sdelat-kazhdyj-modul-joomla-unikalnym.html - ваш ресурс, или просто статья без сцылки ?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 06.03.2012 01:35
Magnum79, украли. Спасибо за информацию.
Ответить | Ответить с цитатой | Цитировать
0 # Fati 21.03.2012 14:57
Wedal ,
в поле суффикса в настройках модуля я поставила:
Цитата:
color3
а в файл template.css вот эту строчку:
Цитата:
.moduletable.color3 {border-color:#D2232A !important;}
но что-то никаких рамок не появилось.
В чём ошибка?
Ответить | Ответить с цитатой | Цитировать
0 # Fati 21.03.2012 15:03
извиняюсь, вот так поставила суффикс в насройках модуля:
Цитата:
color3 squareblock
Ответить | Ответить с цитатой | Цитировать
0 # Fati 21.03.2012 15:14
(переписываю свой верхний пост)

итак , вопрос:

в поле суффикса в настройках модуля я поставила:
Цитата:
color3 squareblock
а в файл template.css вот эти строчки:
Цитата:
.moduletable_color3 {border-color:#D2232A !important;}
Цитата:
.moduletable_squareblock{border: 2px solid;}
но, ни рамки, ни цвета
Wedal , в чём ошибка?
Ответить | Ответить с цитатой | Цитировать
-1 # Fati 21.03.2012 15:17
если нижнее тире заменяю точкой, то также ничего не происходит
Ответить | Ответить с цитатой | Цитировать
+2 # Fati 21.03.2012 15:19
ура, рамка появилась.
ничего, что я тут у вас сама с собой разговариваю?
Ответить | Ответить с цитатой | Цитировать
0 # Fati 21.03.2012 16:09
cкажите, а как можно поменять цвет хедеров в этих блоках? (они типа кнопок на вид)
Ответить | Ответить с цитатой | Цитировать
0 # Fati 21.03.2012 16:10
извиняюсь, не в блоках, а в модулях
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 22.03.2012 04:12
Fati, можно, если знаете CSS хотя бы немного.
Ответить | Ответить с цитатой | Цитировать
0 # Яков 04.05.2012 16:49
А вот на сайте вы пишете что"
"После того, как все суффиксы заданы, можно переходить к формированию CSS-стилей. С помощью Firebug подбираем необходимые стили:"
это в каком окне мы должны открыть firebug? на самом сайте выделив модуль или при написании суффикса модуля в панели управления сайта?
Ответить | Ответить с цитатой | Цитировать
0 # Яков 04.05.2012 16:59
Подскажите я пользуюсь firebug 1 раз, где мне можно подобрать необходимые css стили?
где запустить firebug на какой странице? на той на которой мы пишем суффиксы классов модулей или где?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 05.05.2012 01:34
Яков, firebug вы запускаете на той странице, над которой работаете(которую оформляете). А вообще, советую прежде почитать инструкции по работе с firebug. В Интернете они легко находятся.
Ответить | Ответить с цитатой | Цитировать
0 # Яков 05.05.2012 14:19
Здравствуйте. Частично я смог сделать модули цветными. Частично потому что некоторые модули например главное меню и прочие где есть ссылки на другие разделы сайта не сделались так как надо.не обведены рамкой, хотя остальные обведены? подскажите в чем проблема
Ответить | Ответить с цитатой | Цитировать
+1 # Яков 05.05.2012 14:45
И еще один вопрос при перезагрузке браузера( google chrome) все мои "цветные рамки на модулях) пропадают а появляются только при обновлении страницы. подскажите почему и как это исправить
Ответить | Ответить с цитатой | Цитировать
-2 # Хыка 21.05.2012 20:56
Здравствуйте. Статья интересная, написана доступно. Но вот не выходит цветочек аленький.
Задаю суффикс, ну скажем [пробел]suff. В style.css пишу:
.module.suff {border:1px solid red;} - ничего не происходит, вместо точки ставил и нижнее подчеркивание и тире, ничего не помогает. А потом модуль целиком перестал отображаться, правда только в Мозилле. Если на модуль смотреть с помощью firebug, то он название модуля выводи как class="module m suff". Соответственно если и это название прописать в css, то также ничего не происходит.
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 22.05.2012 02:23
Хыка, тогда обращайтесь просто, как:
.suff{}
Ответить | Ответить с цитатой | Цитировать
0 # comunicom 19.06.2012 10:31
Спасибо за статью!
Ответить | Ответить с цитатой | Цитировать
+1 # texnik 18.07.2012 02:55
Я ничего не понимаю по вашей теме...мне элементарно нужно понять как изменить стиль у модуля...ваше сообщение на 2 с минусом!я как ученик ничего не понял!!!можно конкретно...то-то и то-то сделай..и будет алилуя!!!
Ответить | Ответить с цитатой | Цитировать
+4 # Wedal 28.07.2012 05:15
texnik, конкретно:
1) читаем статью
2) внимательно читаем статью
3) очень внимательно читаем статью
Если всё равно ничего не понятно значит вы совершенно не знаете html и css. Без этих знаний статья действительно не имеет смысла. Но проблема в том, что в этом случае нет такой статьи, которая поможет вам изменить стиль у модуля. Только учебники.
Ответить | Ответить с цитатой | Цитировать
0 # it 30.09.2012 14:47
texnik, если вобще ни..ра на шаришь, иди мешки грузи. Автору большое спасибо. Я не вобще хакер, но кое-что уже умею. Вот и уже умею то о чем раньше задавался вопросом. Спасибо
Ответить | Ответить с цитатой | Цитировать
0 # Irina 18.10.2012 09:12
Cтатья очень пригодилась, благодарю.
Подскажите,pls: хочу вывести в правой колонке два модуля один под другим. Верхний модуль выводиться, а нижний нет. Притом, что позиция(в моем случае:sm_bottomright)есть в выборе. пробовала выводить разные модули в эту позицию - не выводиться. В чем загвоздка?
Ответить | Ответить с цитатой | Цитировать
0 # Irina 18.10.2012 09:17
Цитирую Irina:
Cтатья очень пригодилась, благодарю.
Подскажите,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
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 19.10.2012 01:38
Irina, смотрели в настройках шаблона? Позиция выводится по "?tp=1" ?
Ответить | Ответить с цитатой | Цитировать
+1 # Irina 19.10.2012 06:13
Благодарю за ответ - разобралась
Ответить | Ответить с цитатой | Цитировать
+1 # WiX-studio 29.10.2012 12:19
Железобетонно!!!
Давайте решим этот вопрос раз и навсегда.
Прописываете в окошке настройках модуля класс, например _terra
Далее жмете кнопку сохранить.
Обновляете страничку своего сайта. Затем жмете ctrl+u (исходный код страницы).
Затем жмете ctrl+f (поиск в коде). Вводите туда суффикс класс прописанный ранее в настройках модуля, и увидите код примерно такой


О насЦели и задачи
Ответить | Ответить с цитатой | Цитировать
0 # WiX-studio 29.10.2012 12:22
Хмм на сайте код обрезается.....
Ладно давайте так:
Железобетонно!!!
Давайте решим этот вопрос раз и навсегда.
Прописываете в окошке настройках модуля класс, например _terra
Далее жмете кнопку сохранить.
Обновляете страничку своего сайта. Затем жмете ctrl+u (исходный код страницы).
Затем жмете ctrl+f (поиск в коде). Вводите туда суффикс класс прописанный ранее в настройках модуля, и увидите код примерно такой

div class= "custom_terra"
-p- О нас -br- Цели и задачи -br-
Как видите юмла добавила свой коммент перед вашим суффиксом.... Вот здесь все и спотыкаются-)!!!!
Далее открываете ваш основной файл css (используйте firebug он покажет Вам путь к данному файлу)
И в этом файле (в любом месте) ставите точку (указать что это класс а не стиль)и пишите custom_terra должно получиться так:
.custom_terra {здесь правила}
И все вопрос можно снять раз и навсегда!
Не спрашивайте почему юмла добавляет коммент - этот вопрос к разработчикам или к крутым мегапрогерам.
Ответить | Ответить с цитатой | Цитировать
-1 # WiX-studio-Tashkent 29.10.2012 12:29
Так что можно смело развеять миф о том, что в Joomla можно легко прописать Суффикс класс и все заработает....
Надо еще посмотреть как он будет выглядеть через исходный код.
Что бы добраться до истины сам мучался долго догадками... :-)
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 30.10.2012 02:35
WiX-studio-Tashkent, и всё-таки легко :-) .

Знаете, ведь можно еще прописать класс как " terra", а не "_terra", тогда получится класс "custom terra" и CSS будет обрабатывать как .custom , так и .terra .

Соединение основного класса модуля и суффикса сделано специально, чтобы вы сами решали использовать ".custom_terra" или .custom и .terra .
Ответить | Ответить с цитатой | Цитировать
0 # WiX-studio-Tashkent 30.10.2012 07:03
Только проверял на J2.5 (самая быстрая сборка Afterburner)проставил суффикс класс "terra" далее исходный код показывает "customterra" без пробела, соответственно стиль ".customterra"
Все-таки после простановки суффикс класса просто необходимо заглянуть в исходный код.
Видите, наши мнения разошлись по факту.
Ответить | Ответить с цитатой | Цитировать
0 # Magnum79 30.10.2012 07:52
Тьфу, да пробел поставь перед названием своего суффикса, и будет щастье без кровопускания! Ну что вы ей-богу как дети? А еще "СТУДИО" какое-то...
Ответить | Ответить с цитатой | Цитировать
+1 # WiX-studio-Tashkent 30.10.2012 14:37
Ну мы как бы не друг-другу объясняем, а людям которые не могут разобраться с этой задачей.
Следовательно выражение "А еще "СТУДИО" какое-то..." тут совсем не уместно.
Ответить | Ответить с цитатой | Цитировать
0 # Vit 03.12.2012 21:48
Статья отличная. Разобрался.
Почти... Я пробовал делать на модуле "Популярные статьи". У меня берется в рамку сам модуль и все пункты по отдельности! На 5 строчек модуля у меня 8 рамок :)
Помогите разобраться.
Спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 04.12.2012 02:31
Vit, видимо класс модуля совпадает с классом пунктов меню. Проверьте внимательно. Используйте Firebug. Очень помогает.
Ответить | Ответить с цитатой | Цитировать
0 # Дима 25.02.2013 12:05
Тема отличная честно говоря видел суффикс но понятия не имел что такое...
У меня вопрос к знающим:
Может предложу альтернативу - а может знак плохого тона...
я делаю так - создаю например mycss.css и в нем правлю именно правлю любой класс на странице будь то .moduletable или body.
например чтобы присвоить класс конкретному модулю к нему можно обратиться по ID.

самое главное объявить этот файл нужно в index.php шаблона в конце всех объявленных css. Почему в конце - потому что походу браузер приоритет ставит последней объявленной css. И если находит одинаковый класс то работает тот который в маем css прописан.
Плюс - нет привязки по конкретному модулю(удалил модуль через два года понадобился - вспоминай какой суффикс использовал как его писал - где хранил класс)
- все мои изменения в одном файле css.

Мне кажется единственный случай использования суффикса это когда элементы модуля вообще не имеют объявленных классов...

Собственно вопрос: так можно работать, с точки зрения создания сайтов и т.д.?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 26.02.2013 02:23
Дима, так вся суть суффиксов как раз в том, что без них никак нельзя выделить модуль через CSS. Представьте: у вас одна позиция и в ней два одинаковых модуля, каждый из которых нужно оформить по-своему. Как вы сделайте это через CSS, если классы одинаковые, а ID вообще нет?
Ответить | Ответить с цитатой | Цитировать
0 # Дима 26.02.2013 08:01
Логично! Просто не сталкивался пока! Думаю если бы столкнулся - уперся на долго. :)
Ответить | Ответить с цитатой | Цитировать
0 # VARion 28.02.2013 12:09
Как вариант можно использовать в определении стиля "соседний" блок, например
#sidebar-a div + div {...}
С таким стилем можно будет применить стиль только ко второму и последующим блокам в сайдбаре. Конечно, это далеко не идеальный вариант, т.к. если блоки изменят положения то всё слетит. Хотя возможно будет нужно именно такое поведение, например для чёткого оформления независимо от порядка модулей.
Сам я такой приём использую обычно в других местах, для модуля лучше суффикс всё таки. :-)
Ответить | Ответить с цитатой | Цитировать
0 # Slava 01.04.2013 04:56
Все бы хорошо, но когда основной цвет стиля h3 уже задан в css, предположим красный. Таким он и остается почему-то не перекрашивается, что-то не правильно делаю?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 01.04.2013 08:03
Slava, как пишите в CSS?
Ответить | Ответить с цитатой | Цитировать
0 # Outja 08.06.2013 15:16
День добрый.

у меня не работает главная страница: mebel-interio.com

но открывается через: mebel-interio.com/index.php

сайт создан на Joomla 2.5
в чем проблема я не понял.
до этого ковырялся в админке в top menu и main menu. переделывал там категории
Ответить | Ответить с цитатой | Цитировать
0 # Sergey Makarov 27.06.2013 09:14
Не понимаю в каком файле нужно добавлять строчку пример а туда вставлять дополнительные классы. В каком файле шаблона это все делать
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 28.06.2013 02:59
Sergey Makarov, в шаблоне есть папка CSS. В ней все файлы со стилями. Нужно добавлять стили в один из этих файлов. В какой именно можно посмотреть в исходном html-коде странице вашего сайта(его может показать любой браузер). Посмотрите, какой файл подключен в этой странице. В него и добавляйте.
Ответить | Ответить с цитатой | Цитировать
0 # Роман 2013 16.10.2013 05:08
Здравствуйте!
Подскажите, а где можно посмотреть готовые Суффиксы используемого шаблона?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 17.10.2013 01:55
Роман, я никогда не встречал наборов готовых суффиксов. Это дело индивидуальное и зачастую сильно связано с используемым шаблоном Joomla.
Ответить | Ответить с цитатой | Цитировать
+1 # mich 26.01.2014 12:31
автору рекомендую всё же указать то место. куда прописывать стили. в какой css файл например. их в joomla пруд пруди, вагон и маленькая тележка. какой лучше какой хуже? а если я буду обновлять jooml-У? то что будет? стили исчезнут или нет?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 27.01.2014 04:01
mich, стили можно прописывать в любой подключенный CSS-файл в используемом вами шаблоне Joomla. Разницы нет. Помещайте в том, с который удобнее. Но есть одна оговорка! Не используете стандартные шаблоны Joomla!(те, которые идут сразу с CMS). Если вам нужен стандартный шаблон переименуйте его и установите, как другой. В противном случае при обновлении Joomla стандартные шаблоны также обновятся и все ваши изменения пропадут.
Ответить | Ответить с цитатой | Цитировать
-1 # Алик 31.01.2014 15:01
ПОдскажи пожалуйста, как изменить вид отображения блоков категории отображаемые на странице (блоки контента)
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 03.02.2014 03:28
Алик, http://wedal.ru/uroki-joomla/joomla-17-layouts.html
Ответить | Ответить с цитатой | Цитировать
0 # dotcom 30.07.2015 10:26
А если я уникальный модуль устанавливаю https://joomla.shneider-host.ru/blog/ustanovka-i-nastroika-joomla/kak-ustanovit-modul-i-komponent-joomla как тут, я его могу потом уникальным сделать как у вас написано?
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 31.07.2015 03:47
dotcom, да.
Ответить | Ответить с цитатой | Цитировать
0 # Максим Поль 13.11.2015 19:39
Огромное спасибо за статью. Долго не мог разобраться, как суффиксы работают, оказалось достаточно просто.
Ответить | Ответить с цитатой | Цитировать
+1 # AlexProf9999 30.11.2015 10:22
Классный форум, где собираются именно профессионалы. Реально ребята, спасибо. Разобрался во многом, после прочтения сообщений.

Буду чаще заходить.
Ответить | Ответить с цитатой | Цитировать
0 # wwwit 05.05.2017 19:31
Привет всем. Как прописать стил ( суффикс ) если в модуле нет строки для суффикс модуля, есть только клас заголовка.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 08.05.2017 04:43
wwwit, тогда только в коде. Модуль, который не позволяет прописать суффикс - плохой модуль. Опция суффикса должна быть в каждом нормальном модуле.
Вы можете переопределить макет вашего модуля в шаблон Joomla и добавить CSS-класс в него. Другой вариант - создать под такой модуль отдельную позицию в шаблоне, чтобы можно было цепляться к нему через CSS. Еще один вариант - псевдоклассы CSS :first-child и :last-child. Но все это, конечно, костыли. Суффикс должен быть.
Ответить | Ответить с цитатой | Цитировать
0 # Ислам 07.11.2017 13:08
Друзья помогите, уже не первый месяц мучаюсь. Вот здесь шикарно описали что такое суффикс и как его описать. Но вот проблема у меня. Есть модуль которого я скачал и установил. В нем описан суффикс, которого я не знаю как и где найти . А нужно мне это чтобы такое же оформление задать для другого модуля. Я пробовал просто суффикс записать в другой модуль такой же, но оформление отличается: картинки других размеров. Я задал позицию тоже такую же, тогда все стало нормально, но второй модуль идет сразу же после первого без каких либо даже разделителей. Если дело не в суффиксах, тогда как мне задать несколько абсолютно одинаковых модулей в разных позициях? Спасибо
Ответить | Ответить с цитатой | Цитировать
+1 # Wedal 08.11.2017 06:05
Ислам, чтобы задать одинаковое оформление модулей в разных позициях через суффикс, в CSS-файле шаблона это оформление должно быть связано только с суффиксом и не связано с другими частями шаблона. Т.е у вас в шаблоне может быть что-то вроде:
  • .pos1 .suf1 - суффикс сработает только в позиции с классом pos1
  • .suf1 - суффикс сработает в любой позиции

Скорее всего у вас первый вариант. Решение только одно - править CSS-файл шаблона.
Ответить | Ответить с цитатой | Цитировать
0 # Владимир 30.11.2017 18:52
mod_widgetkit широко известный, в дополнительных параметрах нет такого поля, как Суффикс CSS-класса модуля, что делать? Хотел сделать модуль sticky, плагин просит прописать это в поле суффикс, а как тогда это сделать, если в параметрах модуля его нет?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 01.12.2017 01:52
Владимир, если этой опции нет и нет никакой другой подобной опции, то остается 2 варианта:
1) Переопределить макет модуля в шаблон Joomla и внести нужный CSS-класс прямо в html-разметку.
2) Написать CSS-код для модуля самостоятельно, с учетом его текущей разметки
Ответить | Ответить с цитатой | Цитировать
0 # Владимир 11.02.2018 12:32
Всем привет. Разжуйте мне пожалуйста. А то есть есть два одинаковых модуля и выводятся они в разрых позициях. И мне нужно прописать для них разные CSS. Прописываю для одного модуля Суффикс CSS-класса модуля Пример: shadow (через пробел) потом пытаюсь править 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 в подкатегориях с право. Что для этого еще нунжо прописать и где что бы всё получилось как задумал? Сильно не пинайте и не посылайте что бы читал,смотрел. Всё это дело и читал и смотрел всё равно не могу понять! Всем спасибо!!!
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 12.02.2018 01:48
Владимир, чтобы убрать border вы должны не убрать стиль, а указать, что border нужно убрать.
В вашем примере, вы должны не удалять стиль, а написать: border: none;

Если после этого рамка не исчезнет, значит она применяется к другому блоку. Чтобы проще определить к какому именно, используйте веб-инспектор (вызывается клавишей F12 в браузере). О том, как им пользоваться, можно почитать здесь: https://wedal.ru/internet/rukovodstvo-po-firebug.html
Ответить | Ответить с цитатой | Цитировать
0 # Владимир 14.02.2018 11:10
Цитирую Wedal:
Владимир, чтобы убрать border вы должны не убрать стиль, а указать, что border нужно убрать.
В вашем примере, вы должны не удалять стиль, а написать: 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; то и там у меня убирается и там там!
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 15.02.2018 03:55
Владимир, для начала определитесь с тем, нужно ли вам вообще два модуля. Если ваша цель - только убрать рамки, то нет. Если же в модулях заданы разные настройки, то да.

Если у вас два модуля, то только для одного из них вы должны задать CSS-суффикс и через него убрать рамки.
Если у вас один модуль, то вам проще задать уникальный CSS-класс для главной страницы сайта (это можно сделать в настройках пункта меню главной страницы) и через него обратиться к модулю (т.к. он будет только на главной, правило отмены рамок также будет применяться только на ней).
Ответить | Ответить с цитатой | Цитировать
0 # Владимир 15.02.2018 09:10
Здравствуйте. Обязательно нужно два модуля. Так как вип будет работать и на главной странице и в подкатегориях. Не могу сообразить что надо именно прописывать в html шаблоне. Что бы заработал именно один из модулей css. Друзья если есть пример подключения в формате видео дайте ссылку как это реализовать.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 16.02.2018 02:24
Владимир, если есть 2 модуля, то делайте так, как написали в самом начале: добавьте одному из них CSS-суффикс и пропишите для него border: none;
Если рамка исчезает у обоих модулей, значит или ваш суффикс совпадает с каким-то CSS-классом, которые уже есть в коде модуля, либо вы прописали суффикс для обоих модулей. Других вариантов нет.
Ответить | Ответить с цитатой | Цитировать
0 # Владимир 16.02.2018 14:10
Цитирую Wedal:
Владимир, если есть 2 модуля, то делайте так, как написали в самом начале: добавьте одному из них CSS-суффикс и пропишите для него border: none;
Если рамка исчезает у обоих модулей, значит или ваш суффикс совпадает с каким-то CSS-классом, которые уже есть в коде модуля, либо вы прописали суффикс для обоих модулей. Других вариантов нет.

Всем добрый вечер. Если одному модулю прописать CSS-суффикс, то меняется всё что захочешь в самом модуле, а вот рамка вокруг картинок не исчезает! На первом скрине видно что меняется только сам модуль, но не его внутренности. А вот на втором скрине видно где находится у меня BORDER вокруг картинок. Вот я и не могу понять что прописать что бы убрать у одного только модуля рамку именно вокруг картинок.

Ответить | Ответить с цитатой | Цитировать
0 # Михаил 26.09.2019 17:24
Эм.., Дружище! )) Читаю Ваши статьи нахожу их полезными, но этой статьи я не понял, или устал до такой степени, но скорее всего потому что я новичок в joomla!, но при этом я знаю, вернее помню немного html и css, но нишиша не понял вашей статьи. Предлагаю немного ее модифицировать для таких так я )) - от менее сложного, к более. Возможно это уже и так тут просто, но от простого к более сложному в подаче будет куда понятнее ;)
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 30.09.2019 04:03
Михаил, суффиксы в Joomla на самом деле очень простая штука. Но есть одно НО. Они будут понятны тем, кто разбирается в CSS (понимает то, как формируются наследования). Я специально сделал в этой статье раздел с объяснением того, как работают CSS-классы. Важно понимать его. Ну а дальше всё проще некуда. Добавляем новый класс в настройках модуля и обращаемся к нему через CSS.
Ответить | Ответить с цитатой | Цитировать
0 # Guest 11.07.2020 18:04
Очень полезная информация, спасибо
Ответить | Ответить с цитатой | Цитировать
0 # Иван 18.05.2022 14:52
Здравствуйте.
Скажите, пожалуйста, как сделать так, чтоб модуль появлялся при разрешении 1920 на 1080 и исчезал при любых других разрешениях экрана?
Заранее спасибо большое?
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 19.05.2022 05:47
Иван, я не знаю вашей точной задачи, но обычно делать стили под одно точное разрешение - некорректно. Их задают для диапазонов ширин экранов, например, от 1920 и меньше, а на, скажем, 1280 переопределяют.

Всё это делается с помощью CSS и так называемых медиа-запросов. Вы создаете в файле CSS такой запрос и в нем прописываете display:none для класса модуля, созданного с помощью суффикса, вот и всё. Только следует учесть, что потом, для других разрешений, модуль нужно снова проявить через display:block, например.

Также существует 2 подхода для медиа-запросов:
1) Mobile first strategy
2) Non-mobile first strategy

Разница там только в том, как создаются базовые медиа-запросы и в какую сторону переопределяются, т.е. просто идем мы от маленьких разрешений к большим или наоборот.

В целом, всё написал. Погуглите примеры медиа-запросов и этих стратегий. Дальше ваша задача решится очень легко.
Ответить | Ответить с цитатой | Цитировать
0 # Sergiy 26.02.2023 17:07
Может подскажете как реализовать следующее: Название модуля состоит из нескольких слов. Одно из них нужно сделать другим цветом. Пробовал это слово оборачиать в спан но он вырезается при сохранении.
Ответить | Ответить с цитатой | Цитировать
0 # Wedal 27.02.2023 06:25
Sergiy, только дублировать название модуля внутри модуля. Любые теги из названия будут вырезаться. Здесь вы ничего не сделаете, да и это правильно, поскольку иначе мог бы возникнуть хаос в админке. Используйте какое-либо поле в настройках модуля для таких названий.
Ответить | Ответить с цитатой | Цитировать