Редактирование шаблона joomla 3

Часто бывает что в шаблоне что-то не устраивает. Например цвет какого либо элемента, его величина, размер шрифта и.т.д. А в настройках шаблона как на зло, нельзя внести изменения. Расстраиваться не стоит, можно подредактировать код в файле CSS.

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

Всё это очень просто сделать с помощью браузера Mozilla Firefox, и установленного в него дополнения Firebug.

Установка Firebug в Mozilla Firefox

Откройте браузер Mozilla не ниже 3 версии и пройдите на официальный сайт Firebug. Там увидите вот такой оранжевый значок "Установить Firebug", кликните по нему. Вас перебросит на "mozilla.org".

Перейдя на "mozilla.org", нажмите "Добавить в Firefox". 

В открывшемся окне нажать "установить", после установки перезапустите браузер. Firebug готов к работе!

Редактирование шаблона joomla 3 в Firebug

Теперь в браузере мазила необходимо открыть страницу вашего сайта, с элементом который хотите редактировать. Я покажу вам на примере тестового сайта под управлением joomla 3 установленного на денвер. А корректировать буду блок главного меню.

После того как открыта страница сайта, включите Firebug. Для этого надо нажать на картинку жука, находящуюся в правом верхнем углу браузера Mozilla. Цвет должен изменится с серого на желтый. 

В низу откроется панель Firebug, выглядит она так. (Для того чтобы увеличить изображение, кликните по нему).

Чтобы найти код интересующего нас элемента, в верхнем левом углу панели, нажмите на иконку "выделения объекта". 

Далее наведите курсор на объект который хотите редактировать, и кликните по нему левой кнопкой мыши. У меня это блок "главного меню". 

После его выделения, в правой части панели выводится код отвечающий за этот блок. 

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

1. background-color: #F5F5F5; эта строка отвечает за цвет фона. Меняем на бирюзовый  background-color: #00FFFF; 

2. border: 1px solid #E3E3E3; эта строка отвечает за границы блока. Поставим вместо одного пять пикселей и изменим цвет на коричневый border: 5px solid #800000;

3. border-radius: 4px; здесь указан радиус, закругление по углам. Ставим 24 вместо 4 border-radius: 24px; 

Таким вот образом можно редактировать шаблон joomla 3, настраивая его внешний вид. Меняется практически всё на сайте: цвета, шрифты, размеры и.т.д.

Как изменить CSS шаблона joomla 3
Потренировавшись в панели и добившись нужных результатов, необходимо внести изменения в файл CSS. Здесь всё тоже достаточно просто.

Наведите курсор мыши на заголовок с названием файла CSS, рядом в скобочках виден номер строки с кодом, в моём случае "строка 2116". Перед вами откроется путь к файлу CSS. 

1. Пройти по пути "sajtnajoomla.ru/templates/protostar/css/template.css"

2. Открыть файл "template.css", блокнотом Notepad++.

3. Найти 2116 строку, и отредактировать CSS код шаблона joomla 3.

Не забудьте предварительно сделать копию CSS файла, который будете редактировать! На этом всё, возникнут вопросы, задавайте в комментариях.