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

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

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

– модуль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 подбираем необходимые стили:

/* Задаем цвета рамок !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%;} /* сдвигаем модуль немного влево. */

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

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

Источник

Popularity: 1% [?]