Отже, в стандартному функціоналі Joomla не передбачені інструменти для управління фоном сайту, а так само фоном створюваних матеріалів. Тому ми будемо використовувати правила CSS для реалізації вищевказаного функціоналу. А значить, хотів би зробити короткий екскурс, в правила мови CSS, які використовуються для визначення фону.
властивість background
Фон обраного елемента в мові CSS визначається універсальним властивістю background, при цьому в якості фону можна використовувати як певний колір, так і зображення. Зауважте, що ця властивість дозволяє визначити до п'яти характеристик фону. Значення можуть йти в будь-якому порядку, браузер сам визначить, яке з них відповідає потрібному властивості. Синтаксис властивості наступний:
Хочете дізнатися, як створити власний шаблон на CMS Joomla з нуля
Тобто в якості фону ми використовуємо зображення, шлях до якого прописаний в параметрі url, як колір фону - # fc0, при цьому зображення буде повторюватися по вертикалі.
Але, якщо в даному уроці ми з Вами говоримо про зображенні як тлі деякого блоку, значить універсальну властивість background нам ні до чого. Тому ми зупинимося більш детально на дочірньому властивості background-image, завдяки якому можна присвоїти конкретне зображення в якості фону.
Вищевказане властивість працює в парі з параметром url, в якому визначається шлях до зображення використовуваного в якості фону. Зауважте, що шлях необхідно вказувати относітельнотого елемента, в якому використовується властивість. Тобто, якщо властивість вказується у файлі CSS, то щодо розташування даного файлу, необхідно визначати шлях до зображення.
А потім укласти цікавить фрагмент тексту в довільний блок, наприклад
і за допомогою атрибута style, вказати шлях до зображення в параметрі url, властивості CSS background-image:
Хочете дізнатися, як створити власний шаблон на CMS Joomla з нуля
background-position: center - позіціяфона;
background-repeat: no-repeat - заборона повторення зображення фону.
Таким чином, для матеріалу в джумла 3, картинка як фон статті встановлюється досить легко. Але як бути, якщо необхідно додати фон в довільний блок сайту, відмінний від матеріалу? У цьому випадку буде потрібно прописати вищевказані правила, в файл зі стилями CSS. Нагадаю, що дизайн сайту Joomla, формується в шаблоні, тобто шаблон задає основну структуру сайту, яка визначається як HTMLелементамі, так і правилами CSS. Звичайно, все що стосується правок шаблону, вимагає додаткових знань, а саме хоча б основ структури шаблонів Joomla, але це необов'язково, так як сучасні інструменти, допоможуть дізнатися, в який файл шаблону, потрібно додати необхідний код.
Отже, хотів би порекомендувати Вам дуже корисний плагін для браузера Mozilla FireFox, під назвою FireBug, який не тільки відображає вихідний код сторінок, а й показує стилі CSS прив'язані до певних HTML елементам, і що головне - надає інформацію про фото, в якому вони описані .
А значить, визначаємося з елементом, для якого буде призначений фон, далі відкриваємо вищевказаний плагін, вибираємо даний елемент і трохи правіше - в вікні плагіна Ви побачите властивості CSS, прив'язані до даного блоку.
Тут же розташовується ім'я файлу, в якому описані дані властивості.
Відповідно далі, Вам достатньо в знайти даний файл і вказати необхідні правила CSS. Після цього цікавить зображення буде призначено в якості фону.
Якщо Ви бажаєте детально вивчити структуру шаблонів Joomla Вам буде корисний курс Joomla-Майстер. З нуля до преміум шаблону.
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
Хочете дізнатися, як створити власний шаблон на CMS Joomla з нуля
Все дуже просто!
Хочете дізнатися, як створити власний шаблон на CMS Joomla з нуля