Куда идем?

В 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
Отличная статья, не знал что так тоже можно использовать суфиксы. Спасибо автору.
0
Статья хорошая. Уже давно использую суффиксы у модулей: без них вообще не знаю как можно работать :-)

Цитата:

.moduletable.leftpos{position: relative; right: 13%;} /* сдвигаем модуль немного вправо. */

Виталий, ты, наверное, имел ввиду "сдвигаем модуль немного влево"
0
VARion, да, конечно влево. Спасибо! Поправил.
0
Wedal,
Интересуюсь разработкой сайтов.
Могли бы порекомендовать хорошие на Ваш взгляд учебники по html и CSS?!
Заранее спасибо!
0
Шикарная статья. Автору большое спасибо, теперь благодаря вам я узнал как разнообразить внешний вид модулей на сайте.
-2
Обьясните идиоту :-)
А зачем нужен пример? Если он не упоминается в суффиксе.
Я уже неделю бьюсь, чтобы изменить модуль, результат пока равен нулю...
-2

Цитирую Вадим:

Обьясните идиоту :-)
А зачем нужен пример? Если он не упоминается в суффиксе.
Я уже неделю бьюсь, чтобы изменить модуль, результат пока равен нулю...


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

Цитирую Вадим:


Цитирую Вадим:

Обьясните идиоту :-)
А зачем нужен пример? Если он не упоминается в суффиксе.
Я уже неделю бьюсь, чтобы изменить модуль, результат пока равен нулю...


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


---div class="myclass">пример
0
Вадим, пример нужен только для того, чтобы показать, как работают классы.
0

Цитирую Wedal:

Вадим, пример нужен только для того, чтобы показать, как работают классы.



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

Цитирую Wedal:

Вадим, если помощь нужна бесплатно, открывайте новую тему на форуме и подробно описывайте что вам нужно, желательно с картинками и кодом(если есть). Если помощь нужна в частном порядке, то пишите мне через форму обратной связи на странице "Контакты".



Как я понимаю, в частном порядке - это платно?
-1
Вадим, естественно.
0
подскажите как мне пришить модуль к CSS, делаю так: суффикс "1" без пробела, позиция debug, template.css

.moduletable.modJoomulus_1 {
text-align: center;
color: #999999;
}
Результата нет, подскажите что не правильно !?
http://juron.net/info.html
-1
Юрий, нужно:
.moduletable.modJoomulus1
-1
все равно не работает, я уже как только не пробовал, с другими модулями получается а с этим нет :sad: не чего понять не могу!
-1
Суффикс класс прописывается следующим образом:

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

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

Где _qwer и есть твой суффикс (который ты задаешь в модуле).... Только пробел снизу поставь и в CSS и в Юмле. Почему- то только так робит сцуко....
1
Здравствуйте скажите пожалуйста как изменить фон только одного модуля?
0

Цитирую Сергей11:

Здравствуйте скажите пожалуйста как изменить фон только одного модуля?


Сергей11, выше пост читайте. Создаете такой класс, и в модуле потом прописываете суффикс, суффикс из примера выше будет: _qwer
0
xscript.org/obuchenieuroki/84-suffiks-klassa-modulya-ili-kak-sdelat-kazhdyj-modul-joomla-unikalnym.html - ваш ресурс, или просто статья без сцылки ?
0
Magnum79, украли. Спасибо за информацию.
0
Wedal ,
в поле суффикса в настройках модуля я поставила:

Цитата:

color3

а в файл template.css вот эту строчку:

Цитата:

