Настройка шаблона Protostar
Как уже упоминалось ранее, CMS Джумла идет с уже с предустановленными шаблонами - это Protostar и Beez3.
По умолчанию, основным является первый. Но это легко поменять, достаточно нажать на "звёздочку" напротив нужного.
Давайте поменяем и посмотрим, что из этого получится.
Заходим на наш сайт. Не забываем перегрузить страницу.
Как видим, сайт смотрится совсем по-другому. Верхнее меню на привычном месте – вверху. Боковое переместилось на лево.
Я не буду останавливаться на шаблоне Beez3, в нём минимум настроек, как и в Protostar. Последний рассмотрим ниже, а пока, как и обещал в предыдущем уроке, поместим наше "Главное меню" на привычное место.
Главное меню шаблона Protostar
Сейчас, на нашем сайте, "Главное меню" и меню "ШКАФ КУПЕ" располагаются в правой колонке.
Заходим в Меню – Менеджер меню.
Нас интересует "ГЛАВНОЕ". Нажимаем на кнопку "Модули" и на появившуюся вкладку – "Main Menu…".
Попали в настройки модуля.
Здесь первым делом меняем позицию размещения на Navigaition [position-1].
Давайте пока сохраним изменения.
И посмотрим на наш сайт.
Главное меню переместилось на нужное место, но отображается не совсем так, как бы хотелось. Пункты меню не в строчку расположены, а друг над другом.
Сейчас мы это подправим.
Возвращаемся в настройки модуля.
Вкладка – Привязка к пунктам меню – На всех страницах.
Следующая, более интересная вкладка – "Дополнительные параметры".
Пункт "Суффикс класса меню". Здесь надо прописать следующее значение – ПРОБЕЛ nav-pills
Ещё раз, повторяю - ставите курсор в окно, нажимаете на клавиатуре клавишу "Пробел" и nav-pills
Всё, "Сохранить и закрыть".
Переходим на сайт, и у нас всё красиво, так, как и хотели.
Настройки шаблона Protostar Джумла
Шаблон действительно очень простой, настройки можно пересчитать по пальцам одной руки.
Но это и к лучшему, для ознакомления то что надо.
Выбираем вкладку Расширения – Шаблоны.
Проверяем, что шаблон Protostar выбран у нас по умолчанию – "звезда" окрашена жёлтым цветом, и кликаем по названию.
Открылся "Менеджер шаблонов" - "Изменить стиль".
Сразу переходим на вкладку "Дополнительные параметры".
Актуально для нас:
1. Цвет текста. Можно поменять цвет заголовков меню.
2. Цвет фона.
3. Логотип. Поставить свой логотип.
4. Тип контейнера.
"Резиновый" - сайт будет отображаться во всю ширину экрана, без полей.
"Фиксированный" – сайт занимает определённую, центральную часть монитора, края без текста. Можно установить какое-нибудь изображением или, как мы это сейчас сделаем, зальём понравившимся нам цветом (Цвет фона).
Для примера, цвет пунктов меню – зелёный. Фон – жёлтый. И логотип, заранее подготовленный. Нажимаем "Сохранить".
Зайдём на сайт. Наглядно видно, как всё поменялось.
Небольшое отступление. Наверняка у Вас возник вопрос, откуда у меня появился Логотип.
Все файлы в Джумла располагаются в определённых папках. Так, для графических файлов, есть специальная, с названием "images".
Находится она по адресу - OpenServer\domains\mebelip\images
В этом каталоге мы и будем в дальнейшем хранить наши изображения для сайта. В процессе работы будут созданы новые тематические папки.
Мой логотип был заранее расположен в папке "banners", по следующему пути:
OpenServer\domains\mebelip\images\banners
Вернёмся в "Менеджер шаблонов" и поменяем одну функцию. Сделаем наш шаблон "Резиновым".
Нажмем "Сохранить".
Перегружаем наш сайт. Как видите фон исчез.
Осталась одна вкладка в Менеджере шаблонов – "Привязка к меню".
Мы ничего менять не будем.
Коротко, что здесь настраивается.
Повторюсь, Джумла весьма гибкая CMS. Разработчики предусмотрели даже возможность для каждого пункта меню, использовать свой шаблон, с различными настройками.
Подробнее об использовании нескольких шаблонов для одного сайта, будет рассказано позже.
В следующем уроке займёмся добавлением фотографий на сайт.
