Нещодавно отримав лист, який підкреслює мою думку:
У цьому пості я напишу, як працюю з CSS в Joomla. В наступному пості [5] я покажу, як додати позиції модуля до шаблону.
Ось що про CSS (Cascading Style Sheet, каскадні таблиці стилів) говорить Вікіпедія:
Cascading Style Sheets (CSS) є мовою таблиці / списку стилів, що використовується для опису семантики уявлення (тобто зовнішнього вигляду і форматування) документа, написаного на мові розмітки (мається на увазі XML або HTML). Найбільш поширене застосування CSS - стиль веб-сторінок, написаних на мові HTML і XHTML, однак мова може використовуватися для будь-якого типу документа XML, включаючи SVG і XUL.
CSS розроблений головним чином для поділу змісту документа (написаного на HTML або на схожому мовою розмітки) від зовнішнього оформлення документа. включаючи такі елементи як розташування, кольору і шрифти.
Текст, виділений жирним шрифтом в цій цитаті з Вікіпедії - найважливіше, що потрібно знати про CSS, на мою думку: поділ контенту (HTML) і візуального представлення (CSS). Шляхом використання CSS ми можемо використовувати один, центрально розміщений файл, в якому описані всі стилі. Стиль відділений від наших статей Joomla. Таким методом можна досить просто поміняти цілком зовнішній вигляд всього сайту. Тепер уявіть, що було б, якби стиль Ви задавали окремо для кожної статті. Це був би справжній кошмар, якщо потрібно було б зробити зміна стилю - в разі зміни дизайну або шаблону.
Я завжди дуже дивуюся, коли читаю твіт, в якому написано що-небудь типу 'Joomla не підтримує IE!'. Або 'Joomla не оптимізовані під пошукові системи'. Звичайно це так! Однак шаблон може і не бути таким. Все залежить від того, як побудований шаблон на HTML і як реалізований код CSS.
У більшості випадків, файли CSS шаблону знаходяться в папці / templates / TEMPLATENAME / css /.
Деякі шаблони використовують тільки один файл CSS (часто званий зразок template.css), інші мають кілька файлів CSS. Для досягнення оптимальної продуктивності сервера при відображенні сторінок, Ви повинні мінімізувати кількість файлів CSS. Це зменшить кількість запитів сервера, які необхідні для відображення сторінки.
Ви можете іноді побачити, що шаблон використовує основний файл CSS, який імпортує всі інші файли з наступним синтаксисом (приклад):
@import url ( 'reset.css');
@import url ( 'joomla.css');
@import url ( 'typography.css');
@import url ( 'modules.css');
@import url ( 'custom.css');
[Кращі методи роботи з CSS]
Однак є спосіб краще. Коли Ви хочете перезадать CSS в шаблоні, використовуйте окрему таблицю стилів. YooTheme вже фактично реалізували цю структуру в своїх шаблонах. Вони підключили порожній файл CSS, який має ім'я custom.css. і який завантажується після всіх інших файлів CSS. В останньому файлі custom.css можна вставити всі мої зміни стилю.
Якщо я хочу оновити свій шаблон, то можу просто скопіювати цей файл custom.css, оновити мій шаблон на останню версію і потім заново вивантажити на сайт старий custom.css. І це все, що потрібно для зміни стилів!
[Не повторюйте стилі, якщо це не потрібно]
При проектуванні елементів стилю через CSS важливо бути послідовним. І тримати таблицю стилів мінімального розміру. Я маю на увазі, що не потрібно повторювати стилі, якщо потрібно змінити стиль елемента. Припустимо, що Ви маєте наступний стиль для тега H1 в основному файлі CSS (template.css або подібному):
Зазвичай теги H виводяться напівжирним шрифтом (bold). Ви можете захотіти додати стиль, щоб змусити тег заголовка використовувати звичайний, а не напівжирний, а не напівжирний стиль шрифту. І одночасно Ви не хочете мати приписні (uppercase) букви в H1. Звичайно ж, Ви можете зробити це, додавши наступний код до custom.css:
Такий спосіб працює, однак це не буде хороший код. Ви повторили всі стилі навіть коли потрібно всього лише змінити один стиль і додати інший. Ось спосіб краще:
У цьому випадку Ви тільки додаєте стилі, які відрізняються від оригінальних. Інші стилі залишаються недоторканими.
[Для перевірки Вашого CSS використовуйте Firebug]
Тепер можна почати бавитися! Експериментуйте з CSS прямо в вікні Firebug. Хочете поміняти поле / відступ елемента? Колір фону? Видалити рамку? Будь-яка підстроювання стилю, яку Ви хотіли б спробувати, буде негайно відображено в браузері, коли Ви поміняєте відповідний елемент. Звичайно, якщо Ви відновите сторінку, то стиль перезавантажиться, і Ваші зміни будуть втрачені. Так що коли Ви станете задоволені пророблену змінами, скопіюйте CSS в Ваш файл custom.css і вивантажити його на сервер.
Див. Також "8 безкоштовних розширень Firefox, який повинен мати кожен користувач Joomla" [3].
[Видаліть трохи часу вивченню CSS]
Я вірю, що кожен користувач Joomla / WEB-дизайнер повинен бути знайомий з CSS і знати HTML напам'ять. Це сильно спростить модифікацію Ваших шаблонів і дозволить легко досягти такого результату, який Вам потрібен (або потрібний клієнтові).
Це не схоже на вивчення PHP. Про PHP я знаю зовсім мало. Однак HTML і CSS складають мою другу натуру. Тому я приділив час і вклав зусилля в навчання і практику використання цих навичок. Це особливо справедливо саме для CSS.
[CSS і Joomla: з чого найпростіше почати? ]
Спочатку Ви можете спробувати поміняти теги заголовка. Хочете, щоб заголовок H2 був меншим? Немає проблем :). Тепер у Вас працює зміна всього сайту, де зустрічається тег H2. Інші теги, які також можете поміняти, це тег посилань (link), тег p (наприклад, для настройки відстані між рядками), і теги UL і LI (маркований список bullet list).
Joomla: форматування списків ul / li через стилі CSS
Стиль списку ul / li задається через відповідний розділ файлу templates \ імя_шаблона \ css \ template_css.css. Далі буде розглянуто вміст template_css.css, що впливає на зовнішній вигляд списків ul / li.
Маленька картинка arrow.gif задає зовнішній вигляд початку рядка списку. Якщо шлях до картинки неправильний, або вона відсутня, то замість картинки буде намальована жирна крапка.
2. Можна задати окремі стилі (що відрізняються зовнішнім виглядом) для окремих модулів сайту. Ось наприклад, як задати спеціальний зовнішній вигляд для модуля mostread (цей модуль показує список найпопулярніших статей сайту), просто додавши цей код в кінець файлу template_css.css:
[Рекомендована література по CSS]
Інший хороший джерело знань - A List Apart [4]. Це сайт, присвячений WEB-розробці, і на ньому описуються деякі техніки використання CSS. "Журнал A List Apart досліджує проектування, розробку і значення web-контенту, з особливим акцентом на WEB-стандарти і найкращу практику." Дійсно здорово!