.moduletable.color3 {border-color:#D2232A !important;}

но что-то никаких рамок не появилось.
В чём ошибка?
0
извиняюсь, вот так поставила суффикс в насройках модуля:

Цитата:

color3 squareblock

0
(переписываю свой верхний пост)

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

в поле суффикса в настройках модуля я поставила:

Цитата:

color3 squareblock

а в файл template.css вот эти строчки:

Цитата:

.moduletable_color3 {border-color:#D2232A !important;}


Цитата:

.moduletable_squareblock{border: 2px solid;}

но, ни рамки, ни цвета
Wedal , в чём ошибка?
0
если нижнее тире заменяю точкой, то также ничего не происходит
2
ура, рамка появилась.
ничего, что я тут у вас сама с собой разговариваю?
0
cкажите, а как можно поменять цвет хедеров в этих блоках? (они типа кнопок на вид)
0
извиняюсь, не в блоках, а в модулях
0
Fati, можно, если знаете CSS хотя бы немного.
0
А вот на сайте вы пишете что"
"После того, как все суффиксы заданы, можно переходить к формированию CSS-стилей. С помощью Firebug подбираем необходимые стили:"
это в каком окне мы должны открыть firebug? на самом сайте выделив модуль или при написании суффикса модуля в панели управления сайта?
0
Подскажите я пользуюсь firebug 1 раз, где мне можно подобрать необходимые css стили?
где запустить firebug на какой странице? на той на которой мы пишем суффиксы классов модулей или где?
0
Яков, firebug вы запускаете на той странице, над которой работаете(которую оформляете). А вообще, советую прежде почитать инструкции по работе с firebug. В Интернете они легко находятся.
0
Здравствуйте. Частично я смог сделать модули цветными. Частично потому что некоторые модули например главное меню и прочие где есть ссылки на другие разделы сайта не сделались так как надо.не обведены рамкой, хотя остальные обведены? подскажите в чем проблема
1
И еще один вопрос при перезагрузке браузера( google chrome) все мои "цветные рамки на модулях) пропадают а появляются только при обновлении страницы. подскажите почему и как это исправить
-2
Здравствуйте. Статья интересная, написана доступно. Но вот не выходит цветочек аленький.
Задаю суффикс, ну скажем [пробел]suff. В style.css пишу:
.module.suff {border:1px solid red;} - ничего не происходит, вместо точки ставил и нижнее подчеркивание и тире, ничего не помогает. А потом модуль целиком перестал отображаться, правда только в Мозилле. Если на модуль смотреть с помощью firebug, то он название модуля выводи как class="module m suff". Соответственно если и это название прописать в css, то также ничего не происходит.
1
Хыка, тогда обращайтесь просто, как:
.suff{}
0
Спасибо за статью!
1
Я ничего не понимаю по вашей теме...мне элементарно нужно понять как изменить стиль у модуля...ваше сообщение на 2 с минусом!я как ученик ничего не понял!!!можно конкретно...то-то и то-то сделай..и будет алилуя!!!
5
texnik, конкретно:
1) читаем статью
2) внимательно читаем статью
3) очень внимательно читаем статью
Если всё равно ничего не понятно значит вы совершенно не знаете html и css. Без этих знаний статья действительно не имеет смысла. Но проблема в том, что в этом случае нет такой статьи, которая поможет вам изменить стиль у модуля. Только учебники.
0
texnik, если вобще ни..ра на шаришь, иди мешки грузи. Автору большое спасибо. Я не вобще хакер, но кое-что уже умею. Вот и уже умею то о чем раньше задавался вопросом. Спасибо
0
Cтатья очень пригодилась, благодарю.
Подскажите,pls: хочу вывести в правой колонке два модуля один под другим. Верхний модуль выводиться, а нижний нет. Притом, что позиция(в моем случае:sm_bottomright)есть в выборе. пробовала выводить разные модули в эту позицию - не выводиться. В чем загвоздка?
0

Цитирую 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
Irina, смотрели в настройках шаблона? Позиция выводится по "?tp=1" ?
0
Благодарю за ответ - разобралась
1
Железобетонно!!!
Давайте решим этот вопрос раз и навсегда.
Прописываете в окошке настройках модуля класс, например _terra
Далее жмете кнопку сохранить.
Обновляете страничку своего сайта. Затем жмете ctrl+u (исходный код страницы).
Затем жмете ctrl+f (поиск в коде). Вводите туда суффикс класс прописанный ранее в настройках модуля, и увидите код примерно такой


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

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

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

Соединение основного класса модуля и суффикса сделано специально, чтобы вы сами решали использовать ".custom_terra" или .custom и .terra .
0
Только проверял на J2.5 (самая быстрая сборка Afterburner)проставил суффикс класс "terra" далее исходный код показывает "customterra" без пробела, соответственно стиль ".customterra"
Все-таки после простановки суффикс класса просто необходимо заглянуть в исходный код.
Видите, наши мнения разошлись по факту.
0
Тьфу, да пробел поставь перед названием своего суффикса, и будет щастье без кровопускания! Ну что вы ей-богу как дети? А еще "СТУДИО" какое-то...
1
Ну мы как бы не друг-другу объясняем, а людям которые не могут разобраться с этой задачей.
Следовательно выражение "А еще "СТУДИО" какое-то..." тут совсем не уместно.
0
Статья отличная. Разобрался.
Почти... Я пробовал делать на модуле "Популярные статьи". У меня берется в рамку сам модуль и все пункты по отдельности! На 5 строчек модуля у меня 8 рамок :)
Помогите разобраться.
Спасибо!
0
Vit, видимо класс модуля совпадает с классом пунктов меню. Проверьте внимательно. Используйте Firebug. Очень помогает.
0
Тема отличная честно говоря видел суффикс но понятия не имел что такое...
У меня вопрос к знающим:
Может предложу альтернативу - а может знак плохого тона...
я делаю так - создаю например mycss.css и в нем правлю именно правлю любой класс на странице будь то .moduletable или body.
например чтобы присвоить класс конкретному модулю к нему можно обратиться по ID.

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

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

