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

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

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

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

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

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

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

Для примера я взял стандартный шаблон Joomla, который  включен по умолчанию сразу после установки CMS.

Вот его пример:

Module Class Suffix

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

Module Class Suffix

Немного о CSS-классах.

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

CSS-стиль(свойство) – минимальная единица CSS. Размер или цвет шрифта, рамка, позиционирование – всё это CSS-стили.

СSS-класс – это как бы контейнер стилей.

Пример:

У нас есть html-блок DIV:

1
<div>пример</div>

Мы хотим сделать текст в этом блоке 20 шрифтом и красным цветом. Для этого мы добавляет нашему блоку атрибут класса, например «myclass». В результате у нас получается:

1
<div class="myclass">пример</div>

Сейчас мы создали CSS-класс для блока. Но он пока пуст(не содержит стилей).

Теперь в любом, подключенном к шаблону CSS-файле,  мы добавляем строчку:

1
.myclass{font-size:20pt; color: red;}

Мы внесли в класс два CSS-стиля: font-size и color.

После этого наш блок будет содержать текст красного цвета 20 шрифтом.

Вообще, если вы всерьёз планируете заниматься сайтостроением, советую купить какой-нибудь хороший учебник по html и CSS. Эти технологии – основа основ. Освоив их по учебнику, в дальнейшем вы сэкономите очень много времени на верстке. 

Создание CSS-суффиксов для модулей.

Теперь нужно немного подумать о том, чем внешний вид наших модулей отличается и чем он схож. Понятно, что отличия – разные цвета, контуры цветов и положение. А «похожесть» в том, что некоторые контуры и положения повторяются.

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

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

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

Module Class Suffix

