Joomla суффикс css класса модуля joomla

Суффикс css класса модуля — фишка cms-joomla

Суффикс css класса модуля joomla прекрасный инструмент оформления внешнего вида любого модуля движка. По сути, это дополнение собственного класса к уже имеющемуся дефолтному.

Как это работает на практике, смотрите в этом видео.

Эта отличная возможность не редактировать оригинальные стили модуля, а лишь добавлять свои, не нарушая всей структуры. Вообще cms-joomla славится такими «примочками» и относятся они не только к модулям, но так же и меню, и к отдельно взятой странице.

Во всех случаях у нас есть прекрасная возможность придать свое уникальное оформление отличное от оригинального.

Суффикс css класса модуля в основном используют администраторы разбирающиеся более, менее в свойствах css. Это похоже на альтернативный макет только намного проще.

Как это работает на практике, сейчас разберем.

В любом модуле есть дополнительные настройки в которых есть специальное поле суффикс css класса модуля. В это поле необходимо записать любое придуманное название класса, желательно несущее смысловую нагрузку.

Лучше тестировать на базовых шаблонах системы, где известны практически все классы. Это даст возможность правильно оценить работу, которую в последствии можно перенести на работающий шаблон сайта.

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

Я создал два одинаковых html-модуля. К одному добавил суффикс css «box1», к другому «box2»

В таблице стилей шаблона добавил свойства для обеих вариантов.

Синий фон и белый шрифт

Результат на скриншоте.

Во втором случае фон черный, а шрифт так же оставил белый.

При использовании редактора joomla, так же можно задавать разные стили отображения для html-модуля. Но важно учитывать и другие свойства, например внутренний отступ. Если такой отступ есть, а он почти всегда присутствует, то и стили заданные в редакторе будут распространяться только в рамках такого отступа.

Другими словами, чтобы задать фон с помощью редактора, он будет только до границы отступа, что не очень красиво.

Поэтому суффикс css класса модуля лучше подходит для оформления блоков на joomla-сайте. Это относится не только к последним версиям joomla, но и к версиям 2.5.

Теперь рассмотрим вариант когда оформленный блок (модуль) перемещается из одной позиции, в другую. Как при этом ведут себя стили.

Суффикс css класса модуля в разных позициях шаблона

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

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

Для правого сайтбара в шаблоне protostar — один класс (well). Для левого — другой, для других позиций вообще может не быть никакого класса.

По этой причине перемещая модули с одной позиции в другую, могут изменяться и их стили. Например если модуль box1, где мы применяли синий фон, перенести в левую позицию, то все стили исчезнут, и фон будет белым.

Как исправить такую ситуацию?

Для этого в joomla тоже есть «секретная» кнопка, которая находится в тех же дополнительных параметрах в поле «стиль модуля».

В выпадающем списке можно выбрать подходящий вариант. Если в правой позиции был класс well, значит нужно выбрать именно его. В этом случае все стили сохранятся и модуль снова станет синим.

Это далеко не все секреты cms-joomla, которые помогают грамотно и эффективно администрировать систему.

Чаще посещайте рубрику уроки joomla чтобы узнавать о других секретах популярного движка.

Суффикс класса модуля в Joomla или как сделать модуль уникальным

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

Как известно, в основе любой работы лежит четко сформулированное задание. Например, ваш клиент заказал вам наделить модули правой колонки такими особенностями:

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

Схематично это будет иметь примерно такой вид:

Если новичок веб-мастер, услышав такое задание, будет в замешательстве, то опытный разработчик сайтов, который умеет использовать CSS-суффиксы, быстро с ним справится.

Рассмотрим на примере стандартного Joomla-шаблона версии 1.7.

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

Несколько слов о CSS-классах

Если вы совсем не знаете, что такое CSS, то эта информация для вас, однако если вы уже работали с суффиксами класса модулей, то можете пропустить эту информацию. Чтобы понять, что собой представляет CSS, разберем понятия CSS-стиля (свойства) и CSS-класса.

CSS-стиль является минимальной единицей CSS. Это цвет или размер шрифта, позиционирование или рамка.
CSS-класс представляет собой контейнер этих стилей.

Рассмотрим на примере.

Мы имеем html-блок DIV:

Перед нами стоит задача изменить шрифт в этом блоке на 20, а его цвет – на красный. Чтобы это сделать, нужно ввести в блок атрибут класса – «myclass».

У нас получилось создать класс CSS для блока, однако он пока не имеет стилей. Теперь нам необходимо добавить следующую строчку в любом CSS-файле, который подключен к макету.

Таким образом, мы добавили два CSS-стиля: color и font-size в класс. Теперь блок имеет текст 20 размера шрифта и красного цвета.

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

Как создать для модулей CSS-суффиксы

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

