«Суффикс 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.
Рассмотрим содержимое адресной строки:
http://site.ru/templates/innovativelab/css/blue.css
Нас интересует только эта часть:
/templates/innovativelab/css/blue.css
Именно здесь показан путь к файлу blue.css, в котором, как мы выяснили после непродолжительного расследования, необходимо производить изменения, чтобы сменить цвет нашей злосчастной ссылки.
Нам осталось открыть фтп-менеджер, зайти в каталог /templates/innovativelab/css/ и открыть на редактирование файл blue.css. В популярном менеджере Total Commander это можно сделать, выделив файл и нажав на клавиатуре клавишу F4
Чтобы быстрее найти необходимую строчку в длинном файле blue.css , введем в строку поиска текущее значение цвета нашей ссылки.
Меняем значение на то, что жизненно необходимо, сохраняем файл. Первый этап нашей работы выполнен!
Мы узнали, где находится наш файл с таблицами стилей и выяснили, как отыскать нужное правило, чтобы его отредактировать.
Как создать модуль с уникальными стилями?
Главная проблема системы управления контентом, в том, что весь ее дизайн построен на шаблоне - специальном наборе правил, в которых прописано: как должен выглядеть каждый элемент сайта. Это вносит некоторую унифицированность.
А ведь бывают ситуации, когда требуется создать модуль с внешне уникальным заголовком, шрифтом и так далее.
Что делать в таком случае? Необходимо создать отдельный стиль для модуля и определенным образом подключить его к нему. Чем мы с вами и займемся.
Давайте вернемся в наш браузер Google Chrome и выделим любой из модулей на сайте.
Далее отправимся в режим просмотра кода, как мы это делали ранее в эпизоде с изменением цвета ссылки. Рассмотрим рисунок, где ключевые моменты я обозначил красными стрелками.
Выше всех мы видим выделенный модуль. С этим вопросов нет. В окне с HTML кодом у нас есть возможность наблюдать тег DIV class= «module», соответствующий началу нашего модуля.
Вот мы плавно подошли к понятию класс в CSS, который по большому счету в рамках статьи физически не рассмотреть. Несмотря на это, я все-таки сделаю отчаянную попытку расшифровать понятие класс в нескольких словах.
Обратите внимание на правую часть, где мы видим набор правил CSS, начинающийся со слова «.module» . Это и есть самый настоящий класс, который содержит правила для модулей нашего сайта.
Классы необходимы, чтобы более точно, тонко и с наибольшим удобством создавать внешний вид сайта. Получается, что задав несколько несложных правил в одном блоке и обозначив их под именем «.module», мы получили набор правил, который можем применять неоднократно, что собственно и видно, просматривая код сайта: модули повторяются в левой колонке, и к каждому из них применяется один и тот же класс. А объявляется он знакомым нам тегом DIV class= «module»
Во всем этом распрекрасном явлении есть один минус. Каждый новый создаваемый из административной панели модуль будет отображаться на сайте аналогично предыдущему. В большинстве случаев это всех устраивает, но не сегодня и не нас с вами!
Вы уже наверно догадались, что необходимо создать новый класс. Но это полдела. Необходимо присвоить ему такое название, чтобы впоследствии была возможность вызвать его из административной панели Joomla.
Для начала скопируем содержимое класса «.module» в файле, который содержит CSS. Хочу обратить ваше внимание, что к классу относятся все правила, в которых присутствует имя «.module», поэтому
Если вы в своей работе пользуетесь программой «Блокнот», рекомендую еще одну копию ее открыть в новом окне.
Туда мы вставим только что скопированный текст.
Суффикс класса модуля
Настало время присвоить нашему классу имя. Главный нюанс заключается в том, что оно должно быть таким, чтобы обратиться к нему из административной панели Joomla.
Если вы однажды совершали праздную прогулку по «админке» Joomla, то наверняка обратили внимание на подозрительное в своей непонятности текстовое поле «Суффикс класса модуля».
Наша задача в данный момент – создать самый настоящий «Суффикс класса модуля» и впоследствии применить его к своему модулю.
Для этого возвращаемся в наш текстовый редактор, а именно в то окно, куда мы вставили скопированный код CSS.
Я предлагаю новому классу дать имя: «module_new»
В этом имени «_new» и будет суффиксом класса модуля. Чтобы вручную не переименовывать весь код в Блокноте, воспользуемся замечательной функцией, которая присутствует в абсолютно каждом текстовом редакторе.
Нажимаем в программе Блокнот сочетание клавиш «CTRL»+ «H (в другом текстовом редакторе это сочетание может отличаться), после чего откроется окошко, где будет предложено произвести автозамену.
В текстовое поле «Что:» вводим: .module
В текстовом поле «Чем:» пишем: .module_new
Далее нажимаем кнопку «Заменить все».
После чего сможем удовлетворенно наблюдать, что код изменился. Настало время внести свои изменения. Предлагаю изменить заголовок модуля, сделать его чуть больше нежели в стандартных модулях.
Обращаем внимание на правило:
.module_new h3{
margin: -4px -1px 5px;
padding-left:8px;
text-transform: uppercase;
font: bold 14px Arial, Helvetica, sans-serif;
}
Изменим его размер и цвет. В результате должно получиться:
.module_new h3{
margin: -4px -1px 5px;
padding-left:8px;
text-transform: uppercase;
font: bold 16px Arial, Helvetica, sans-serif;
color: #CC0000;
}
Осталось его скопировать и вставить в уже знакомый нам файл blue.css. Сохраняем его и заходим в административную панель Joomla
Создадим тестовый модуль, которому присвоим одноименный заголовок. Модуль создадим, как произвольный код.
При создании модуля мы должны обратить внимание на текстовое поле «суффикс класса модуля»
Мы помним, что в нашем случае суффикс класса модуля – это: «_new», значит и вписываем этот набор символов в текстовое поле.
Не забудем включить не только модуль, но и заголовок для публикации, ибо, помним, что изменения в нашем коде касаются именно его.
После всех вышеуказанных действий нажимаем кнопку «Сохранить» в правом верхнем углу и отправляемся на сайт смотреть результаты нашей работы:
Результаты нас более чем радуют. Мы видим модуль, где заголовок отличается по цвету и размеру. Значит, мы справились с задачей.
Подведем итоги: мы узнали, что такое класс в CSS, а также научились применять суффикс класса модуля. Нельзя не отметить знакомство с мощным инструментом браузера Google Chrome, который позволяет не только просмотреть код, но и выяснить: где находится так нужный нам файл CSS.
Как известно, в основе любой работы лежит четко сформулированное задание. Например, ваш клиент заказал вам наделить модули правой колонки такими особенностями:
1. Заголовки и рамки должны быть выполнены в цветах радуги;
2. Модули должны чередоваться между скругленными и прямыми углами;
3. Они должны находиться друг под другом, чередуясь при небольшом сдвиге в левую сторону.
Схематично это будет иметь примерно такой вид:
Если новичок веб-мастер, услышав такое задание, будет в замешательстве, то опытный разработчик сайтов, который умеет использовать CSS-суффиксы, быстро с ним справится.
Рассмотрим на примере стандартного Joomla-шаблона версии 1.7.
Для получения необходимого числа модулей мы добавили несколько новых простых модулей html. После того, как они были созданы и опубликованы, внешний вид сайта изменился.
Несколько слов о CSS-классах
Если вы совсем не знаете, что такое CSS, то эта информация для вас, однако если вы уже работали с суффиксами класса модулей, то можете пропустить эту информацию. Чтобы понять, что собой представляет CSS, разберем понятия CSS-стиля (свойства) и CSS-класса.
CSS-стиль является минимальной единицей CSS. Это цвет или размер шрифта, позиционирование или рамка.
CSS-класс представляет собой контейнер этих стилей.
Рассмотрим на примере.
Мы имеем html-блок DIV:
<div>пример</div>
Перед нами стоит задача изменить шрифт в этом блоке на 20, а его цвет – на красный. Чтобы это сделать, нужно ввести в блок атрибут класса – «myclass».
<div class="myclass">пример</div>
У нас получилось создать класс CSS для блока, однако он пока не имеет стилей. Теперь нам необходимо добавить следующую строчку в любом CSS-файле, который подключен к макету.
.myclass{font-size:20pt; color: red;}
Таким образом, мы добавили два CSS-стиля: color и font-size в класс. Теперь блок имеет текст 20 размера шрифта и красного цвета.
Если вы решили серьезно и долго заниматься разработкой веб-ресурсов, то неплохо было бы приобрести учебник по CSS и html, поскольку данные технологии лежат в основе любой работы с веб-ресурсами и позволяют сэкономить много времени.
Как создать для модулей CSS-суффиксы
Перед началом работы следует понять сходства и отличия внешнего вида ваших модулей. Естественно, в качестве отличий можно назвать разные контуры цветов, положения и сами цвета. Сходство же заключается в повторяемости некоторых контуров и их положений.
С помощью суффикс класса можно создать неограниченное количество классов для модуля. Первоначально модули объединены в класс moduletable. Однако следует учесть, что основной модульный класс зависит от стиля модульной позиции. Он легко поддается изменению и даже может отсутствовать. Для этих действий необходимо понимать принципы работы с системой Joomla, но сейчас мы говорим об использовании модульной стилизации исключительно в рамках CSS.
Давать названия новым модульным классам в поле CSS следует через пробел, что открывает доступ к множеству новых классов. Задавая цвет каждому модулю необходимо, чтобы эти модули обладали уникальным классом. Однако контуров и положений всего два, при этом цветов может быть много. Таким образом, для них необходимо использовать четыре класса, но следует обратить внимание на то, чтобы в рамках одного класса цвет не пересекался с контуром и положением. Это может повлечь за собой неприятности в форме зависимости цвета от контура и его положения.
Для начала нам нужно создать семь классов, каждый из которых будет отвечать цвету радуги.
Красный – color1;
Оранжевый – color2;
Желтый – color3;
Зеленый – color4;
Голубой – color5;
Синий – color6;
Фиолетовый – color7.
Оранжевый – color2;
Желтый – color3;
Зеленый – color4;
Голубой – color5;
Синий – color6;
Фиолетовый – color7.
Теперь нам необходимо создать два класса на каждый контур:
Квадратный контур – squareblock;
Контур, имеющий скругленные углы – roundblock.
Контур, имеющий скругленные углы – roundblock.
После чего следует добавить два класса для каждого положения:
Модуль в центре – normalpos;
Модуль со сдвигом влево – leftpos.
Модуль со сдвигом влево – leftpos.
Можно было также объединить пункты два и три, чтобы создать не четыре класса, а два. Результат остался бы тем же, что и на изображении, однако мы не получили бы сдвинутый в левую сторону квадратный блок с помощью простого изменения суффикса. Чтобы обеспечить модулям гибкость, нам пришлось разделить сдвиг и контур на разные классы.
Теперь нужно решить, какие суффиксы к какому модулю следует присвоить. Это не сложно. Обратим внимание на модули, изображенные на нижеприведенном скриншоте.
– color1 squareblock normalpos (Модуль 1);
– color2 roundblock leftpos (Модуль 2);
– color3 squareblock normalpos (Модуль 3);
– color4 roundblock leftpos (Модуль 4);
– color5 squareblock normalpos (Модуль 5);
– color6 roundblock leftpos (Модуль 6);
- color7 squareblock normalpos (Модуль 7).
– color2 roundblock leftpos (Модуль 2);
– color3 squareblock normalpos (Модуль 3);
– color4 roundblock leftpos (Модуль 4);
– color5 squareblock normalpos (Модуль 5);
– color6 roundblock leftpos (Модуль 6);
- color7 squareblock normalpos (Модуль 7).
На этом подготовительная часть подошла к концу. Пользователю теперь нужно задать эти данные модулям. Главное, не забыть поставить пробел перед суффиксом, иначе он прикрепится к основному классу и будет имеет вид как «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 версии, обладает отличной гибкостью, которая позволяет работать с 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.
Рассмотрим содержимое адресной строки:
http://site.ru/templates/innovativelab/css/blue.css
Нас интересует только эта часть:
/templates/innovativelab/css/blue.css
Именно здесь показан путь к файлу blue.css, в котором, как мы выяснили после непродолжительного расследования, необходимо производить изменения, чтобы сменить цвет нашей злосчастной ссылки.
Нам осталось открыть фтп-менеджер, зайти в каталог /templates/innovativelab/css/ и открыть на редактирование файл blue.css. В популярном менеджере Total Commander это можно сделать, выделив файл и нажав на клавиатуре клавишу F4
Чтобы быстрее найти необходимую строчку в длинном файле blue.css , введем в строку поиска текущее значение цвета нашей ссылки.
Меняем значение на то, что жизненно необходимо, сохраняем файл. Первый этап нашей работы выполнен!
Мы узнали, где находится наш файл с таблицами стилей и выяснили, как отыскать нужное правило, чтобы его отредактировать.
Как создать модуль с уникальными стилями?
Главная проблема системы управления контентом, в том, что весь ее дизайн построен на шаблоне - специальном наборе правил, в которых прописано: как должен выглядеть каждый элемент сайта. Это вносит некоторую унифицированность.
А ведь бывают ситуации, когда требуется создать модуль с внешне уникальным заголовком, шрифтом и так далее.
Что делать в таком случае? Необходимо создать отдельный стиль для модуля и определенным образом подключить его к нему. Чем мы с вами и займемся.
Давайте вернемся в наш браузер Google Chrome и выделим любой из модулей на сайте.
Далее отправимся в режим просмотра кода, как мы это делали ранее в эпизоде с изменением цвета ссылки. Рассмотрим рисунок, где ключевые моменты я обозначил красными стрелками.
Выше всех мы видим выделенный модуль. С этим вопросов нет. В окне с HTML кодом у нас есть возможность наблюдать тег DIV class= «module», соответствующий началу нашего модуля.
Вот мы плавно подошли к понятию класс в CSS, который по большому счету в рамках статьи физически не рассмотреть. Несмотря на это, я все-таки сделаю отчаянную попытку расшифровать понятие класс в нескольких словах.
Обратите внимание на правую часть, где мы видим набор правил CSS, начинающийся со слова «.module» . Это и есть самый настоящий класс, который содержит правила для модулей нашего сайта.
Классы необходимы, чтобы более точно, тонко и с наибольшим удобством создавать внешний вид сайта. Получается, что задав несколько несложных правил в одном блоке и обозначив их под именем «.module», мы получили набор правил, который можем применять неоднократно, что собственно и видно, просматривая код сайта: модули повторяются в левой колонке, и к каждому из них применяется один и тот же класс. А объявляется он знакомым нам тегом DIV class= «module»
Во всем этом распрекрасном явлении есть один минус. Каждый новый создаваемый из административной панели модуль будет отображаться на сайте аналогично предыдущему. В большинстве случаев это всех устраивает, но не сегодня и не нас с вами!
Вы уже наверно догадались, что необходимо создать новый класс. Но это полдела. Необходимо присвоить ему такое название, чтобы впоследствии была возможность вызвать его из административной панели Joomla.
Для начала скопируем содержимое класса «.module» в файле, который содержит CSS. Хочу обратить ваше внимание, что к классу относятся все правила, в которых присутствует имя «.module», поэтому
Если вы в своей работе пользуетесь программой «Блокнот», рекомендую еще одну копию ее открыть в новом окне.
Туда мы вставим только что скопированный текст.
Суффикс класса модуля
Настало время присвоить нашему классу имя. Главный нюанс заключается в том, что оно должно быть таким, чтобы обратиться к нему из административной панели Joomla.
Если вы однажды совершали праздную прогулку по «админке» Joomla, то наверняка обратили внимание на подозрительное в своей непонятности текстовое поле «Суффикс класса модуля».
Наша задача в данный момент – создать самый настоящий «Суффикс класса модуля» и впоследствии применить его к своему модулю.
Для этого возвращаемся в наш текстовый редактор, а именно в то окно, куда мы вставили скопированный код CSS.
Я предлагаю новому классу дать имя: «module_new»
В этом имени «_new» и будет суффиксом класса модуля. Чтобы вручную не переименовывать весь код в Блокноте, воспользуемся замечательной функцией, которая присутствует в абсолютно каждом текстовом редакторе.
Нажимаем в программе Блокнот сочетание клавиш «CTRL»+ «H (в другом текстовом редакторе это сочетание может отличаться), после чего откроется окошко, где будет предложено произвести автозамену.
В текстовое поле «Что:» вводим: .module
В текстовом поле «Чем:» пишем: .module_new
Далее нажимаем кнопку «Заменить все».
После чего сможем удовлетворенно наблюдать, что код изменился. Настало время внести свои изменения. Предлагаю изменить заголовок модуля, сделать его чуть больше нежели в стандартных модулях.
Обращаем внимание на правило:
.module_new h3{
margin: -4px -1px 5px;
padding-left:8px;
text-transform: uppercase;
font: bold 14px Arial, Helvetica, sans-serif;
}
Изменим его размер и цвет. В результате должно получиться:
.module_new h3{
margin: -4px -1px 5px;
padding-left:8px;
text-transform: uppercase;
font: bold 16px Arial, Helvetica, sans-serif;
color: #CC0000;
}
Осталось его скопировать и вставить в уже знакомый нам файл blue.css. Сохраняем его и заходим в административную панель Joomla
Создадим тестовый модуль, которому присвоим одноименный заголовок. Модуль создадим, как произвольный код.
При создании модуля мы должны обратить внимание на текстовое поле «суффикс класса модуля»
Мы помним, что в нашем случае суффикс класса модуля – это: «_new», значит и вписываем этот набор символов в текстовое поле.
Не забудем включить не только модуль, но и заголовок для публикации, ибо, помним, что изменения в нашем коде касаются именно его.
После всех вышеуказанных действий нажимаем кнопку «Сохранить» в правом верхнем углу и отправляемся на сайт смотреть результаты нашей работы:
Результаты нас более чем радуют. Мы видим модуль, где заголовок отличается по цвету и размеру. Значит, мы справились с задачей.
Подведем итоги: мы узнали, что такое класс в CSS, а также научились применять суффикс класса модуля. Нельзя не отметить знакомство с мощным инструментом браузера Google Chrome, который позволяет не только просмотреть код, но и выяснить: где находится так нужный нам файл CSS.