После того, как все суффиксы заданы, можно переходить к формированию CSS-стилей. С помощью Firebug подбираем необходимые стили:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Задаем цвета рамок !important - для того, чтобы сделать эти стили приоритетнее цвета рамки по умолчанию */
.moduletable.color1 {border-color:#D2232A !important;} /* Задаем красный цвет */
.moduletable
.color2 {border-color:#F7941E !important;} /* Задаем оранжевый цвет */

.moduletable.color3 {border-color:#FFDE00 !important;} /* Задаем желтый цвет */
.moduletable.color4 {border-color:#40AE49 !important;} /* Задаем зеленый цвет */
.moduletable.color5 {border-color:#00B2EB !important;} /* Задаем голубой цвет */
.moduletable
.color6 {border-color:#23408F !important;} /* Задаем синий цвет */

.moduletable
.color7 {border-color:#624099 !important;} /* Задаем фиолетовый цвет */


/* Задаем цвета заголовков */

.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;} /* скругленная рамка. Стиль "border-radius" работает только начиная со стандарта CSS3. Данный стандарт не поддерживается рядом устаревших браузеров. Для полной кроссбраузерности стиль "border-radius" не подходит. Здесь использован только для упрощения кода. */

/* Задаем положение рамок */
.moduletable.normalpos{} /* нормальное положение не требует дополнительных стилей */ .moduletable.leftpos{position: relative; right: 13%;} /* сдвигаем модуль немного влево. */

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

Module Class Suffix

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях ниже.

4.3035714285714 1 1 1 1 1 4.30

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

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

Комментарии  

0 # Использование суфмксовAlexProf9999 30.11.2015 10:22
Классный форум, где собираются именно профессионалы. Реально ребята, спасибо. Разобрался во многом, после прочтения сообщений.

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

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

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

сайт создан на Joomla 2.5
в чем проблема я не понял.
до этого ковырялся в админке в top menu и main menu. переделывал там категории
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Slava 01.04.2013 04:56
Все бы хорошо, но когда основной цвет стиля h3 уже задан в css, предположим красный. Таким он и остается почему-то не перекрашивается, что-то не правильно делаю?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Wedal 01.04.2013 08:03
Slava, как пишите в CSS?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Дима 25.02.2013 12:05
Тема отличная честно говоря видел суффикс но понятия не имел что такое...
У меня вопрос к знающим:
Может предложу альтернативу - а может знак плохого тона...
я делаю так - создаю например mycss.css и в нем правлю именно правлю любой класс на странице будь то .moduletable или body.
например чтобы присвоить класс конкретному модулю к нему можно обратиться по ID.

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

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

Собственно вопрос: так можно работать, с точки зрения создания сайтов и т.д.?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Wedal 26.02.2013 02:23
Дима, так вся суть суффиксов как раз в том, что без них никак нельзя выделить модуль через CSS. Представьте: у вас одна позиция и в ней два одинаковых модуля, каждый из которых нужно оформить по-своему. Как вы сделайте это через CSS, если классы одинаковые, а ID вообще нет?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Дима 26.02.2013 08:01
Логично! Просто не сталкивался пока! Думаю если бы столкнулся - уперся на долго. :)
Ответить | Ответить с цитатой | Цитировать
0 # АльтернативаVARion 28.02.2013 12:09
Как вариант можно использовать в определении стиля "соседний" блок, например
#sidebar-a div + div {...}
С таким стилем можно будет применить стиль только ко второму и последующим блокам в сайдбаре. Конечно, это далеко не идеальный вариант, т.к. если блоки изменят положения то всё слетит. Хотя возможно будет нужно именно такое поведение, например для чёткого оформления независимо от порядка модулей.
Сам я такой приём использую обычно в других местах, для модуля лучше суффикс всё таки. :-)
Ответить | Ответить с цитатой | Цитировать
0 # СпасибоVit 03.12.2012 21:48
Статья отличная. Разобрался.
Почти... Я пробовал делать на модуле "Популярные статьи". У меня берется в рамку сам модуль и все пункты по отдельности! На 5 строчек модуля у меня 8 рамок :)
Помогите разобраться.
Спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # RE: СпасибоWedal 04.12.2012 02:31
Vit, видимо класс модуля совпадает с классом пунктов меню. Проверьте внимательно. Используйте Firebug. Очень помогает.
Ответить | Ответить с цитатой | Цитировать
+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 # RE: Суффикс-классWiX-studio-Tashkent 29.10.2012 12:29
Так что можно смело развеять миф о том, что в Joomla можно легко прописать Суффикс класс и все заработает....
Надо еще посмотреть как он будет выглядеть через исходный код.
Что бы добраться до истины сам мучался долго догадками... :-)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс-класс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 # RE: Суффикс-классMagnum79 30.10.2012 07:52
Тьфу, да пробел поставь перед названием своего суффикса, и будет щастье без кровопускания! Ну что вы ей-богу как дети? А еще "СТУДИО" какое-то...
Ответить | Ответить с цитатой | Цитировать
0 # Суффикс-классWiX-studio-Tashkent 30.10.2012 14:37
Ну мы как бы не друг-другу объясняем, а людям которые не могут разобраться с этой задачей.
Следовательно выражение "А еще "СТУДИО" какое-то..." тут совсем не уместно.
Ответить | Ответить с цитатой | Цитировать
0 # модули JoomlaIrina 18.10.2012 09:12
Cтатья очень пригодилась, благодарю.
Подскажите,pls: хочу вывести в правой колонке два модуля один под другим. Верхний модуль выводиться, а нижний нет. Притом, что позиция(в моем случае:sm_bottomright)есть в выборе. пробовала выводить разные модули в эту позицию - не выводиться. В чем загвоздка?
Ответить | Ответить с цитатой | Цитировать
0 # RE: модули JoomlaIrina 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 # RE: модули JoomlaWedal 19.10.2012 01:38
Irina, смотрели в настройках шаблона? Позиция выводится по "?tp=1" ?
Ответить | Ответить с цитатой | Цитировать
0 # RE: модули JoomlaIrina 19.10.2012 06:13
Благодарю за ответ - разобралась
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.it 30.09.2012 14:47
texnik, если вобще ни..ра на шаришь, иди мешки грузи. Автору большое спасибо. Я не вобще хакер, но кое-что уже умею. Вот и уже умею то о чем раньше задавался вопросом. Спасибо
Ответить | Ответить с цитатой | Цитировать
-1 # все плохо!!!texnik 18.07.2012 02:55
Я ничего не понимаю по вашей теме...мне элементарно нужно понять как изменить стиль у модуля...ваше сообщение на 2 с минусом!я как ученик ничего не понял!!!можно конкретно...то-то и то-то сделай..и будет алилуя!!!
Ответить | Ответить с цитатой | Цитировать
+4 # RE: все плохо!!!Wedal 28.07.2012 05:15
texnik, конкретно:
1) читаем статью
2) внимательно читаем статью
3) очень внимательно читаем статью
Если всё равно ничего не понятно значит вы совершенно не знаете html и css. Без этих знаний статья действительно не имеет смысла. Но проблема в том, что в этом случае нет такой статьи, которая поможет вам изменить стиль у модуля. Только учебники.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.comunicom 19.06.2012 10:31
Спасибо за статью!
Ответить | Ответить с цитатой | Цитировать
-2 # Не получаетсяХыка 21.05.2012 20:56
Здравствуйте. Статья интересная, написана доступно. Но вот не выходит цветочек аленький.
Задаю суффикс, ну скажем [пробел]suff. В style.css пишу:
.module.suff {border:1px solid red;} - ничего не происходит, вместо точки ставил и нижнее подчеркивание и тире, ничего не помогает. А потом модуль целиком перестал отображаться, правда только в Мозилле. Если на модуль смотреть с помощью firebug, то он название модуля выводи как class="module m suff". Соответственно если и это название прописать в css, то также ничего не происходит.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Не получаетсяWedal 22.05.2012 02:23
Хыка, тогда обращайтесь просто, как:
.suff{}
Ответить | Ответить с цитатой | Цитировать
+1 # МодулиЯков 05.05.2012 14:45
И еще один вопрос при перезагрузке браузера( google chrome) все мои "цветные рамки на модулях) пропадают а появляются только при обновлении страницы. подскажите почему и как это исправить
Ответить | Ответить с цитатой | Цитировать
0 # МодулиЯков 05.05.2012 14:19
Здравствуйте. Частично я смог сделать модули цветными. Частично потому что некоторые модули например главное меню и прочие где есть ссылки на другие разделы сайта не сделались так как надо.не обведены рамкой, хотя остальные обведены? подскажите в чем проблема
Ответить | Ответить с цитатой | Цитировать
0 # МодулиЯков 04.05.2012 16:59
Подскажите я пользуюсь firebug 1 раз, где мне можно подобрать необходимые css стили?
где запустить firebug на какой странице? на той на которой мы пишем суффиксы классов модулей или где?
Ответить | Ответить с цитатой | Цитировать
0 # RE: МодулиWedal 05.05.2012 01:34
Яков, firebug вы запускаете на той странице, над которой работаете(которую оформляете). А вообще, советую прежде почитать инструкции по работе с firebug. В Интернете они легко находятся.
Ответить | Ответить с цитатой | Цитировать
0 # модулиЯков 04.05.2012 16:49
А вот на сайте вы пишете что"
"После того, как все суффиксы заданы, можно переходить к формированию CSS-стилей. С помощью Firebug подбираем необходимые стили:"
это в каком окне мы должны открыть firebug? на самом сайте выделив модуль или при написании суффикса модуля в панели управления сайта?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Fati 21.03.2012 16:09
cкажите, а как можно поменять цвет хедеров в этих блоках? (они типа кнопок на вид)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Fati 21.03.2012 16:10
извиняюсь, не в блоках, а в модулях
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Wedal 22.03.2012 04:12
Fati, можно, если знаете CSS хотя бы немного.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Fati 21.03.2012 15:14
(переписываю свой верхний пост)

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

