Як змінити фон сайту Joomla

12

Від автора: вітаю Вас, шановні читачі. Зовнішній вигляд будь-якого сайту, звичайно ж повинен бути привабливим і унікальним. Тому в даній статті я хотів би показати Вам, як змінити фон сайту Joomla, так як така маленька деталь як колір або зображення фону, можуть істотно покращити дизайн та сприйняття користувачами Вашого проекту. Тим більше що по даній темі дуже часто задається безліч питань.

Як Ви знаєте все, що стосується дизайну та оформлення сайту на Joomla зосереджено в шаблоні. Відповідно для зміни зовнішнього вигляду сайту, необхідно вносити правки в шаблон, а для цього потрібні знання принципу роботи і структури. Простіше кажучи, потрібно вміти працювати з шаблонами на рівні коду. Але, що ж робити новачкові, який тільки починає вивчати Joomla? Тому в цій статті я наведу Вам докладну інструкцію, для CMS joomla — як змінити тло для користувача частини сайту. При цьому, ніяких спеціальних знань не потрібно, тільки хіба, що HTML і CSS на базовому рівні.

Отже, для початку хотів би зазначити, що шаблони Joomla знайдете в каталозі templates файлової структури движка. Як правило, ім’я шаблону збігається з ім’ям папки в якій він розташовується відносно вищевказаного каталогу. Тому Ви можете перейти в папку цікавить шаблону і подивитися, як він влаштований.

Для прикладу я використовую стандартний шаблон Beez3.

Як змінити фон сайту Joomla

Перше, що кидається в очі – це каталог css, де розташовуються файли з правилами CSS. Тобто з правилами оформлення відображених даних сайту. Відповідно змінюючи правила – Ви зміните зовнішній вигляд сайту. Тепер давайте перейдемо в даний каталог.

Як змінити фон сайту Joomla

Як Ви бачите, для одного шаблону може бути передбачено кілька файлів зі стилями. При цьому кожен з них містить правила для окремого елемента сайту. Як же дізнатися, в якому файлі описані, необхідні правила – запитаєте Ви. Для відповіді на це запитання, скористаємося інспектором коду в браузері. Як для мене – найбільш зручний – це FireBug для браузера Mozilla Firefox.

Як змінити фон сайту Joomla

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

Наприклад, фон сайту, в стандартному шаблоні прописаний у правилах для елемента , а саме у файлі personal.css, в першому рядку:

body {
background:#eee;
}

Тепер, власне, відповідь на питання, як змінити фон на сайті joomla – очевидний. Досить додати необхідні правила файл стилів (стосовно до стандартного шаблону – файл personal.css).

Тому, трохи змінимо правила для елемента body.

body {
background:#eee;
background:url(‘../images/index_img_par.jpg’);
}

Якщо в якості фону сайту використовується зображення – його необхідно попередньо помістити в каталог зберігання зображень шаблону (для шаблону Beez3 – це папка images).

Далі оновивши власну частину в браузері ми побачимо зміни дизайну.

Як змінити фон сайту Joomla

Тепер як змінити фон в joomla 3, дещо іншим способом. Дивіться в панелі управління CMS, в менеджері шаблонів, є вкладка «Шаблони».

Як змінити фон сайту Joomla

Вибравши потрібний шаблон на даній вкладці, Ви перейдете на сторінку редагування.

Як змінити фон сайту Joomla

Де на вкладці «Редактор» наведена повна файлова структура шаблону. При цьому файли і папки відображаються у вигляді посилань. Відповідно клікнувши, за якої, Ви побачите вміст файлів і вкладених папок. Наприклад, ми можемо перейти в каталог css, а потім вибрати для редагування вже знайомий нам файл personal.css.

Як змінити фон сайту Joomla

Тобто файли з текстовим вмістом Ви можете редагувати безпосередньо на даній сторінці. Закінчивши всі правки, необхідно клікнути по кнопці «Зберегти».

Тепер Ви знаєте як змінити фон в Joomla 3 і вмієте правити дизайн сайту, правда на найпростішому рівні. Більш складні редагування шаблону, вимагають поглиблених знань з даної теми, особливо, що стосується зміни структури шаблону, додавання нових позицій або створення власного шаблону з абсолютного нуля. Тому якщо Ви хочете дізнатися, за яким принципом працюють шаблони – Вам буде корисний наш безкоштовний курс Створення унікального шаблону Joomla.

На цьому у мене все! Всього Вам доброго і вдалого кодування!!!