Настройка шаблона Protostar

 Как уже упоминалось ранее, CMS Джумла идет с уже с предустановленными шаблонами -  это Protostar и Beez3.

Предустановленные шаблоны Джумла

Предустановленные шаблоны Джумла

 По умолчанию, основным является первый. Но это легко поменять, достаточно нажать на "звёздочку" напротив нужного.

 Давайте поменяем и посмотрим, что из этого получится.

Предустановленные шаблоны Джумла

 Заходим на наш сайт. Не забываем перегрузить страницу.

Сайт Джумла

 Как видим, сайт смотрится совсем по-другому. Верхнее меню на привычном месте – вверху. Боковое переместилось на лево.

 Я не буду останавливаться на шаблоне Beez3, в нём минимум настроек, как и в Protostar. Последний рассмотрим ниже, а пока, как и обещал в предыдущем уроке, поместим наше "Главное меню" на привычное место.

Главное меню шаблона Protostar

 Сейчас, на нашем сайте, "Главное меню" и меню "ШКАФ КУПЕ" располагаются в правой колонке.

Наш сайт на Джумла

 Заходим в Меню – Менеджер меню.

Менеджер меню

 Нас интересует "ГЛАВНОЕ". Нажимаем на кнопку "Модули" и на появившуюся вкладку – "Main Menu…".

Менеджер меню

 Попали в настройки модуля.

 Здесь первым делом меняем позицию размещения на Navigaition [position-1].

 Давайте пока сохраним изменения.

Настройки модуля

 И посмотрим на наш сайт.

 Главное меню переместилось на нужное место, но отображается не совсем так, как бы хотелось. Пункты меню не в строчку расположены, а друг над другом.

Сайт

 Сейчас мы это подправим.

 Возвращаемся в настройки модуля.

 Вкладка – Привязка к пунктам меню – На всех страницах.

Настройки модуля

 Следующая, более интересная вкладка – "Дополнительные параметры".

 Пункт "Суффикс класса меню". Здесь надо прописать следующее значение – ПРОБЕЛ nav-pills

 Ещё раз, повторяю - ставите курсор в окно, нажимаете на клавиатуре клавишу "Пробел" и nav-pills

 Всё, "Сохранить и закрыть".

Настройки модуля Джумла

 Переходим на сайт, и у нас всё красиво, так, как и хотели.

Наш сайт

 Настройки шаблона Protostar Джумла

 Шаблон действительно очень простой, настройки можно пересчитать по пальцам одной руки.

 Но это и к лучшему, для ознакомления то что надо.

 Выбираем вкладку Расширения – Шаблоны.

 Проверяем, что шаблон Protostar выбран у нас по умолчанию – "звезда" окрашена жёлтым цветом, и кликаем по названию.

Настройки шаблона Джумла

 Открылся "Менеджер шаблонов" - "Изменить стиль".

 Сразу переходим на вкладку "Дополнительные параметры".

 Актуально для нас:

 1. Цвет текста. Можно поменять цвет заголовков меню.

 2. Цвет фона.

 3. Логотип. Поставить свой логотип.

 4. Тип контейнера.

 "Резиновый" - сайт будет отображаться во всю ширину экрана, без полей.

 "Фиксированный" – сайт занимает определённую, центральную часть монитора, края без текста. Можно установить какое-нибудь изображением или, как мы это сейчас сделаем, зальём понравившимся нам цветом (Цвет фона).

Настройки шаблона Protostar Джумла

 Для примера, цвет пунктов меню – зелёный. Фон – жёлтый. И логотип, заранее подготовленный. Нажимаем "Сохранить".

Настройки шаблона Protostar Джумла

 Зайдём на сайт. Наглядно видно, как всё поменялось.

Наш сайт

 Небольшое отступление. Наверняка у Вас возник вопрос, откуда у меня появился Логотип.

 Все файлы в Джумла располагаются в определённых папках. Так, для графических файлов, есть специальная, с названием "images".

 Находится она по адресу - OpenServer\domains\mebelip\images

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

 Мой логотип был заранее расположен в папке "banners", по следующему пути:

OpenServer\domains\mebelip\images\banners

Папка для фото в Джумла

 Вернёмся в "Менеджер шаблонов" и поменяем одну функцию. Сделаем наш шаблон "Резиновым".

 Нажмем "Сохранить".

Резиновый шаблон Джумла

 Перегружаем наш сайт. Как видите фон исчез.

Резиновый шаблон Джумла

  Осталась одна вкладка в Менеджере шаблонов – "Привязка к меню".

 Мы ничего менять не будем.

Вкладка в Менеджере шаблонов – "Привязка к меню"

 Коротко, что здесь настраивается.

 Повторюсь, Джумла весьма гибкая CMS. Разработчики предусмотрели даже возможность для каждого пункта меню, использовать свой шаблон, с различными настройками.

 Подробнее об использовании нескольких шаблонов для одного сайта, будет рассказано позже.

 В следующем уроке займёмся добавлением фотографий на сайт.