Собственно вопрос: так можно работать, с точки зрения создания сайтов и т.д.?
0
Дима, так вся суть суффиксов как раз в том, что без них никак нельзя выделить модуль через CSS. Представьте: у вас одна позиция и в ней два одинаковых модуля, каждый из которых нужно оформить по-своему. Как вы сделайте это через CSS, если классы одинаковые, а ID вообще нет?
0
Логично! Просто не сталкивался пока! Думаю если бы столкнулся - уперся на долго. :)
0
Как вариант можно использовать в определении стиля "соседний" блок, например
#sidebar-a div + div {...}
С таким стилем можно будет применить стиль только ко второму и последующим блокам в сайдбаре. Конечно, это далеко не идеальный вариант, т.к. если блоки изменят положения то всё слетит. Хотя возможно будет нужно именно такое поведение, например для чёткого оформления независимо от порядка модулей.
Сам я такой приём использую обычно в других местах, для модуля лучше суффикс всё таки. :-)
0
Все бы хорошо, но когда основной цвет стиля h3 уже задан в css, предположим красный. Таким он и остается почему-то не перекрашивается, что-то не правильно делаю?
0
Slava, как пишите в CSS?
0
День добрый.

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

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

сайт создан на Joomla 2.5
в чем проблема я не понял.
до этого ковырялся в админке в top menu и main menu. переделывал там категории
0
Не понимаю в каком файле нужно добавлять строчку пример а туда вставлять дополнительные классы. В каком файле шаблона это все делать
0
Sergey Makarov, в шаблоне есть папка CSS. В ней все файлы со стилями. Нужно добавлять стили в один из этих файлов. В какой именно можно посмотреть в исходном html-коде странице вашего сайта(его может показать любой браузер). Посмотрите, какой файл подключен в этой странице. В него и добавляйте.
0
Здравствуйте!
Подскажите, а где можно посмотреть готовые Суффиксы используемого шаблона?
0
Роман, я никогда не встречал наборов готовых суффиксов. Это дело индивидуальное и зачастую сильно связано с используемым шаблоном Joomla.
1
автору рекомендую всё же указать то место. куда прописывать стили. в какой css файл например. их в joomla пруд пруди, вагон и маленькая тележка. какой лучше какой хуже? а если я буду обновлять jooml-У? то что будет? стили исчезнут или нет?
0
mich, стили можно прописывать в любой подключенный CSS-файл в используемом вами шаблоне Joomla. Разницы нет. Помещайте в том, с который удобнее. Но есть одна оговорка! Не используете стандартные шаблоны Joomla!(те, которые идут сразу с CMS). Если вам нужен стандартный шаблон переименуйте его и установите, как другой. В противном случае при обновлении Joomla стандартные шаблоны также обновятся и все ваши изменения пропадут.
0
ПОдскажи пожалуйста, как изменить вид отображения блоков категории отображаемые на странице (блоки контента)
0
Алик, http://wedal.ru/uroki-joomla/joomla-17-layouts.html
0
А если я уникальный модуль устанавливаю https://joomla.shneider-host.ru/blog/ustanovka-i-nastroika-joomla/kak-ustanovit-modul-i-komponent-joomla как тут, я его могу потом уникальным сделать как у вас написано?
0
dotcom, да.
0
Огромное спасибо за статью. Долго не мог разобраться, как суффиксы работают, оказалось достаточно просто.
1
Классный форум, где собираются именно профессионалы. Реально ребята, спасибо. Разобрался во многом, после прочтения сообщений.

