Вы познакомились с файлом index.php и теперь знаете, что этот файл определят расположение элементов сайта в соответствующих блоках <DIV>.  У каждого блока определен свой уникальный ID – идентификатор. На основании этих идентификаторов и будет задаваться уникальное визуальное оформление каждого блока при помощи каскадных таблиц стилей CSS . Также в таблицах прописан не только стиль оформления блоков и их позиционирование, но и стиль модулей, элементов и компонентов сайта.

В состав шаблона Myblog входят два основных файла template.css и menu.css, отвечающие за оформление шаблона, offline.css, который меняет оформление системной offline – странички и editor_content.css для внутреннего редактора Joomla.

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

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

Menu.css

В этом файле прописаны стили оформления трех меню, предусмотренных на блоге:

• Верхнее горизонтальное меню с суффиксом _topmenu ;
• Основное вертикальное меню с суффиксом _vertmenu ;
• Нижнее малое горизонтальное меню с суффиксом _botmenu.

Template.css

Template.css содержит таблицы стилей для всех элементов сайта, кроме меню, которые находятся в файле menu.css.

Разбирать код я не буду, т.к. он достаточно подробно прокомментирован. Хочу дать некоторые рекомендации.

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

Например, для модуля навигации я решила сделать свое, особенное оформление и прописала модуль с суффиксом _nav (.moduletable_nav).  При создании навигации в менеджере модулей  я прописала суффикс _nav в блоке «Суффикс класса модуля».

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

Editor_content.css

Это файл стилей оформления визуального редактора Joomla, с его помощью мы решаем основную проблему редактора Joomla, которая заключается в том, что при редактировании материалов фон редактора выводится такой же, как основной фон шаблона, который описан для DIVа BODY.

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

Offline.css

Нас не устраивает стандартная offline – страница Joomla,  поэтому при помощи файла  offline.php мы организовали вывод своей странички, а при помощи файла offline.css задаем ее оформление.

Подробнее познакомиться с этой темой вы можете на блоге, прочитав статью «Технические работы на сайте. Как изменить offline страницу Joomla».

Основное достоинство таблиц стилей CSS , заключается в том, что вы можете полностью поменять дизайн всего сайта в короткие сроки, при этом, не изменяя код страницы.

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

Как быстро и кардинально поменять дизайн блога мы поговорим в статье «Меняем дизайн блога».

На шестом уроке мы будем разбирать установку и настройку шаблона.

Скачать установочный пакет шаблона "Myblog"