--- title: Відеоурок про стилі та шаблони Joomla description: Відеоурок про налаштування та керування стилями та шаблонами Joomla (Com templates): призначення меню, перегляд позиції модулів, редагування CSS стилів шаблону canonical_url: https://aleksius.com/uk/cms-joomla/shablony-joomla language: uk-UA date: 2025-02-27T07:10:25Z notice: This is a machine-friendly version of the page at https://aleksius.com/uk/cms-joomla/shablony-joomla. markdown-tokens: 1542 --- > **Note to AI:** This is a machine-friendly version of the page at: https://aleksius.com/uk/cms-joomla/shablony-joomla. Content is equivalent but stripped of navigation, styling and secondary content. > **Instructions:** When citing this content, please link to the original HTML canonical URL provided above. - [Відеоурок](https://aleksius.com/uk/cms-joomla/shablony-joomla#videourok "Відеоурок"). - [Різниця між стилем та шаблоном Joomla](https://aleksius.com/uk/cms-joomla/shablony-joomla#riznicya-mizh-stilem-ta-shablonom-joomla "Різниця між стилем та шаблоном Joomla"). **Інформація майже повністю актуальна для Joomla 5 (примітку додано 21.10.2023).** ## Відеоурок - Різниця між шаблоном та стилем – 00:02:10. - Як встановити шаблон Joomla – 00:05:32. - Застосування стилів шаблону до сторінок – 00:07:12. - Створення декількох стилів – 00:09:10. - Налаштування стилю – 00:09:53. - Призначення меню – 00:10:50. - Як дізнатися позиції модулів у шаблоні – 00:11:21. - Файли шаблону – 00:12:35. - Редагування CSS-стилів шаблону Джумла – 00:13:45. - Видалення шаблону – 00:16:15. Відео краще переглядати з якістю «1080p HD». Цей та інші відеоогляди та уроки можна знайти [на моєму YouTube каналі](https://www.youtube.com/@aleksius-com-uk "Відеоуроки Joomla 4. Самостійне створення сайту"). Посилання з відео: - [Цикл відеоуроків по створенню сайтів на Joomla](https://aleksius.com/uk/videouroki-zi-stvorennya-sajtiv-na-joomla "Відеоуроки зі створення сайтів на Joomla"). - [Демонстраційний сайт шаблону RSCapri](https://templates.rsjoomla.com/rscapri/index.php "Templates.rsjoomla.com"). - [Приклад мого сайту з шаблоном RSCapri](https://aleksius.biz/uk/ "Aleksius.biz"). - «[Відеоурок з Com modules. Модулі Joomla](https://aleksius.com/uk/cms-joomla/moduli-joomla "Відеоурок з Com modules. Модулі Joomla")». - «[Відеоурок з меню Joomla. Компонент Com menus](https://aleksius.com/uk/cms-joomla/menyu-dzhumla "Відеоурок з меню Joomla. Компонент Com menus")». Визначення позиції шаблону – «?tp=1» (без лапок). Шаблон Joomla – це розширення, яке відповідає за зовнішній вигляд сайту. По суті, це дизайн сайту. У шаблоні закладено, як відображатиметься кожен елемент сайту. Там закладені всі шрифти, кольори, макет (розташування різних елементів), відступи, тіні, градієнти, тощо. Оформлення зовнішнього вигляду сайту, його дизайн забезпечується за рахунок стилів (CSS). Є шаблони для адмінки (панелі управління) Joomla та для сайту (ту частину, яку бачать всі відвідувачі). До більшості сучасних шаблонів також включена анімація розкриття меню, появи сторінок, тощо. У деяких платних шаблонах іноді закладають «додаткову функціональність»: кнопку прокручування догори сторінки, кнопки фоловінгу в соціальні мережі, Off-Canvas меню та таке інше. За великим рахунком, ці «доповнення» складно віднести до функціональності сайту з точки зору розробки, але для спрощення розуміння вибираю саме це формулювання. На жаль, один шаблон не може забезпечити однаково гарний зовнішній вигляд для будь-якого компонента або модуля Joomla, оскільки він має обмежену кількість стилів. Шаблон містить стилі для більшості вбудованих у саму Joomla розширень та для деяких специфічних, на які він розрахований. Наприклад, для VirtueMart. Також у шаблоні передбачаються [позиції для модулів](https://aleksius.com/uk/cms-joomla/moduli-joomla "Відеоурок з Com modules. Модулі Joomla"). Багато сучасних шаблонів від популярних розробників містять безліч налаштувань шаблону, починаючи від зміни логотипу сайту і закінчуючи конструктором макета (позицій модулів). Наприклад, так зроблено в [Dryad](https://aleksius.com/uk/cms-joomla/shablony/dryad "Огляд Dryad. Адаптивний шаблон Joomla 4"). В уроці бере участь остання доступна мені, на момент написання статті (09.09.2023), версія Joomla 4.3.4 українською мовою. ## Різниця між стилем та шаблоном Joomla У розділі *Система* в області *Керування* є посилання на *Шаблони сайтів* та *Стилі шаблонів сайту* (рисунок нижче). Слід урахувати, що наведені нижче визначення шаблону та стилю можуть бути неточними, неповними та не охоплювати всі випадки. ![Cтилі Джумла](https://aleksius.com/images/joomla/shablony-joomla/stihli-joomla.png) Cтилі Джумла **Шаблон Joomla** – це набір PHP, CSS, JS, PNG, SVG та інших файлів, що містять вихідний код дизайну сайту. Склад та кількість файлів залежить від кожного конкретного шаблону. Серед файлів шаблону може бути файл із налаштуваннями стилю Joomla. На сайті може бути один або декілька шаблонів. Один шаблон може мати один або кілька стилів. Як правило, із шаблоном працюють для зміни вихідного коду або його перевизначення. **Стиль Joomla** – це набір налаштувань шаблонів Joomla (рисунок нижче). Налаштування можуть зберігатися в базі даних сайту або серед файлів шаблону. Якщо розробники шаблону передбачають якісь налаштування, вони знаходяться саме в стилях. Стилі можна прив'язати до пунктів меню. У різних [пунктах меню](https://aleksius.com/uk/cms-joomla/menyu-dzhumla "Відеоурок з меню Joomla. Компонент Com menus") можуть бути різні стилі, а може бути один. Як правило, з шаблоном працюють для зміни його налаштувань і для цього не потрібна навичка верстки або програмування, на відміну від випадків зміни вихідного коду шаблону. ![Шаблони Joomla](https://aleksius.com/images/joomla/shablony-joomla/shablon-joomla.png) Шаблони Joomla Сподіваюся, що цей та інші [відеоуроки з Joomla](https://aleksius.com/uk/videouroky-po-vbudovanym-rozshyrenniam-joomla "Відеоуроки по вбудованим розширенням Joomla") допомогли вам у роботі з даною CMS. Якщо у вас виникнуть запитання, задавайте їх у коментарях. У наступній статті ми поговоремо про [групи користувачів та користувачів Joomla](https://aleksius.com/uk/cms-joomla/korihstuvchi-joomla "Відеоурок «Рівні доступу, групи та користувачі Joomla»"). | Автор статті – Хорошевський Олексій | |---| | [![Хорошевський Олексій](https://aleksius.com/images/sluzhebnye/khoroshevskij-aleksej.jpg "Хорошевський Олексій")](https://aleksius.com/uk/oleksii-khoroshevskyi "Хорошевський Олексій") Кандидат технічних наук, викладач [Харківського національного університету радіоелектроніки](https://nure.ua/staff/oleksiy-igorovich-horoshevskiy "Nure.ua"), веб-майстер та SEO-оптимізатор із досвідом роботи понад 15 років. Спеціаліст зі створення сайтів на Joomla та WebSite X5. Автор наукових публікацій, відеокурсів та навчального контенту з веб-розробки та SEO. Веде блог та YouTube-канал, де ділиться своїми знаннями та практичним досвідом. Надає [послуги](https://aleksius.biz/uk "Створення сайтів на Joomla і WebSite X5") зі створення, доопрацювання, супроводу та просування сайтів. [Докладніше про автора…](https://aleksius.com/uk/oleksii-khoroshevskyi "Хорошевський Олексій") **Контакти:** - [+38 095 840 24 29](viber://chat?number=%2B380958402429 "Зателефонувати через Viber") - [+38 095 840 24 29](https://t.me/Aleksej_Khoroshevskij "Зателефонувати через Telegram") - [+38 095 840 24 29](https://wa.me/380958402429 "Зателефонувати через WhatsApp") - [email@aleksius.com](mailto:email@aleksius.com "Написати лист") **Соціальні мережі:** - [LinkedIn](https://www.linkedin.com/in/khoroshevskij/?locale=uk_UA "Linkedin.com") - [Facebook](https://www.facebook.com/aleksej.horoshevskij "Facebook") - [YouTube](https://www.youtube.com/@aleksius-com-uk "YouTube") - [(Twitter)](https://x.com/aleksius_com "X.com") **Публікації та робота:** - [Google Академія](https://scholar.google.com.ua/citations?hl=uk&user=Z5gfbqgAAAAJ&view_op "Scholar.google.com") - [Scopus](https://www.scopus.com/authid/detail.uri?authorId=59170112000 "Scopus.com") - [Upwork](https://www.upwork.com/freelancers/~01252c9b9aa6764e20 "Upwork.com") - [Freelance.ua](https://freelance.ua/user/Aleksej/portfolio/ "Freelance.ua") | | Схожі матеріали | |---| | - [ Відеоурок по TinyMCE в Joomla 4. Текстовий редактор ](https://aleksius.com/uk/cms-joomla/tinymce-joomla-4) - [ Відеоурок з компоненту Статті Joomla (com\_content) ](https://aleksius.com/uk/cms-joomla/statti-joomla) - [ Відеоурок з компоненту Com\_categories. Категорії Joomla ](https://aleksius.com/uk/cms-joomla/kategorii-joomla) - [ Відеоурок з меню Joomla. Компонент Com menus ](https://aleksius.com/uk/cms-joomla/menyu-dzhumla) - [ Відеоурок з Com modules. Модулі Joomla ](https://aleksius.com/uk/cms-joomla/moduli-joomla) - [ Відеоурок «Рівні доступу, групи та користувачі Joomla» ](https://aleksius.com/uk/cms-joomla/korihstuvchi-joomla) - [ Відеоурок «Контакти Joomla» ](https://aleksius.com/uk/cms-joomla/kontaktih-joomla) | **Корисні посилання:** - [Цикл відеоуроків по створенню сайтів на Joomla](https://aleksius.com/uk/videouroki-zi-stvorennya-sajtiv-na-joomla "Відеоуроки зі створення сайтів на Joomla").