Редагування шаблону joomla 3 настройка зовнішнього вигляду

Всім привіт!!! Сьогодні будимо редагувати шаблон joomla 3, вносячи зміни в файлі CSS. А допоможе нам браузер Mozilla Firefox і його чудове доповнення Firebug. C ним ми легко налаштуємо зовнішній вигляд шаблону joomla 3.

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

Зараз я виберу певний елемент на сайті, знайду і відредагую код файлу CSS відповідає за цей елемент, тим самим зміню його зовнішній вигляд.

Все це дуже просто зробити за допомогою браузера Mozilla Firefox, і встановленого в нього доповнення Firebug.

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

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

установка Firebug

Перейшовши на "mozilla.org ", натисніть" Додати в Firefox". Firebug

У вікні, натиснути "встановити", після установки перезапустіть браузер. Firebug готовий до роботи!

Редагування шаблону joomla 3 в Firebug

Тепер в браузері мазило необхідно відкрити сторінку вашого сайту, з елементом який хочете редагувати. Я покажу вам на прикладі тестового сайту під управлінням joomla 3 встановленого на Денвер. А коригувати буду блок головного меню.

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

Відео: Як налаштувати складний шаблон joomla

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

Відео: Міняємо шаблон Joomla 3

Щоб знайти код, що цікавить нас елемента, в верхньому лівому кутку панелі, натисніть на іконку "виділення об`єкта".

Далі наведіть курсор на об`єкт який хочете редагувати, і клацніть по ньому лівою кнопкою миші. У мене це блок "головного меню".

Після його виділення, в правій частині панелі виводиться код відповідає за цей блок.

Зараз я буду змінювати цей код прямо в панелі 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 файлу, який будете редагувати! На цьому все, виникнуть питання, задавайте в коментарях.

Поділися в соц. мережах: