Редактирование стилей шаблона с помощью браузера Mozilla Firefox

Для облегчения редактирования шаблонов скрипта, можно использовать встроенные инструменты веб-разработки в браузере Mozilla Firefox (скачать браузер можно на официальном сайте Mozilla). С помощью этих инструментов можно узнать  какие свойства заданы какому-либо элементу страницы (к примеру, цвет текста, цвет фона, имя шрифта и размер шрифта), а также в каком файле находятся свойства CSS.

Рассмотрим инструмент «исследовать элемент» на примере. Откроем в браузере Mozilla Firefox демонстрационный сайт http://demo.boxcode.ru/maxboard/ , наведем курсор на категорию доски объявлений «Транспорт», щелкаем правую кнопку мыши, появиться контекстное меню, выбираем «Исследовать элемент».

Появится панель инструментов веб-разработки, открыта будет вкладка «Инспектор». В одном окне будет HTML-код, в другом будут CSS свойства выбранного элемента.

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

table td .block_name_category_tab_glpage_adv a , table td .block_name_category_tab_glpage_adv a:visited

и указывается в этом селекторе два свойства:

color: rgb(136, 82, 29);
font-size: 14px;

Если открыть файл \templates\coolmini\moduls\doska\doska.css, то мы увидим данный код

table td .block_name_category_tab_glpage_adv a , table td .block_name_category_tab_glpage_adv a:visited { color: #88521d;
    /* font-weight: bold; */ font-size: 14px; }

При необходимости можно отредактировать правила CSS.

В окне с HTML-кодом можно выбрать любой другой элемент страницы и просмотреть стили выбранного элемента.

Также выбрать какой-либо элемент страницы для исследования можно другим способом: открываем меню браузера Mozilla Firefox (если есть горизонтальное меню в браузере, то нужно будет перейти еще в раздел «Инструменты»), переходим в «Веб-разработка», выбираем «Инспектор». Теперь, перемещая курсор по странице, можно будет выбрать какой-либо элемент.

Вопросы можно задавать в теме Изменение внешнего вида сайта (редактирование шаблона).