С помощью суффикс класса можно создать неограниченное количество классов для модуля. Первоначально модули объединены в класс moduletable. Однако следует учесть, что основной модульный класс зависит от стиля модульной позиции. Он легко поддается изменению и даже может отсутствовать. Для этих действий необходимо понимать принципы работы с системой Joomla, но сейчас мы говорим об использовании модульной стилизации исключительно в рамках CSS.

Давать названия новым модульным классам в поле CSS следует через пробел, что открывает доступ к множеству новых классов. Задавая цвет каждому модулю необходимо, чтобы эти модули обладали уникальным классом. Однако контуров и положений всего два, при этом цветов может быть много. Таким образом, для них необходимо использовать четыре класса, но следует обратить внимание на то, чтобы в рамках одного класса цвет не пересекался с контуром и положением. Это может повлечь за собой неприятности в форме зависимости цвета от контура и его положения.

Для начала нам нужно создать семь классов, каждый из которых будет отвечать цвету радуги.

Теперь нам необходимо создать два класса на каждый контур:

После чего следует добавить два класса для каждого положения:

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

Теперь нужно решить, какие суффиксы к какому модулю следует присвоить. Это не сложно. Обратим внимание на модули, изображенные на нижеприведенном скриншоте.

На этом подготовительная часть подошла к концу. Пользователю теперь нужно задать эти данные модулям. Главное, не забыть поставить пробел перед суффиксом, иначе он прикрепится к основному классу и будет имеет вид как «moduletablecolor1 squareblock normalpos».

Данное изображение демонстрирует, как правильно задать суффикс для модуля 1:

Когда вы задали все суффиксы, следует перейти к формированию стилей CSS. Для этого необходимо подобрать нужные стили, используя Firebug.

После этого можно насладиться результатом:

В конце статьи отметим, что система Joomla, начиная с 1.6 версии, обладает отличной гибкостью, которая позволяет работать с CSS и html, создавая самобытные и великолепные шаблоны.

Если что то не ясно давайте рассмотрим еще пример создания суффикса класса модуля в Joomla:

Этап первый. Как узнать где находится файл с CSS

Мы будем пользоваться в примере браузером Google Chrome, но по аналогии можно использовать и Safari для Linux, оперу или Firefox. Все дальнейшие действия мы будем проводить, используя только этот браузер.

Итак, по условиям нашей задачи у нас есть сайт. Нужно изменить цвет ссылок, соответственно, выяснить, где внести необходимые правки.

Выделяем любую ссылку на сайте. Кликаем правой кнопкой мышки и выбираем в контекстном меню пункт «Просмотр кода элемента». К слову говоря, в Ubuntu Linux название этого пункта будет звучать, как «Проверить элемент».

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

В нижней части экрана мы увидим HTML код сайта. Причем выделен будет именно тот фрагмент кода, который соответствует нашей выделенной ссылке.

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

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

Рассмотрим подробнее правую часть окна, где показаны стили CSS, а именно наведем мышку на правила, относящиеся к нашей ссылке.

Мы видим, что при наведении мышки напротив каждого правила появляются флажки.

Попробуем снять флажок напротив правила, которое отвечает за цвет ссылок и видим, что цвет ссылок на всем сайте изменился. На самом деле это не означает, что мы внесли какие-либо изменения. Просто-напросто браузер Google Chrome любезно показал, что было бы, если удалить данное правило из кода сайта. Второй полезный момент – это полная уверенность в том, что мы на правильном пути.

В общем- то, нам удалось выяснить: какое правило отвечает за требуемый элемент сайта. Осталось понять, где находится файл CSS, в который необходимо внести изменения, чтобы изменился цвет ссылки

Для этого обратим внимание на скромную серую ссылку вверху справа от правила CSS. Наведите на нее мышку и кликните правой кнопкой. В контекстном меню выбираем пункт «Open Link in New Window” (открыть ссылку в новом окне).

После чего наш файл будет открыт для чтения в новом окне браузера. Нас на данный момент интересует исключительно содержание адресной строки. Почему? Да потому что в окне браузера у нас нет возможности отредактировать файл. Мы сделаем это чуть позже, когда с помощью ФТП-менеджера зайдем на сервер, где хранится сайт и отредактируем файл, содержащий правила CSS.

Рассмотрим содержимое адресной строки:

Нас интересует только эта часть:

Именно здесь показан путь к файлу blue.css, в котором, как мы выяснили после непродолжительного расследования, необходимо производить изменения, чтобы сменить цвет нашей злосчастной ссылки.

Нам осталось открыть фтп-менеджер, зайти в каталог /templates/innovativelab/css/ и открыть на редактирование файл blue.css. В популярном менеджере Total Commander это можно сделать, выделив файл и нажав на клавиатуре клавишу F4

Чтобы быстрее найти необходимую строчку в длинном файле blue.css , введем в строку поиска текущее значение цвета нашей ссылки.

