Я регулярно проверяю на форумах Joomla вопросы, которые не получили ответа. Очень много попадается вопросов о том, как производится вывод и оформление контента в Joomla. Это может иметь отношение к шаблону, но часто также имеет отношение к CSS (таблице стилей) шаблона Joomla. Новички часто не осознают, как работают CSS и Joomla. Есть некая путаница в понимании проблем, касающихся ядра Joomla или установленного шаблона. В этом посте я попытаюсь дать обзор того, как использовать CSS в CMS Joomla. (Перевод статьи "Joomla CSS for beginners", автор Kristoffer Sandven.)

Недавно получил письмо, которое подчеркивает мою мысль:

Крис, сейчас я пытаюсь решить проблемы с Joomla, которые касаются дизайна. У меня есть клиенты, которым понравился шаблон - фактически, клиент шаблон уже выбрал - однако они хотят поменять фон на страницах, им нужно больше закладок в горизонтальном меню, чем шаблон может содержать, или они хотят область пользователя, в которой ничего нет. "О, просто переместите это налево и вставьте наш адрес, добавьте синюю панель между этим местом и этим." Я знаю, что для этого достаточно CSS и PHP, но применить их опасаюсь. Было бы полезно, если я мог бы просто понять все шаги по созданию новой пользовательской области, включая то, куда поместить код PHP и CSS.

В этом посте я напишу, как работаю с CSS в Joomla. В следующем посте [5] я покажу, как добавить позиции модуля к шаблону.

[Что такое CSS?]

Перед тем, как начать, Вам нужно знать, что из себя представляет CSS. Я уверен, что CSS и HTML являются главными навыками для пользователя Joomla. Если знаете HTML и CSS, то Вы имеете огромное преимущество в попытках настроить веб-сайт. Большинство расширений прекрасно выглядят, когда Вы устанавливаете их. Однако если Вы хотите, чтобы вид веб-сайта был непротиворечивым, то часто нужно сделать некоторую тонкую настройку CSS. Так что если Вы совсем не знаете CSS, то лучше начать учиться уже сейчас. Эта статья не об изучении определенных методов CSS, здесь скорее дается обзор того, как CSS используется в Joomla.

Вот что о CSS (Cascading Style Sheet, каскадные таблицы стилей) говорит Википедия:

Cascading Style Sheets (CSS) является языком таблицы/списка стилей, используемого для описания семантики представления (то есть внешнего вида и форматирования) документа, написанного на языке разметки (имеется в виду XML или HTML). Наиболее распространенное применение CSS - стиль веб-страниц, написанных на языке HTML и XHTML, однако язык может использоваться для любого типа документа XML, включая SVG и XUL.

CSS разработан главным образом для разделения смыслового содержания документа (написанного на HTML или на похожем языке разметки) от внешнего оформления документа, включая такие элементы как расположение, цвета и шрифты.

Текст, выделенный жирным шрифтом в этой цитате из Википедии - самое важное, что нужно знать о CSS, по моему мнению: разделение контента (HTML) и визуального представления (CSS). Путем использования CSS мы можем использовать один, центрально размещенный файл, в котором описаны все стили. Стиль отделен от наших статей Joomla. Таким методом можно довольно просто поменять целиком внешний вид всего сайта. Теперь представьте, что было бы, если бы стиль Вы задавали отдельно для каждой статьи. Это был бы настоящий кошмар, если нужно было бы сделать изменение стиля - в случае смены дизайна или шаблона.

[Joomla: CSS и шаблоны]

Я всегда очень удивляюсь, когда читаю твит, в котором написано что-нибудь типа '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]

Предположим, что Вы установили шаблон от YooTheme [1]. Вы можете сразу сделать дикие правки во всех файлах CSS. Вероятно, это не будет ужасной вещью, поскольку Вы всегда сможете заново загрузить все исходные файлы шаблона, если что-то пошло в экспериментах не так.

Однако есть способ получше. Когда Вы хотите перезадать CSS в шаблоне, используйте отдельную таблицу стилей. YooTheme уже фактически реализовали эту структуру в своих шаблонах. Они подключили пустой файл CSS, который имеет имя custom.css, и который загружается после всех других файлов CSS. В последнем файле custom.css можно вставить все мои изменения стиля.

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

[Не повторяйте стили, если это не требуется]

При проектировании элементов стиля через CSS важно быть последовательным. И держать таблицу стилей минимального размера. Я имею в виду, что не нужно повторять стили, если нужно сменить стиль элемента. Предположим, что Вы имеете следующий стиль для тега H1 в основном файле CSS (template.css или подобном):

h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:uppercase;
}

Обычно теги H выводятся полужирным шрифтом (bold). Вы можете захотеть добавить стиль, чтобы заставить тег заголовка использовать обычный, а не полужирный, а не полужирный стиль шрифта. И одновременно Вы не хотите иметь приписные (uppercase) буквы в H1. Конечно же, Вы можете сделать это, добавив следующий код к custom.css:

h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:none;
font-weight:normal;
}

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

h1 {
text-transform:none;
font-weight:normal;
}

В этом случае Вы только добавляете стили, которые отличаются от оригинальных. Остальные стили остаются нетронутыми.

