Как легко изменить шаблон Joomla при помощи FireFox.

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

Нам понадобится: браузер Mozilla FireFox. Я специально скачал и установил новый FireFox 4. Скачать можно здесь.

У кого установлена более ранняя версия то при установке FireFox обновится сам.

Также нам нужен будет плагин FireBug. Скачать здесь. Этот плагин - удобный инструмент для веб разработчиков.

После того как установите, можете открыть в FireFox любой сайт, например JoomlaTown.net

Для того чтобы начать работать в FireBug достаточно щёлкнуть по жучку в нижнем углу.

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

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

К примеру если нужно определить стили для главной колонки, нужно навести мышь на неё и когда мы увидим что главная колонка заключилась в рамку нужно кликнуть по ней, чтобы зафиксировать область. И после этого уже спокойно можно посмотреть HTML код и CSS стили.

В центре экрана показан выбранный нами блок HTML кода. А справа - CSS стили для этого блока. Очень удобно.

HTML код показан в древовидной форме, если навести на какой нибудь элемент - он сразу подсветится синим цветом на сайте + подсветятся отступы margin/padding (если они указаны).

Справа будут указаны стили для выбранного элемента: названия классов и их параметры, а также файлы в которых они указаны.

На рисунке показано что выбран элемент <div id="mainContentArea">, то есть главная колонка. Если нажать на плюсик расположенный рядом с элементом, то раскроются другие теги и элементы которые содержатся в mainContentArea.

Справа видим классы: .c2 #mainContentArea и др. Рядом указан файл в котором эти классы присутствуют. Это template.php. На самом деле это template.css, просто в некоторых шаблонах делают как бы перенаправление через php.
В этом классе сразу видим параметр width: 645px, отвечающий за ширину главной колонки.

Кстати, параметры можно менять в реальном времени. Конечно они меняются не в самом файле template.css, а в браузере. Зато можно быстро подобрать какое то значение не прибегая к изменению файла.

Таким образом при изменении шаблона нужно кликнуть по интересующему нас элементу сайта: будь то колонка, заголовок, строчка и т.д.
Справа будет показано название используемых классов и файлов CSS. Открываем файл CSS и поиском ищем этот класс, и спокойно меняем его параметры.

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

Самостоятельное создание шаблона для Joomla вы можете посмотреть на VIPZon'e >>
Необходимы начальные знания CSS.

Всем удачи!