Створюємо шапку для сайту

1. Міняємо логотип сайту
2. Створюємо форму для пошуку в шапці сайту
3. Оформлення головного меню на сайті Joomla
4. Кілька способів як зробити горизонтальне меню в Joomla
5. Горизонтальне меню за допомогою суфікса класу
6. Горизонтальне меню за допомогою CSS

Наша взаимовыгодная связь https://banwar.org/

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

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

В якості піддослідного шаблону як зазвичай будемо використовувати шаблон Protostar, він стандартний, з адаптивним дизайном, не має лівих посилань і іншого сміття. Все це робить даний шаблон ідеальним для експериментів, але його дизайн в стандартному стані, м'яко кажучи, сумний.

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

На скріншоті я спеціально позначив, що тут є шапка і де розташоване головне меню. Якщо чесно краси ніякої, це ми і будемо виправляти.

Міняємо логотип сайту

Для початку змінимо логотип, в якості якого в стандартному варіанті виступає звичайна напис з ім'ям сайту. Благо для того щоб поміняти логотип для шаблону Protostar немає необхідності редагувати код шаблону, просто вибираємо потрібний логотип в налаштуваннях шаблону і готово.

В панелі управління переходимо на сторінку «Шаблони: Стилі (Site)» ( «Розширення» -> «Шаблони») і відкриваємо шаблон Protostar для зміни. На вкладці «Додаткові параметри» шукаємо пункт «Логотип» і вибираємо те зображення, яке Ви хочете бачити в якості логотипу на своєму сайті.

Я накидав якусь подобу логотипу в фотошопі і ось що у мене вийшло:

Створюємо форму для пошуку в шапці сайту

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

Налаштовуємо його на свій розсуд, я в свою чергу залишив параметри без змін, хіба що додав текст, який буде відображатися в рядку пошуку.

Залишилося визначитися з позицією, в якій буде виведений наш модуль пошуку. Як подивитися доступні позиції модулів в шаблоні Joomla був присвячений окремий урок , Тому повторюватися не буду. Я вибрав позицію з ім'ям «position-0», після чого зберіг зміни.

Тепер шапка нашого сайту виглядає ось так:

Тепер залишилося змінити позицію і оформлення головного меню.

Оформлення головного меню на сайті Joomla

Стандартне меню в шаблоні Protostar, м'яко кажучи, не найпривабливіше і розташоване воно не там де хотілося б. Для початку давайте змінимо позицію виведення меню.

Я поміняв позицію виведення модуля з позиції «position-7» на «position-1». Тепер модуль головного меню розташовується під шапкою, але не в ній! Для того щоб перемістити дану позицію саме в шапку доведеться дещо підкоригувати код індексного файлу шаблону.

Відкриваємо файл index.php нашого шаблону і прокрутити його до рядка 146, там ми бачимо код, який відповідає за виведення шапки і він закінчується на рядку 158:

<Header class = "header" role = "banner"> ... </ header>

Відразу за ним рядки 159 - 173 відповідають за виведення позиції «position-1»:

&lt;? Php if ($ this-> countModules ( 'position-1')):?> ... &lt;? Php endif; ?>

Для того щоб перемістити потрібну нам позицію в шапку просто вирізаємо весь код з рядків 159-173 і вставляємо його перед закривається тегом </ header> рядок 158. Вийде приблизно наступне:

Тепер подивимося, що у нас вийшло:

Шапка змінилася, але головне меню як і раніше виглядає сумно, можливо навіть гірше ніж було. Щоб це виправити зробимо меню горизонтальним і більш привабливим.

Кілька способів як зробити горизонтальне меню в Joomla

Існує кілька варіантів, як можна зробити головне меню сайту на Joomla горизонтальним. Можна дописати суфікс класу меню в налаштуваннях модуля, або оформити меню на свій розсуд за допомогою CSS. Розглянемо обидва варіанти докладніше

Горизонтальне меню за допомогою суфікса класу

Це найпростіший з існуючих способів зробити меню горизонтальним. Але підходить він не для всіх шаблонів, а тільки для тих у яких використовується Bootstrap. Благо з нашим шаблоном Protostar все в порядку і він підтримує суфікси класів меню.

