Суфікс класу модуля в joomla або як створити свій унікальний модуль?

Як відомо, за зовнішній вигляд в сучасних сайтах відповідають каскадні таблиці стилів (CSS). Щоб змінити розмір шрифту, колір, відступ і інші численні параметри (правила) сторінки, досить поміняти ту чи іншу властивість у файлі CSS. Якщо код сайту створений вашими руками, то проблем не виникає. А що робити, якщо вас попросили внести зміни, а ви поняття не маєте, де знаходиться файл CSS. Тим більше що на одному сайті може використовуватися необмежену кількість файлів зі стилями, особливо якщо мова йде про систему управління контентом Joomla. Сьогодні ми навчимося знаходити місце розташування файлів зі стилями, орієнтуватися в їх вмісті, а також спробуємо освоїти зворотну операцію. Створимо модуль з унікальним стилем, де заголовок буде відрізнятися розміром шрифту і його кольором.

Ми вже писали про браузер Google Chrome, де дізналися: як його встановити і налаштувати для найпростішої роботи в мережі Інтернет. Сьогодні він стане одним з головних інструментів в нашій роботі. Всі подальші дії ми будемо проводити, використовуючи тільки цей браузер.

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

Виділяємо будь-яке посилання на сайті. Натискаємо правою кнопкою мишки і вибираємо в контекстному меню пункт «Перегляд коду елемента». До слова кажучи, в Ubuntu Linux назва цього пункту буде звучати, як «Перевірити елемент»

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

У нижній частині екрана ми побачимо HTML код сайту. Причому виділено буде саме той фрагмент коду, який відповідає нашій виділеної посиланням.

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

Відео: 12. Верстка верхнього і нижнього меню, модуль «Копірайт» - відеокурс: Шаблон Joomla від А до Я

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

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

Ми бачимо, що при наведенні мишки навпроти кожного правила з`являються прапорці.

Спробуємо зняти прапорець навпроти правила, яке відповідає за колір посилань і бачимо, що колір посилань на всьому сайті змінився. Насправді це не означає, що ми внесли певні зміни. Просто-напросто браузер Google Chrome люб`язно показав, що було б, якщо видалити дане правило з коду сайту. Другий корисний момент - це повна впевненість в тому, що ми на правильному шляху.

Загалом-то, нам вдалося з`ясувати: яке правило відповідає за необхідний елемент сайту. Залишилося зрозуміти, де знаходиться файл CSS, в який необхідно внести зміни, щоб змінився колір посилання

Для цього звернемо увагу на скромну сіру посилання вгорі праворуч від правила CSS. Наведіть на неї мишку і натисніть правою кнопкою. У контекстному меню вибираємо пункт «Open Link in New Windowrdquo- (відкрити посилання в новому вікні).

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

Розглянемо вміст адресного рядка:

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

Нас цікавить тільки ця частина:

/templates/innovativelab/css/blue.css

Саме тут показаний шлях до файлу blue.css, в якому, як ми з`ясували після нетривалого розслідування, необхідно вносити зміни, щоб змінити колір нашої злощасної посилання.

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

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

Відео: Іменування класів css

Міняємо значення на те, що життєво необхідно, зберігаємо файл. Перший етап нашої роботи виконано!

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

Головна проблема системи управління контентом, в тому, що весь її дизайн побудований на шаблоні - спеціальному наборі правил, в яких прописано: як повинен виглядати кожен елемент сайту. Це вносить деяку уніфікованість.

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

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

Давайте повернемося в наш браузер Google Chrome і виділимо будь-який з модулів на сайті.

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

Вище за всіх ми бачимо виділений модуль. З цим питань немає. У вікні з HTML кодом у нас є можливість спостерігати тег DIV class = "module», відповідний початку нашого модуля.

Ось ми плавно підійшли до поняття клас в CSS, який за великим рахунком в рамках статті фізично не розглянути. Незважаючи на це, я все-таки зроблю відчайдушну спробу розшифрувати поняття клас в декількох словах.

Зверніть увагу на праву частину, де ми бачимо набір правил CSS, що починається зі слова «.module». Це і є самий справжній клас, який містить правила для модулів нашого сайту.

Класи необхідні, щоб більш точно, тонко і з найбільшим зручністю створювати зовнішній вигляд сайту. Виходить, що задавши кілька нескладних правил в одному блоці і позначивши їх під ім`ям «.module», ми отримали набір правил, який можемо застосовувати неодноразово, що власне і видно, переглядаючи код сайту: модулі повторюються в лівій колонці, і до кожного з них застосовується один і той же клас. А оголошується він знайомим нам тегом DIV class = "module»

У всьому цьому прегарний явище є один мінус. Кожен новий створюваний з адміністративної панелі модуль буде відображатися на сайті аналогічно попередньому. У більшості випадків це всіх влаштовує, але не сьогодні і не нас з вами!

Ви вже напевно здогадалися, що необхідно створити новий клас. Але це ще півбіди. Необхідно присвоїти йому таку назву, щоб згодом була можливість викликати його з адміністративної панелі Joomla.

Для початку скопіюємо вміст класу «.module» в файлі, який містить CSS. Хочу звернути вашу увагу, що до класу відносяться всі правила, в яких присутня ім`я «.module», тому

Відео: Написання CSS

Якщо ви в своїй роботі користуєтеся програмою «Блокнот», рекомендую ще одну копію її відкрити в новому вікні.

Туди ми вставимо тільки що скопійований текст.

Настав час привласнити нашому класу ім`я. Головний нюанс полягає в тому, що воно повинно бути таким, щоб звернутися до нього з адміністративної панелі Joomla.

Якщо ви одного разу робили святкую прогулянку по «адмінки» Joomla, то напевно звернули увагу на підозрілу в своїй незрозумілості текстове поле «Суфікс класу модуля».

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

Для цього повертаємося в наш текстовий редактор, а саме в те вікно, куди ми вставили скопійований код CSS.

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

У цьому імені «_new» і буде суфіксом класу модуля. Щоб вручну НЕ перейменовувати весь код в Блокноті, скористаємося чудовою функцією, яка присутня в абсолютно кожному текстовому редакторі.

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

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

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

Відео: Виразні стилі оформлення Joomla модулів Beautiful CK

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

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

Звертаємо увагу на правило:

.module_new h3 {

margin: -4px -1px 5px;

padding-left: 8px;

text-transform: uppercase-

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

}

Змінимо його розмір і колір. В результаті має вийти:

.module_newh3 {

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.

Ймовірно, в кінці цього неоднозначного матеріалу у вас з`являться питання. Задавайте їх на форумі.

З повагою, Гоша Комп`ютерний