Від автора: вітаю Вас, шановні читачі. Як Ви знаєте, в даний час зображення — це невід’ємний атрибут будь-якого хорошого сайту. При цьому вони використовуються як для пояснення викладеного матеріалу, так і для поліпшення зовнішнього вигляду, тобто веб-сторінки з суцільним текстом, дуже негарно виглядають так і важко сприймаються відвідувачами. Тому в даній статті ми поговоримо з Вами про те, як в joomla зробити картинку фоном.
Зображення матеріали Joomla додаються досить просто, використовуючи стандартні інструменти вбудованого візуального редактора, але ось що стосується створення фону, тут у початківців веб-майстрів виникає запитання, а значить у цій статті я постараюся привести відповіді на них.
Отже, в стандартному функціоналу Joomla не передбачені інструменти для управління фоном сайту, а так само фоном створюваних матеріалів. Тому ми будемо використовувати правила CSS для реалізації вищевказаного функціоналу. А значить, хотів би зробити короткий екскурс, правила мови CSS, які використовуються для визначення фону.
Властивість background
Тло вибраного елемента в мові CSS визначається універсальним властивістю background, при цьому в якості фону можна використовувати як певний колір, так і зображення. Зауважте, що дана властивість дозволяє визначити до п’яти характеристик фону. Значення можуть йти в будь-якому порядку, браузер сам визначить, яке з них відповідає потрібного властивості. Синтаксис властивості наступний:
background: [background-attachment || background-color || background-image || background-position || background-repeat]
До прикладу.
background: url(images/hand.png) repeat-y #fc0; /* Цветфона,
шлях до фонового зображення і
повторення фону по вертикалі */
Тобто в якості фону ми використовуємо зображення, шлях до якого прописаний в параметрі url, в якості кольору фону — #fc0, при цьому зображення буде повторюватися по вертикалі.
Але, якщо в даному уроці ми з Вами говоримо про зображенні як фоні деякого блоку, значить універсальне властивість background нам ні до чого. Тому ми зупинимося більш докладно на дочірньому властивості background-image, завдяки якому можна присвоїти конкретне зображення в якості фону.
background-image: url(шлях до зображення);
Зазначене властивість працює в парі з параметром url, в якому визначається шлях до зображення використовується в якості фону. Зауважте, що шлях необхідно вказувати относительнотого елемента, в якому використовується властивість. Тобто, якщо властивість вказується у файлі CSS, то щодо розташування цього файлу, необхідно визначати шлях до зображення.
Тепер виникає питання, як використовувати властивість background-image? Для початку розглянемо випадок, коли необхідно додати зображення в якості фону для деякого матеріалу. Як Ви знаєте матеріали – це динамічний контент, який формується в менеджері матеріалів, використовуючи вбудований візуальний редактор.
Тому форматуємо матеріал, Ви можете визначити фон для майбутніх абзаців або ділянок тексту. Для цього необхідно відкрити вихідний код у редакторі, використовуючи спеціальний інструмент.
А потім укласти цікавить ділянка тексту в довільний блок, наприклад
При цьому правило CSS, зазначено безпосередньо в матеріалі, а значить шлях до зображення вказується щодо кореневого каталогу CMS Joomla, так як всі запити обробляються єдиною точкою входу – файлом index.php. Закінчивши редагування, клікаємо по кнопці “ОК” для повернення в редактор.
Відповідно, якщо все зазначене вірно, у візуальному редакторі ми побачимо, що цікавить нас фон. Далі необхідно просто зберегти створюваний матеріал. Зверніть увагу, що я використовував пару додаткових властивостей для більш гарного розташування зображення:
background-position: center – позицияфона;
background-repeat: no-repeat – заборона повторення зображення фону.
Таким чином, для матеріалу в джумла 3, картинка як фон статті встановлюється досить легко. Але як бути, якщо необхідно додати фон в довільний блок сайту, відмінний від матеріалу? У цьому випадку буде потрібно прописати вищевказані правила, файл зі стилями CSS. Нагадаю, що дизайн сайту Joomla, формується в шаблоні, тобто шаблон визначає основну структуру сайту, яка визначається як HTMLэлементами, так і правилами CSS. Звичайно, все що стосується правок шаблону, вимагає додаткових знань, а саме хоча б основ структури шаблонів Joomla, але це необов’язково, так як сучасні інструменти, які допоможуть дізнатися, в який файл шаблону, потрібно додати необхідний код.
Отже, хотів би порекомендувати Вам дуже корисний плагін для браузера Mozilla FireFox, під назвою FireBug, який не тільки відображає вихідний код сторінок, а й показує стилі CSS прив’язані до певних елементів HTML, і що головне — надає інформацію про файл, у якому вони описані.
А значить, визначаємося з елементом, для якого буде призначено фон, далі відкриваємо вищевказаний плагін, вибираємо цей елемент і трохи правіше – у вікні плагіна Ви побачите властивості CSS, прив’язані до даного блоку.
Тут же розташовується ім’я файлу, в якому описані дані властивості.
Відповідно далі, Вам достатньо знайти файл і вказати необхідні правила CSS. Після цього цікавить зображення буде призначено в якості фону.
Якщо Ви бажаєте детально вивчити структуру шаблонів Joomla Вам буде корисний курс Joomla-Майстер. З нуля до преміум шаблону.
На цьому стаття завершена. Всього Вам доброго і вдалого кодування!!!