Все що потрібно зробити це перейти в настройки модуля меню і на вкладці «Додаткові параметри» в текстове поле «Суфікс класу меню» написати «nav-pills» або «nav-tabs». Зверніть увагу, що перед суфіксом класу обов'язково повинен стояти пробіл, інакше працювати нічого не буде. Поставивши пробіл, ми додаємо до меню вже не суфікс класу, а сам клас, до якого в Bootstrap вже застосовані певні стилі.

Щоб стало зрозуміліше, дивіться на скріншот нижче:

Повторюся ще раз, щоб все працювало, в рядку суфікс класу ОБОВ'ЯЗКОВО на самому початку ставимо пробіл, а слідом пишемо клас «nav-pills» або «nav-tabs».

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

Горизонтальне меню за допомогою CSS

Даний метод створення горизонтального меню дещо складніше, але зате він буде працювати в будь-якому з шаблонів Joomla.

Для початку давайте видалимо раніше написані суфікси класу (якщо були додані). Тепер відкриємо код сторінки і подивимося, як у нас оформлено головне меню (як працювати з кодом сторінки ми розглядали в даному уроці ).

Як бачимо, меню у нас складається зі звичайного ненумерованого списку ul => li. До тегу <ul> застосовані два класи - «nav» і «menu». З ними і будемо працювати для того щоб зробити наше меню горизонтальним.

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

Я як приклад вирішив додати суфікс «_horizontal», зверніть увагу прогалини ставити вже не потрібно, в результаті у нас для меню буде застосовано такі два класи «nav» і «menu_horizontal».

Далі я створив новий файл стилів, для того щоб при оновленні Joomla не втратити все зміни внесені в стандартний шаблон і підключив його до нашого шаблоном Protostar (як це зробити ми говорили в даному уроці )

Тепер можна починати писати стилі для нашого меню, для того щоб засобами CSS зробити наше меню горизонтальним треба додати всього одну властивість до пунктів меню укладеним в тезі <li> на вибір. Це може бути або властивість «float: left» або «display: inline-block». Як тільки ця властивість буде додано, то меню відразу ж стане горизонтальним. Але виглядати воно буде не найпривабливішим чином.

Щоб меню стало більш привабливим, доведеться дописати ще кілька властивостей. Щоб не вдаватися в подробиці CSS нижче я наведу готовий приклад з коментарями:

/ * Головне меню * / ul.nav.menu_horizontal li {display: inline-block;} / * Робимо меню горизонтальним * / ul.nav.menu_horizontal {margin: 0; background: # 005e8d;} / * Прибираємо відступи у всього меню і додаємо заливку * / ul.nav.menu_horizontal li: hover {background: # 4CAF50; transition: all 0.2s;} / * Заливка пункту меню при наведення * / ul. nav.menu_horizontal li.active {background: # 4CAF50;} / * Заливка активного пункту меню * / ul.nav.menu_horizontal li a {color: #fff; padding: 10px;} / * Колір пункту меню і відступи * / ul. nav.menu_horizontal li a: hover {background: none;} / * Прибираємо заливку тексту при наведення * / ul.nav.menu_horizontal li ul {background: # 005e8d;} / * Приліплене меню (вставити при необхідності) * / ul.nav .menu_horizontal li ul li {width: 100%;} / * Ширина вкладених пунктів меню 100% * /

Даний код вставляємо в наш файл стилів (або в самий кінець стандартного файлу стилів) і зберігаємо його. Залишилося тільки перевірити отриманий результат, для цього оновлюємо сторінку, можливо, буде потрібно оновлювати з очищенням кеша (поєднання клавіш Ctrl + F5) і дивимося, що у нас вийшло. У мене вийшло приблизно так:

Для зручності я вирішив викласти вже готові файли index.php і mycss.css, які Ви можете завантажити і в готовому вигляді в заключному уроці.

Як бачимо, нічого складного немає, витративши небагато часу, ми оформили шапку для сайту, створили логотип, форму пошуку і горизонтальне меню. До речі якщо перемістити модуль хлібні крихти, він же навігатор сайту (Breadcrumbs) в позицію «position-3» ми перемістимо його з нижньої у верхню частину сторінки.