Меняем значение на то, что жизненно необходимо, сохраняем файл. Первый этап нашей работы выполнен!

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

Как создать модуль с уникальными стилями?

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

А ведь бывают ситуации, когда требуется создать модуль с внешне уникальным заголовком, шрифтом и так далее.

Что делать в таком случае? Необходимо создать отдельный стиль для модуля и определенным образом подключить его к нему. Чем мы с вами и займемся.

Давайте вернемся в наш браузер Google Chrome и выделим любой из модулей на сайте.

Далее отправимся в режим просмотра кода, как мы это делали ранее в эпизоде с изменением цвета ссылки. Рассмотрим рисунок, где ключевые моменты я обозначил красными стрелками.

Выше всех мы видим выделенный модуль. С этим вопросов нет. В окне с HTML кодом у нас есть возможность наблюдать тег DIV соответствующий началу нашего модуля.

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

Обратите внимание на правую часть, где мы видим набор правил CSS, начинающийся со слова «.module» . Это и есть самый настоящий класс, который содержит правила для модулей нашего сайта.

Классы необходимы, чтобы более точно, тонко и с наибольшим удобством создавать внешний вид сайта. Получается, что задав несколько несложных правил в одном блоке и обозначив их под именем «.module», мы получили набор правил, который можем применять неоднократно, что собственно и видно, просматривая код сайта: модули повторяются в левой колонке, и к каждому из них применяется один и тот же класс. А объявляется он знакомым нам тегом DIV />
Во всем этом распрекрасном явлении есть один минус. Каждый новый создаваемый из административной панели модуль будет отображаться на сайте аналогично предыдущему. В большинстве случаев это всех устраивает, но не сегодня и не нас с вами!

Вы уже наверно догадались, что необходимо создать новый класс. Но это полдела. Необходимо присвоить ему такое название, чтобы впоследствии была возможность вызвать его из административной панели Joomla.

Для начала скопируем содержимое класса «.module» в файле, который содержит CSS. Хочу обратить ваше внимание, что к классу относятся все правила, в которых присутствует имя «.module», поэтому

Если вы в своей работе пользуетесь программой «Блокнот», рекомендую еще одну копию ее открыть в новом окне.

Туда мы вставим только что скопированный текст.

Суффикс класса модуля

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

Если вы однажды совершали праздную прогулку по «админке» Joomla, то наверняка обратили внимание на подозрительное в своей непонятности текстовое поле «Суффикс класса модуля».

Наша задача в данный момент – создать самый настоящий «Суффикс класса модуля» и впоследствии применить его к своему модулю.

Для этого возвращаемся в наш текстовый редактор, а именно в то окно, куда мы вставили скопированный код CSS.

Я предлагаю новому классу дать имя: «module_new»

В этом имени «_new» и будет суффиксом класса модуля. Чтобы вручную не переименовывать весь код в Блокноте, воспользуемся замечательной функцией, которая присутствует в абсолютно каждом текстовом редакторе.

Нажимаем в программе Блокнот сочетание клавиш «CTRL»+ «H (в другом текстовом редакторе это сочетание может отличаться), после чего откроется окошко, где будет предложено произвести автозамену.

В текстовое поле «Что:» вводим: .module

В текстовом поле «Чем:» пишем: .module_new

Далее нажимаем кнопку «Заменить все».

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

Обращаем внимание на правило:

margin: -4px -1px 5px;

font: bold 14px Arial, Helvetica, sans-serif;

Изменим его размер и цвет. В результате должно получиться:

margin: -4px -1px 5px;

font: bold 16px Arial, Helvetica, sans-serif;

Осталось его скопировать и вставить в уже знакомый нам файл blue.css. Сохраняем его и заходим в административную панель Joomla

Создадим тестовый модуль, которому присвоим одноименный заголовок. Модуль создадим, как произвольный код.

При создании модуля мы должны обратить внимание на текстовое поле «суффикс класса модуля»

Мы помним, что в нашем случае суффикс класса модуля – это: «_new», значит и вписываем этот набор символов в текстовое поле.

Не забудем включить не только модуль, но и заголовок для публикации, ибо, помним, что изменения в нашем коде касаются именно его.

После всех вышеуказанных действий нажимаем кнопку «Сохранить» в правом верхнем углу и отправляемся на сайт смотреть результаты нашей работы:

Результаты нас более чем радуют. Мы видим модуль, где заголовок отличается по цвету и размеру. Значит, мы справились с задачей.

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

Суффикс класса модуля или как сделать каждый модуль Joomla уникальным.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• модуль1 – color1squareblock normalpos
• модуль2 – color2roundblockleftpos
• модуль3 – color3squareblock normalpos
• модуль4 – color4roundblockleftpos
• модуль5 – color5squareblock normalpos
• модуль6 – color6roundblockleftpos
• модуль7 – color7squareblock normalpos

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

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

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

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

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