Главная Статьи Создание сайтов Суффикс класса модуля в Joomla или как создать свой уникальный модуль?
Суффикс класса модуля в Joomla или как создать свой уникальный модуль?
16.04.2011 16:59

Как известно, за внешний вид в современных сайтах отвечают каскадные таблицы стилей (CSS). Чтобы изменить размер шрифта, цвет, отступ и прочие многочисленные параметры (правила) страницы, достаточно поменять то или иное свойство в файле CSS. Если код сайта создан вашими руками, то проблем не возникает. А что делать, если вас попросили внести изменения, а вы понятия не имеете, где находится файл CSS. Тем более что на одном сайте может использоваться неограниченное количество файлов со стилями, особенно если речь идет о системе управления контентом Joomla. Сегодня мы научимся находить месторасположение файлов со стилями, ориентироваться в их содержимом, а также попробуем освоить обратную операцию. Создадим модуль с уникальным стилем, где заголовок будет отличаться размером шрифта и его цветом.

{mosloadposition debug}

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

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

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

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

0.png

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

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

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

1.png

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

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

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

2.png

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

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

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

3.png

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

4.png


 

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

http://yachaynik.ru/templates/innovativelab/css/blue.css

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

/templates/innovativelab/css/blue.css

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

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

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

5.png

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

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

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

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

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

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

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

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

6.png


 

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

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

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

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

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

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

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


 

7.png

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

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

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

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

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

8.png

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

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

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

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

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

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

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

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

9.png

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

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

.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», значит и вписываем этот набор символов в текстовое поле.

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

10.png

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

11.png


 

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

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

Вероятно, в конце этого неоднозначного материала у вас появятся вопросы. Задавайте их на форуме.

С уважением, Гоша Компьютерный

{mosloadposition debug}

Комментарии (8)Добавить комментарий
aleksandr-96
...
Автор: aleksandr-96, Июль 23, 2011
Здравствуйте, я не понимаю, почему если Вы уделяете такое большое внимание OC Linux, доля которого на рынке ОС менее 5% и не можете уделить внимание браузеру Safari, доля которого на рынке браузеров более 9%!!! А внимание уделяете хрому, в котором практически все функции сворованы и браузеров сафари, опера и мазила!!!!
Практически все функции хрома украдены у сафари (даже движок и эта функция проверки объекта!!!)
Скачайте Safari http://www.apple.com/safari/download/и, пожалуйста покажите чем хром лучше сафари. Если Вы не сможете найти превосходство хрома, то пожалуйста начните уделять в статьях внимание Safari
Гоша Компьютерный
...
Автор: Гоша Компьютерный, Июль 23, 2011
А я и разве сказал, что хром лучше сафари?) Просто в данной ситуации описана работа с хромом. Линуксу мы уделяем внимание потому что он бесплатный. А продукты Apple , мягко говоря, дороговаты для наших пользователей. Я что то не припоминаю версии Сафари под Линукс. А Гугль Хром при всех своих недостатках кроссплатформенный
aleksandr-96
...
Автор: aleksandr-96, Июль 23, 2011
А я не говорю, что обязательно надо покупать продукцию Apple. Ведь Safari бесплатен и у него есть версия для ос windows, да на линуксе его через эмулятор виндовс можно запустить.
Гоша Компьютерный
...
Автор: Гоша Компьютерный, Июль 23, 2011
Вы можете сами в блоге исправить этот изъян на нашем сайте и написать подробный обзор по сафари)
angolub
...
Автор: angolub, Декабрь 17, 2011
Все здорово, но вот с суффиксами - слишком много иносказаний-примеров. А если коротко - что же произошло?
-при размещении модуля мы указали в админке суффикс.
-в таблице стилей создали стиль с таким суффиксом, добавленным к стандартному
названию класса
Теперь все классы, где прописан этот суффикс, получат указанные правила? В админке ведь не указывается исходный класс?
А в тэге div как прописывать класс? Естественно, с суффиксом?
Гоша Компьютерный
...
Автор: Гоша Компьютерный, Декабрь 18, 2011
класс прописывается как обычно
div class=
прописывается полное имя класса
angolub
...
Автор: angolub, Декабрь 18, 2011
Спасибо, я уже понял чего не понял!
Sergiyss
...
Автор: Сергей11, Февраль 17, 2012
Здравствуйте! хочу изменить цвет только одного модуля сделал все так как описано в статье но не получилось в чем причина? http://www.mirohotnica.ru/

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

busy

Новые материалы на эту тему:
Также рекомендуем к прочтению:

Обновлено 30.06.2014 13:31
 


ТУЛЬСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ приглашает на обучение

rcpk.tsu.tula.ru