[Для проверки Вашего CSS используйте Firebug]

Один из инструментов, который я использую для проверки моего CSS, называется Firebug [2]. Это аддон для Firefox, который дает Вам некоторую информацию о структуре CSS и HTML на WEB-странице. Что-то похожее реализовано также в браузере Chrome. Когда у Вас инсталлирован Firebug, Вы можете щелкнуть правой кнопкой мыши на элементе отображенной странички и выбрать 'Inspect element'. В нижней части экрана откроется окно Firebug. В нем Вы можете просмотреть структуру HTML (слева) и CSS (справа).

Теперь можно начать забавляться! Экспериментируйте с CSS прямо в окне Firebug. Хотите поменять поле/отступ элемента? Цвет фона? Удалить рамку? Любая подстройка стиля, которую Вы хотели бы попробовать, будет немедленно отображена в браузере, когда Вы поменяете соответствующий элемент. Конечно, если Вы обновите страницу, то стиль перезагрузится, и Ваши изменения будут потеряны. Так что когда Вы станете довольны проделанными изменениями, скопируйте CSS в Ваш файл custom.css и выгрузите его на сервер.

См. также "8 бесплатных расширений Firefox, который должен иметь каждый пользователь Joomla" [3].

[Удалите немного времени изучению CSS]

Я верю, что каждый пользователь Joomla / WEB-дизайнер должен быть знаком с CSS и знать HTML наизусть. Это сильно упростит модификацию Ваших шаблонов и позволит легко достичь такого результата, который Вам нужен (или нужен клиенту).

Это не похоже на изучение PHP. О PHP я знаю совсем мало. Однако HTML и CSS составляют мою вторую натуру. Поэтому я уделил время и вложил усилия в обучение и практику использования этих навыков. Это особенно справедливо именно для CSS.

[CSS и Joomla: с чего проще всего начать?]

Самый простой способ начать обучение - просто посмотреть на содержимое своего существующего файла template.css. Просмотрите его структуру, и попробуйте поменять некоторые из стилей. Перед этим не забудьте сделать резервную копию тех файлов, которые Вы меняете.

Сначала Вы можете попробовать поменять теги заголовка. Хотите, чтобы заголовок H2 был поменьше? Нет проблем :). Теперь у Вас работает изменение всего сайта, где встречается тег H2. Другие теги, которые также можете поменять, это тег ссылок (link), тег p (например, для настройки расстояния между строками), и теги UL и LI (маркированный список bullet list).

Joomla: форматирование списков ul / li через стили CSS

Стиль списка ul / li задается через соответствующий раздел файла templates\имя_шаблона\css\template_css.css. Далее будет рассмотрено содержимое template_css.css, влияющее на внешний вид списков ul / li.

1. Общий стиль, действующий для всего сайта (он обычно влияет на отображение списков разделов и категорий сайта), задается кодом раздела OVERALL SETTINGS.

/* ###################### OVERALL SETTINGS ###################### */
 
... тут другие настройки ...
 
ul {
margin : 0px 0px 0px 10px;
}
 
li {
list-style : inside url(../images/arrow.gif) 2px;
list-style-image : url(../images/arrow.gif);
}
 
... тут другие настройки ...

Маленькая картинка arrow.gif задает внешний вид начала строки списка. Если путь до картинки неправильный, или она отсутствует, то вместо картинки будет нарисована жирная точка.

2. Можно задать отдельные стили (отличающиеся внешним видом) для отдельных модулей сайта. Вот например, как задать специальный внешний вид для модуля mostread (этот модуль показывает список самых популярных статей сайта), просто добавив этот код в конец файла template_css.css:

ul.mostread {
padding:0px;
margin-left:15px;
}
 
li.mostread {
padding-bottom:5px;
list-style-image : none;
}

[Рекомендуемая литература по CSS]

Чтобы выучить CSS, я всегда рекомендую книги по CSS гуру Eric Meyer. У него можно получить хорошее понимание и большие знания CSS. Он описывает использование CSS понятным языком и дает много практических примеров в своих книгах. Моей первой книжкой по CSS была "Eric Meyer on CSS", и она многому меня научила. Например, в книге показан весь процесс перехода с дизайна, основанного на таблицах, в дизайн, основанный на CSS. С объяснением каждого шага на этом пути.

Другой хороший источник знаний - A List Apart [4]. Это сайт, посвященный WEB-разработке, и на нем описываются некоторые техники использования CSS. "Журнал A List Apart исследует проектирование, разработку и значение web-контента, с особым акцентом на WEB-стандарты и самую лучшую практику." Действительно здорово!

Есть ли у вас другие рекомендуемые ресурсы для изучения CSS? Поделитесь ими в комментариях!

[Ссылки]

1. Шаблоны www.yootheme.com.
2. Firebug, расширение для Firefox (тестирование CSS).
3. Joomla: 8 бесплатных расширений для FireFox, которые должны быть в арсенале пользователя.
4. www.alistapart.com.
5. Tutorial: How to add module positions to a Joomla template - part 1.
6. Joomla: как добавить отдельный CSS для статьи?
7. CSS Design: Укрощение списков.