Як додати суфікс css до модуля в joomla

1) Інструкція розрахована на новачків - тих, хто тільки почав освоювати джумла.
2) Вона написана для Joomla 1.0 (оскільки я працювала тільки з нею, і наскільки сильно відрізняється 1.5 - не знаю)






3) передбачається, що ви хоча б в загальних рисах уявляєте собі, що таке CSS (каскадні таблиці стилів) і вмієте їх використовувати на звичайних HTML-сторінках.

У всіх модулях Джумли - як встановлених, так і додаються, є опція "суфікс класу CSS". Вона дозволяє персоналізувати для модуля або статті контенту.

Я з необхідністю щось міняти зіткнулася з-за види списків в модулях - занадто великий зсув вліво робив їх непривабливими.

Чому саме суфікс? Адже якби ми писали CSS для звичайного сайту, то просто б зробили новий клас. По суті, ми це і робимо, додаючи суфікс - створюємо новий клас з новим ім'ям. Відмінність від звичайного HTML-сайту - що в текстах, що виводяться на екран цей клас прописуємо не ми, а програма Джумли. А ця програма так написана, що новий клас повинен називатися не абияк, а точно так само як старий - але з додаванням якогось тексту в кінці його імені.

Ім'я старого класу, тобто класу всіх модулів Джумли за замовчуванням - table.moduletable. Це клас, який визначає вид самої таблиці модуля. А є ще окремі записи в CSS файлі для його заголовка - table.moduletable th і для комірки таблиці всередині модуля - table.moduletable td.

Ось на основі їх ми і повинні створити свій індивідуальний стиль для модуля.

Отже, що робити?

Всі зміни зручніше вносити і тестувати на локальній копії сайту на Денвері. Тільки переконайтеся, що ви керуєте потрібний файл CSS - тобто що він лежить в папці вашого локального шаблону.

Крок 1. Йдемо в адмінку - модулі сайту, відкриваємо для редагування потрібний модуль. Додаємо будь суфікс - зручніше, коли він починається з подчерка або дефіса, щоб потім самим не плутатися. У нашому прикладі я додала _mylist.

Далі там же скасовуємо кешування або ставимо час кешу 0 - це дія необхідно на час налаштування стилю, інакше ви будете бачити кешированний модуль, а не результат внесених змін.







Дивимося на сайт. Нічого не змінилось? А з чого б йому змінюватися, якщо ми ще не зробили найважливіше - не додали новий клас в файл CSS стилів шаблону.

Крок 2. Йдемо в каталог папок джумли і знаходимо файл стилів. TEMPLATES - ВАШ ШАБЛОН - CSS - template_css.css.

Перше, що робимо перед усіма змінами (це стосується не тільки СSS, але і змін в будь-яких файлах, наприклад index.php шаблону) - зберігаємо копію файлу під іншим ім'ям, наприклад template_css.txt. Тепер, якщо щось раптом вийде не так, завжди можна повернутися до попереднього стану.

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

Спочатку треба в ньому знайти те місце, де визначається стиль модулів.

Воно виглядає так (наводжу приклад зі свого шаблону, в інших властивості будуть іншими, але шапка - селектор та ж сама, наприклад, table.moduletable.

Акуратно копіюємо весь цей шматок і вставляємо ще раз прямо під ним (в принципі можна в будь-яке місце файлу, але так зручніше - коли все про модулі в одному місці).

Навіщо копіювати? Але ж старий клас - просто .moduletable без жодних суфіксів - у вас теж повинен залишитися! Втім, якщо ви хочете змінити вид ВСІХ модулів сайту - то треба міняти властивості цього класу, а не заводити новий.

Далі до кожного селектору - для самого модуля, його заголовка і його осередки, додаємо свій суфікс - в точності той же, який ви проставили в налаштуваннях модуля в адмінці. У нашому прикладі це буде _mylist (раз в настройках я проставила з почерком, то і тут роблю точно так же) - див. Приклад нижче.

Все - ми створили новий клас! Тепер знущаємося над ним як хочемо і міняємо його властивості відповідно до глибоким дизайнерським задумом.

А ось непотрібні властивості можна прибрати або замінити. А також додати будь-які нові - для тегів всередині модуля, наприклад тега а чи ul і li

Код свого стилю для таблиць з суфіксом _mylist

З прикладу видно, що в новому класі можна не тільки змінити опис тих властивостей модуля, які були задані в вихідному стилі, але і додати нові правила - наприклад, для списку ul всередині модуля.

Крок 4, останній. Переконавшись, що на локальному сервері все виглядає, як треба, перевіряємо вид в різних браузерах (вони, звичайно, у вас є - як мінімум, IE, FireFox і Opera), якщо треба, то щось виправляємо.

Копіюємо змінений файл стилів на сервер в папку свого шаблону (туди, звідки ми його взяли). Перевіряємо. Не працює? А ви не забули дописати суфікс до потрібних модулів через адмінку на сайті?

Також не завадить відключити кешування модуля на час тестування (але потім не забути включити його назад).

До речі, потренувавшись на створенні модулів зі своїми суфіксами і зміні їх виду, ви можете зазіхнути і на стандартний вид модулів, заданий у вашому шаблоні - тобто на сам клас table.moduletable, змінюючи його властивості на свій смак.