Як змінити (змінити) фон сайту Joomla. докладна інструкція

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

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

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

Сучасні тенденції і підходи в веб-розробці

Дізнайтеся алгоритм швидкого зростання з нуля в сайтобудування

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

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

Тобто відкривши даний інструмент для свого сайту Ви можете розглянути структуру необхідного елемента, наприклад потрібного заголовка, абзацу або елемента

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

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

, А саме в файлі personal.css, в першому рядку:

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

Сучасні тенденції і підходи в веб-розробці

Дізнайтеся алгоритм швидкого зростання з нуля в сайтобудування

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

body {

background: #eee;

background: url ( '../images/index_img_par.jpg');

}

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

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

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

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

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

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

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

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

Сучасні тенденції і підходи в веб-розробці

Дізнайтеся алгоритм швидкого зростання з нуля в сайтобудування

Подивіться відео і дізнайтеся покроковий план по створенню сайту з нуля!