Буду чаще заходить.
0
Привет всем. Как прописать стил ( суффикс ) если в модуле нет строки для суффикс модуля, есть только клас заголовка.
0
wwwit, тогда только в коде. Модуль, который не позволяет прописать суффикс - плохой модуль. Опция суффикса должна быть в каждом нормальном модуле.
Вы можете переопределить макет вашего модуля в шаблон Joomla и добавить CSS-класс в него. Другой вариант - создать под такой модуль отдельную позицию в шаблоне, чтобы можно было цепляться к нему через CSS. Еще один вариант - псевдоклассы CSS :first-child и :last-child. Но все это, конечно, костыли. Суффикс должен быть.
0
Друзья помогите, уже не первый месяц мучаюсь. Вот здесь шикарно описали что такое суффикс и как его описать. Но вот проблема у меня. Есть модуль которого я скачал и установил. В нем описан суффикс, которого я не знаю как и где найти . А нужно мне это чтобы такое же оформление задать для другого модуля. Я пробовал просто суффикс записать в другой модуль такой же, но оформление отличается: картинки других размеров. Я задал позицию тоже такую же, тогда все стало нормально, но второй модуль идет сразу же после первого без каких либо даже разделителей. Если дело не в суффиксах, тогда как мне задать несколько абсолютно одинаковых модулей в разных позициях? Спасибо
1
Ислам, чтобы задать одинаковое оформление модулей в разных позициях через суффикс, в CSS-файле шаблона это оформление должно быть связано только с суффиксом и не связано с другими частями шаблона. Т.е у вас в шаблоне может быть что-то вроде:
  • .pos1 .suf1 - суффикс сработает только в позиции с классом pos1
  • .suf1 - суффикс сработает в любой позиции

Скорее всего у вас первый вариант. Решение только одно - править CSS-файл шаблона.
0
mod_widgetkit широко известный, в дополнительных параметрах нет такого поля, как Суффикс CSS-класса модуля, что делать? Хотел сделать модуль sticky, плагин просит прописать это в поле суффикс, а как тогда это сделать, если в параметрах модуля его нет?
0
Владимир, если этой опции нет и нет никакой другой подобной опции, то остается 2 варианта:
1) Переопределить макет модуля в шаблон Joomla и внести нужный CSS-класс прямо в html-разметку.
2) Написать CSS-код для модуля самостоятельно, с учетом его текущей разметки
0
Всем привет. Разжуйте мне пожалуйста. А то есть есть два одинаковых модуля и выводятся они в разрых позициях. И мне нужно прописать для них разные 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
Владимир, чтобы убрать border вы должны не убрать стиль, а указать, что border нужно убрать.
В вашем примере, вы должны не удалять стиль, а написать: border: none;

Если после этого рамка не исчезнет, значит она применяется к другому блоку. Чтобы проще определить к какому именно, используйте веб-инспектор (вызывается клавишей F12 в браузере). О том, как им пользоваться, можно почитать здесь: https://wedal.ru/internet/rukovodstvo-po-firebug.html
0

Цитирую 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
Владимир, для начала определитесь с тем, нужно ли вам вообще два модуля. Если ваша цель - только убрать рамки, то нет. Если же в модулях заданы разные настройки, то да.

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

Цитирую Wedal:

Владимир, если есть 2 модуля, то делайте так, как написали в самом начале: добавьте одному из них CSS-суффикс и пропишите для него border: none;
Если рамка исчезает у обоих модулей, значит или ваш суффикс совпадает с каким-то CSS-классом, которые уже есть в коде модуля, либо вы прописали суффикс для обоих модулей. Других вариантов нет.


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

0
Эм.., Дружище! )) Читаю Ваши статьи нахожу их полезными, но этой статьи я не понял, или устал до такой степени, но скорее всего потому что я новичок в joomla!, но при этом я знаю, вернее помню немного html и css, но нишиша не понял вашей статьи. Предлагаю немного ее модифицировать для таких так я )) - от менее сложного, к более. Возможно это уже и так тут просто, но от простого к более сложному в подаче будет куда понятнее ;)
0
Михаил, суффиксы в Joomla на самом деле очень простая штука. Но есть одно НО. Они будут понятны тем, кто разбирается в CSS (понимает то, как формируются наследования). Я специально сделал в этой статье раздел с объяснением того, как работают CSS-классы. Важно понимать его. Ну а дальше всё проще некуда. Добавляем новый класс в настройках модуля и обращаемся к нему через CSS.
0
Очень полезная информация, спасибо
0
Здравствуйте.
Скажите, пожалуйста, как сделать так, чтоб модуль появлялся при разрешении 1920 на 1080 и исчезал при любых других разрешениях экрана?
Заранее спасибо большое?
0
Иван, я не знаю вашей точной задачи, но обычно делать стили под одно точное разрешение - некорректно. Их задают для диапазонов ширин экранов, например, от 1920 и меньше, а на, скажем, 1280 переопределяют.

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

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

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

В целом, всё написал. Погуглите примеры медиа-запросов и этих стратегий. Дальше ваша задача решится очень легко.