в поле суффикса в настройках модуля я поставила:
Цитата:
color3 squareblock
а в файл template.css вот эти строчки:
Цитата:
.moduletable_color3 {border-color:#D2232A !important;}
Цитата:
.moduletable_squareblock{border: 2px solid;}
но, ни рамки, ни цвета
Wedal , в чём ошибка?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Fati 21.03.2012 15:17
если нижнее тире заменяю точкой, то также ничего не происходит
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Fati 21.03.2012 15:19
ура, рамка появилась.
ничего, что я тут у вас сама с собой разговариваю?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Fati 21.03.2012 14:57
Wedal ,
в поле суффикса в настройках модуля я поставила:
Цитата:
color3
а в файл template.css вот эту строчку:
Цитата:
.moduletable.color3 {border-color:#D2232A !important;}
но что-то никаких рамок не появилось.
В чём ошибка?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Fati 21.03.2012 15:03
извиняюсь, вот так поставила суффикс в насройках модуля:
Цитата:
color3 squareblock
Ответить | Ответить с цитатой | Цитировать
0 # Вопрос о вечномMagnum79 05.03.2012 21:29
xscript.org/obuchenieuroki/84-suffiks-klassa-modulya-ili-kak-sdelat-kazhdyj-modul-joomla-unikalnym.html - ваш ресурс, или просто статья без сцылки ?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Вопрос о вечномWedal 06.03.2012 01:35
Magnum79, украли. Спасибо за информацию.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Сергей11 17.02.2012 08:38
Здравствуйте скажите пожалуйста как изменить фон только одного модуля?
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Galyanoff 24.02.2012 16:45
Цитирую Сергей11:
Здравствуйте скажите пожалуйста как изменить фон только одного модуля?

Сергей11, выше пост читайте. Создаете такой класс, и в модуле потом прописываете суффикс, суффикс из примера выше будет: _qwer
Ответить | Ответить с цитатой | Цитировать
0 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Юрий 16.11.2011 10:36
подскажите как мне пришить модуль к CSS, делаю так: суффикс "1" без пробела, позиция debug, template.css

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

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

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

Где _qwer и есть твой суффикс (который ты задаешь в модуле).... Только пробел снизу поставь и в CSS и в Юмле. Почему- то только так робит сцуко....
Ответить | Ответить с цитатой | Цитировать
-2 # RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Вадим 21.10.2011 01:20
Обьясните идиоту :-)
А зачем нужен пример? Если он не упоминается в суффиксе.
Я уже неделю бьюсь, чтобы изменить модуль, результат пока равен нулю...
Ответить | Ответить с цитатой | Цитировать
-2 # RE: RE: Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.Вадим 21.10.2011 01:22
Цитирую Вадим:
Обьясните идиоту :-)
А зачем нужен пример? Если он не упоминается в суффиксе.
Я уже неделю бьюсь, чтобы изменить модуль, результат пока равен нулю...

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

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

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


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


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

Вверх