Joomla 3.x. Что такое суффикс класса модуля/страницы и как его использовать. Суффиксы модулей joomla 3
Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.
В Joomla есть один очень мощный инструмент стилизации, о котором многие не знают. Он называется «Суффикс CSS-класса модуля». Звучит страшно, особенно для новичков. Но понимая, как работает этот механизм, в сочетании со знанием CSS-стилей, можно отображать модули на странице так, так душе угодно. В этой статье я подробно расскажу про работу с CSS-суффиксом модулей, а также приведу пример его использования в Joomla 1.7.
Прежде всего стоит упомянуть, что суффикс класса модуля одинаково может применяться как в Joomla 1.7, так и в более ранних версиях CMS. Мы рассмотрим пример в Joomla 1.7, т.к. она уже достаточно стабильна, имеет много адаптированных расширений, да и просто нужно двигаться в ногу со временем .
Начнем с постановки задания. Предположим, что заказчик хочет, чтобы модули в правой колонках сайта имели следующие особенности:
1) располагались не друг под другом, а со сдвигом влево и чередованием;
2) чередовались между прямыми и скругленными углами;
3) заголовки модулей, как и рамки, обрамляющие их, должны быть в соответствии с цветами радуги.
Если представить всё это схематично, то получится что-то вроде:
На самом деле в такой задачке нет ничего особенного. С нынешними дизайнами она может казаться даже простой. Но если дать ее начинающему web-мастеру, то он как минимум впадет в ступор. Как же сделать в Joomla такое задание? Легко, если вы умеете использовать CSS-суффиксы модулей. Ниже разберем всё подробно.
Для примера я взял стандартный шаблон Joomla 1.7, который включен по умолчанию сразу после установки CMS.
Вот его пример:
Для того, чтобы получить достаточное количество модулей, пришлось добавить несколько новых. Все добавленные модули – модули простого html, или, проще говоря, обычные модули с текстом. После их создания и публикации сайт стал выглядеть следующим образом:
Немного о CSS-классах.
Для тех, кто совсем плохо представляет себе, что такое CSS, я решил написать этот параграф. Если вы имеете представление о том, что это, смело пропускайте параграф. Для понимания данной статьи нужно представлять две вещи: что такое CSS-класс и CSS-стиль.
CSS-стиль(свойство) – минимальная единица CSS. Размер или цвет шрифта, рамка, позиционирование – всё это CSS-стили.
СSS-класс – это как бы контейнер стилей.
Пример:
У нас есть html-блок DIV:
| 1 | <div>пример</div> |
Мы хотим сделать текст в этом блоке 20 шрифтом и красным цветом. Для этого мы добавляет нашему блоку атрибут класса, например «myclass». В результате у нас получается:
| 1 | <div>пример</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 – модуль, сдвинутый влево.
Еще одно примечание: если точно следовать исходному заданию, второй и третий пункты мы могли объединить, т.е. создать не четыре, а только два класса. При этом результат получился бы такой же, как и на картинке, но мы уже не смогли бы простым изменением суффикса получить, например, квадратный блок, сдвинутый влево. Поэтому, для максимальной гибкости наших модулей, мы разделим контур и сдвиг по разным классам.
Теперь необходимо определиться с тем, какому модулю какие суффиксы будут присвоены. Это легко. Просто смотрим модули по картинке сверху вниз:
– модуль1 – color1 squareblock normalpos;
– модуль2 – color2 roundblock leftpos;
– модуль3 – color3 squareblock normalpos;
– модуль4 – color4 roundblock leftpos;
– модуль5 – color5 squareblock normalpos;
– модуль6 – color6 roundblock leftpos;
– модуль7 – color7 squareblock normalpos;
Вот и всё. Подготовительный этап завершен. Остается только задать всё это нашим модулям. Перед суффиксом должен быть пробел, иначе он приклеется к базовому классу, т.е. будет выглядеть, как «moduletablecolor1 squareblock normalpos».
На рисунке показано, как задается суффикс для модуля1:
После того, как все суффиксы заданы, можно переходить к формированию 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 | /* Задаем цвета рамок !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 h4 span{color:#D2232A;} /* Задаем красный цвет */ .moduletable.color2 h4 span{color:#F7941E;} /* Задаем оранжевый цвет */ .moduletable.color3 h4 span{color:#FFDE00;} /* Задаем желтый цвет */ .moduletable.color4 h4 span{color:#40AE49;} /* Задаем зеленый цвет */ .moduletable.color5 h4 span{color:#00B2EB;} /* Задаем голубой цвет */ .moduletable.color6 h4 span{color:#23408F;} /* Задаем синий цвет */ .moduletable.color7 h4 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%;} /* сдвигаем модуль немного влево. */ |
После этого любуемся результатом:
В заключении хочу сказать, что Joomla имеет хорошую гибкость, особенно, начиная с версии 1.6. Имея навыки работы с HTML и CSS, а также понимая структуру Joomla, можно создавать для нее очень красивые разнообразные шаблоны.
Источник
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
saitcreate.blogspot.com
Joomla 3.x. Что такое суффикс класса модуля/страницы и как его использовать
Наша команда поддержки готова представить вам новый туториал, который покажет, что такое суффикс класса модуля/страницы и как его использовать в шаблонах Joomla.
Joomla 3.x. Что такое суффикс класса модуля/страницы и как его использовать
Не все классы CSS в шаблонах уникальны. Вам может понадобиться добавить уникальное CSS правило для одного модуля /страницы.
Добавление суффикса класса для модуля:
Для начала, перейдите в Расширения (Extensions) > Менеджер Модулей (Module manager). Откройте необходимый модуль.
Перейдите вРасширенные настройки (Advanced Settings), добавьте Суффикс класса модуля (Module Class Suffix):
Нажмите Сохранить (Save) после того как вы все сделали.
Теперь, вы можете добавить CSS правило. Вам необходимо будет использовать: developer tools.
Так как теперь у вас есть уникальный класс CSS, вы можете добавить к этому модулю уникальное CSS правило, специфическое только для него:
Добавление класса страницы (Adding Page Class)
Страница класса CSS может быть добавлена похожим способом. Перейдите в Меню (Menus) > Главное меню (Main menu), откройте необходимый пункт меню.
Вы увидите вкладку Отображение старницы (Page display) , добавьте ваш CSS класс в поле Класс страницы (Page class) :
Так как теперь у вас есть уникальный CSS класс, вы можете добавлять CSS правила, которые будут относиться только к этой странице.
Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже:
Joomla 3.x. Что такое суффикс класса модуля/страницы и как его использовать
info.template-help.com
Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.
В этой статье я подробно расскажу про работу с CSS-суффиксом модулей, а также приведу пример его использования в Joomla.
В Joomla есть один очень мощный инструмент стилизации, о котором многие не знают. Он называется «Суффикс CSS-класса модуля». Звучит страшно, особенно для новичков. Но понимая, как работает этот механизм, в сочетании со знанием CSS-стилей, можно отображать модули на странице так, так душе угодно. В этой статье я подробно расскажу про работу с CSS-суффиксом модулей, а также приведу пример его использования в Joomla.
Прежде всего стоит упомянуть, что суффикс класса модуля одинаково может применяться как в Joomla 3, так и в более ранних версиях CMS. Мы рассмотрим пример в Joomla 2.5, т.к. она уже достаточно стабильна, имеет много адаптированных расширений, да и просто нужно двигаться в ногу со временем :-).
Начнем с постановки задания. Предположим, что заказчик хочет, чтобы модули в правой колонках сайта имели следующие особенности:
- Располагались не друг под другом, а со сдвигом влево и чередованием;
- Чередовались между прямыми и скругленными углами;
- Заголовки модулей, как и рамки, обрамляющие их, должны быть в соответствии с цветами радуги.
Если представить всё это схематично, то получится что-то вроде:
Для примера я взял стандартный шаблон Joomla, который включен по умолчанию сразу после установки CMS.
Вот его пример:
Для того, чтобы получить достаточное количество модулей, пришлось добавить несколько новых. Все добавленные модули – модули простого html, или, проще говоря, обычные модули с текстом. После их создания и публикации сайт стал выглядеть следующим образом:
Немного о CSS-классах.
Для тех, кто совсем плохо представляет себе, что такое CSS, я решил написать этот параграф. Если вы имеете представление о том, что это, смело пропускайте параграф. Для понимания данной статьи нужно представлять две вещи: что такое CSS-класс и CSS-стиль.
CSS-стиль(свойство) – минимальная единица CSS. Размер или цвет шрифта, рамка, позиционирование – всё это CSS-стили.
СSS-класс – это как бы контейнер стилей.
Пример:
У нас есть html-блок DIV:
Мы хотим сделать текст в этом блоке 20 шрифтом и красным цветом. Для этого мы добавляет нашему блоку атрибут класса, например «myclass». В результате у нас получается:
<div>пример</div>Сейчас мы создали CSS-класс для блока. Но он пока пуст(не содержит стилей).
Теперь в любом, подключенном к шаблону CSS-файле, мы добавляем строчку:
.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 – модуль, сдвинутый влево
Еще одно примечание: если точно следовать исходному заданию, второй и третий пункты мы могли объединить, т.е. создать не четыре, а только два класса. При этом результат получился бы такой же, как и на картинке, но мы уже не смогли бы простым изменением суффикса получить, например, квадратный блок, сдвинутый влево. Поэтому, для максимальной гибкости наших модулей, мы разделим контур и сдвиг по разным классам.
Теперь необходимо определиться с тем, какому модулю какие суффиксы будут присвоены. Это легко. Просто смотрим модули по картинке сверху вниз:
- модуль1 – color1 squareblock normalpos
- модуль2 – color2 roundblock leftpos
- модуль3 – color3 squareblock normalpos
- модуль4 – color4 roundblock leftpos
- модуль5 – color5 squareblock normalpos
- модуль6 – color6 roundblock leftpos
- модуль7 – color7 squareblock normalpos
Вот и всё. Подготовительный этап завершен. Остается только задать всё это нашим модулям. Перед суффиксом должен быть пробел, иначе он приклеется к базовому классу, т.е. будет выглядеть, как «moduletablecolor1squareblock normalpos».
На рисунке показано, как задается суффикс для модуля1:
После того, как все суффиксы заданы, можно переходить к формированию CSS-стилей. С помощью Firebug подбираем необходимые стили:
/* Задаем цвета рамок !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 h4 span{color:#D2232A;} /* Задаем красный цвет */ .moduletable.color2 h4 span{color:#F7941E;} /* Задаем оранжевый цвет */ .moduletable.color3 h4 span{color:#FFDE00;} /* Задаем желтый цвет */ .moduletable.color4 h4 span{color:#40AE49;} /* Задаем зеленый цвет */ .moduletable.color5 h4 span{color:#00B2EB;} /* Задаем голубой цвет */ .moduletable.color6 h4 span{color:#23408F;} /* Задаем синий цвет */ .moduletable.color7 h4 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%;} /* сдвигаем модуль немного влево. */После этого любуемся результатом:
В заключении хочу сказать, что Joomla имеет хорошую гибкость в оформлении. Имея навыки работы с HTML и CSS, а также понимая структуру Joomla, можно создавать для нее очень красивые разнообразные шаблоны.
Об авторе
Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.
Понравилась статья? Сохраните себе на стену:
Вконтакте
Одноклассники
Google+
Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.wedal.ru
Joomla 3.x. Что такое суффикс класса модуля/страницы и как его использовать
Наша команда поддержки готова представить вам новый туториал, который покажет, что такое суффикс класса модуля/страницы и как его использовать в шаблонах Joomla.
Joomla 3.x. Что такое суффикс класса модуля/страницы и как его использовать
Не все классы CSS в шаблонах уникальны. Вам может понадобиться добавить уникальное CSS правило для одного модуля /страницы.
Добавление суффикса класса для модуля:
Для начала, перейдите в Расширения (Extensions) > Менеджер Модулей (Module manager). Откройте необходимый модуль.
Перейдите вРасширенные настройки (Advanced Settings), добавьте Суффикс класса модуля (Module Class Suffix):
Нажмите Сохранить (Save) после того как вы все сделали.
Теперь, вы можете добавить CSS правило. Вам необходимо будет использовать: developer tools.
Так как теперь у вас есть уникальный класс CSS, вы можете добавить к этому модулю уникальное CSS правило, специфическое только для него:
Добавление класса страницы (Adding Page Class)
Страница класса CSS может быть добавлена похожим способом. Перейдите в Меню (Menus) > Главное меню (Main menu), откройте необходимый пункт меню.
Вы увидите вкладку Отображение старницы (Page display) , добавьте ваш CSS класс в поле Класс страницы (Page class) :
Так как теперь у вас есть уникальный CSS класс, вы можете добавлять CSS правила, которые будут относиться только к этой странице.
Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже:
Joomla 3.x. Что такое суффикс класса модуля/страницы и как его использовать
www.templatemonster.com
Суффикс css класса модуля украшение любого шаблона
Суффикс css класса модуля joomla прекрасный инструмент оформления внешнего вида любого модуля движка. По сути, это дополнение собственного класса к уже имеющемуся дефолтному.
Как это работает на практике, смотрите в этом видео.
Эта отличная возможность не редактировать оригинальные стили модуля, а лишь добавлять свои, не нарушая всей структуры. Вообще cms-joomla славится такими «примочками» и относятся они не только к модулям, но так же и меню, и к отдельно взятой странице.
Во всех случаях у нас есть прекрасная возможность придать свое уникальное оформление отличное от оригинального.
Суффикс css класса модуля в основном используют администраторы разбирающиеся более, менее в свойствах css. Это похоже на альтернативный макет только намного проще.
Как это работает на практике, сейчас разберем.
В любом модуле есть дополнительные настройки в которых есть специальное поле суффикс css класса модуля. В это поле необходимо записать любое придуманное название класса, желательно несущее смысловую нагрузку.
Лучше тестировать на базовых шаблонах системы, где известны практически все классы. Это даст возможность правильно оценить работу, которую в последствии можно перенести на работающий шаблон сайта.
Допустим что нам нужны два модуля разного цвета, синий и черный. Если изменять уже готовые стили, то изменится внешний вид всех модулей. А при добавлении своего класса в поле суффикс css класса модуля, мы просто добавим свои свойства к этому классу.
Я создал два одинаковых html-модуля. К одному добавил суффикс css «box1», к другому «box2»
В таблице стилей шаблона добавил свойства для обеих вариантов.
Синий фон и белый шрифт
.box1 { background-color: #2D5881; color: #fff; }Результат на скриншоте.
Во втором случае фон черный, а шрифт так же оставил белый.
.box2 { background-color: #3D3D3D; color: #fff; }Результат.
При использовании редактора joomla, так же можно задавать разные стили отображения для html-модуля. Но важно учитывать и другие свойства, например внутренний отступ. Если такой отступ есть, а он почти всегда присутствует, то и стили заданные в редакторе будут распространяться только в рамках такого отступа.
Другими словами, чтобы задать фон с помощью редактора, он будет только до границы отступа, что не очень красиво.
Поэтому суффикс css класса модуля лучше подходит для оформления блоков на joomla-сайте. Это относится не только к последним версиям joomla, но и к версиям 2.5.
Теперь рассмотрим вариант когда оформленный блок (модуль) перемещается из одной позиции, в другую. Как при этом ведут себя стили.
Суффикс css класса модуля в разных позициях шаблона
Как правило, для разных модулей, которые расположены в разных позициях шаблона, применяются разные классы.
Редкий случай, когда все модули в разных позициях шаблона имеют одинаковый внешний вид. Чаще всего для каждого отдельно взятого блока, предусмотрено индивидуальное оформление.
Для правого сайтбара в шаблоне protostar — один класс (well). Для левого — другой, для других позиций вообще может не быть никакого класса.
По этой причине перемещая модули с одной позиции в другую, могут изменяться и их стили. Например если модуль box1, где мы применяли синий фон, перенести в левую позицию, то все стили исчезнут, и фон будет белым.
Как исправить такую ситуацию?
Для этого в joomla тоже есть «секретная» кнопка, которая находится в тех же дополнительных параметрах в поле «стиль модуля».
В выпадающем списке можно выбрать подходящий вариант. Если в правой позиции был класс well, значит нужно выбрать именно его. В этом случае все стили сохранятся и модуль снова станет синим.
Это далеко не все секреты cms-joomla, которые помогают грамотно и эффективно администрировать систему.
Чаще посещайте рубрику уроки joomla чтобы узнавать о других секретах популярного движка.
starting-constructor.ru
