Шаблон protostar joomla 3

Шаблон protostar joomla 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Находится она по адресу — OpenServerdomainsmebelipimages

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

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

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

Читайте также:  Как сохранить все контакты на сим карту

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

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

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

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

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

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

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

Позиции модулей в шаблоне Protostar для joomla 3

Я неравнодушна к шаблону Protostar. Это прекрасная разработка, достаточно нейтральная, не перегруженная и гибкая. Из него можно сделать очень много! Вот картинка с позициями модулей Protostar.

© 2020 URSA-WEB / Веб-студия БОЛЬШАЯ МЕДВЕДИЦА

Внешний вид сайта и его удобство для пользователя – это основная часть работы над интернет-проектом. Не удобный и не красивый дизайн отпугнет новых пользователей и ни в коей мере не мотивирует их остаться на подобных web-страницах подольше. Такова уж человеческая психика. Люди любят красивые вещи. К примеру, покупая автомобиль, будущий владелец смотрит на его технические характеристики, но внешний вид всегда остается одним из решающих факторов для выбора той или иной модели. С сайтами тоже самое…


Рисунок 1. Какой автомобиль выбрать?

На рисунке 1 представлены два подхода к дизайну. Разумеется, здесь присутствует попытка совместить несовместимое, но все-таки: какую из этих двух машин предпочтут большинство?

Терминология

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

Дизайн – это расположение и обрисовка объектов, согласно их функциональному назначению, конечным целям и ряду определенных требований характерных для той или иной сферы применения. Данный термин применяется в различных сферах деятельности:

  • искусство (как что-то естественное, гармонирующее, инстинктивное и т.д.);
  • производство и техника (внешний вид различных технических устройств);
  • моделирование различных процессов.

Макет страницы – это подраздел дизайна (в данном случае, подразумевается дизайн графический), который отвечает за местоположение отдельных объектов на web-странице и их обработку. Если говорить профессиональным языком web-дизайнеров, работающих в CMS Joomla, то это размещение компонентов и модулей в конкретном месте интернет-страницы.

Цвета – это элемент визуального восприятия объектов. Часто определенные цвета у людей четко ассоциируются с конкретными объектами или некоторыми ситуациями. Человеческий глаз очень чувствителен к малейшим цветовым оттенкам, а HTML и таблицы стилей CSS позволяют web-дизайнерам использовать при создании сайтов почти 16,8 миллионов цветов. Именно такое количество дает комбинация оттенков красного, зеленого, а также синего (RGB) в градации от 0 до 255. Обозначения цветовых оттенков могут различаться. Так, например, черный цвет в HTML выглядит в виде #000000, а в формате rgb (0,0,0). Разработчикам сайтов хорошо могут помочь в подборе цветовых решений для сайтов различные инструменты, в частности – генераторы цветовых схем. На рисунке 2 представлен скриншот одной из таких программ.

Рисунок 2. Один из генераторов.

Шаблоны – это макет, с расположенными в определенном порядке объектами. Шаблон используется на большей части страниц, либо на страницах, требующих частой, но минимальной модификации.

Web-дизайн – это понятие достаточно растяжимое. Данный термин объединяет в себе множество самых разнообразных дисциплин и навыков, которые позволяют создавать и обслуживать web-проекты. Наиболее востребованы при этом знание HTML, таблиц стилей CSS, языки JavaScript и PHP, а также умение редактирования фотографий и изображений. Кстати, умение работать с CMS Joomla, тоже достаточно полезный навык для web-дизайнера.

Читайте также:  Сколько секунд потребуется модему передающему сообщения 28800

В помощь web-дизайнеру Joomla предлагает множество разнообразных шаблонов, которые уже содержат в себе конкретные цвета. Но самое главное преимущество шаблона – это предусмотренные в нем расположение, а также форма определенных объектов. Данное свойство в значительной степени облегчают создание хорошего и удобного для пользователей сайта.

Еще одним безусловным преимуществом Joomla (речь идет конкретно о 3 версии) является наличие встроенной библиотеки интерфейса пользователей, а также шаблона Protostar.

Как уже говорилось выше, цветовое оформление это одна из причин, благодаря которой сайт может понравиться или не понравиться пользователям. CMS Joomla устанавливается уже с встроенными стилями и шаблонами. Стиль – это ни что иное, как набор определенных настроек, определяющих цвет, наличие и расположение логотипа, структура макета. У каждого шаблона подобный «набор» может быть разным: в некоторых можно внести огромное количество изменений, в других количество настроек относительно небольшое.

Кстати, стили можно создавать и самостоятельно. Причем, практически неограниченное количество. А затем их можно привязывать к определенным разделам или страницам интернет-проекта.

Структура сайтов

Генерация страниц в CMS Joomla заключается в выводе информации (контента) в HTML-формате одним компонентом совместно с несколькими модулями. Страница строится в соответствии со структурой, заложенной в шаблоне. При этом доступ к конкретной странице обеспечивается собственным адресом (URL), генерирующимся автоматически. На рисунке 3 представлен скриншот страницы, созданной во встроенном шаблоне Beez.


Рисунок 3. Структура страницы.

В центре страницы расположен основной блок с контентом, который создается соответствующим компонентом. Блоки, расположенные сверху и сбоку от основной информации – это различные модули для вывода навигационных панелей (меню), и второстепенной информации, которая дополняет или улучшает юзабилити сайта.

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

Позиции модулей

Разрабатывая структуру сайта, web-дизайнер уже примерно предполагает, где и что у него на сайте будет располагаться. Как следствие, он уже «прикидывает», какие модули будут использоваться и где их информация будет отображена.

Местонахождение модулей в шаблоне называется позицией. В принципе, готовые шаблоны уже содержат определенные позиции. Чтобы их посмотреть следует пройти по ссылке «Просмотр модуля позиций», которая находится в верхнем меню административной панели Joomla (Extensions => Template Manager => Options). Сделав данные манипуляции можно перейти на сайт, используя соответствующий параметр: …/index.php?tp=1. Можно сделать и немного по-другому: Предварительный просмотр в расширениях => Шаблоны => Управление. Рисунок 4 показывает, как это выглядит в панели управления Joomla.


Рисунок 4. Управление шаблонами

А на рисунке 5 можно уже увидеть расположение позиций модулей и их имена на примере шаблона Protostar.


Рисунок 5. Модуль позиции

Поменять расположение того или иного модуля можно поменяв текущую позицию на любую другую, кликнув в меню административной панели на «Расширения» (Extensions) и перейдя на страницу «Управление модулями» (Module Manager).

Читайте также:  Как сделать установочный диск windows 7 ultraiso

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

Встроенные шаблоны

Joomla имеет четыре встроенных шаблона: два для сайта и два для панели администратора. Их предварительно посмотреть, пройдя по ссылкам: Расширения => Управление шаблонами => Шаблоны. Для удобства разработчиков на открывающейся при этом странице предусмотрена фильтрация шаблонов (рисунок 6): для сайта, либо для админки.


Рисунок 6. Менеджер шаблонов

Стили

Использование различных стилей позволяет разработчику придавать одному и тому же шаблону определенную индивидуальность, используя разные цветовые оттенки, логотип и т.п. В готовых шаблонах уже имеется хотя бы один стиль. По умолчанию для сайта можно задать один стиль, используя закладку Стили (Расширения => Управление шаблонами => Стили). Либо назначить каждому разделу сайта или некоторым страницам собственный стиль.

Создать новый стиль для шаблонов Joomla достаточно просто. Для начала следует скопировать уже имеющийся стиль. На рисунке 7 представлен скриншот с примером копирования стиля встроенного шаблона Protostar.


Рисунок 7. Копирование стиля.

Затем в его настройках надо указать новое имя. В примере на рисунке 8 – это «cocoate». Здесь же следует указать применение данного стиля для языков сайта. Кстати, к примеру: в мультиязычных проектах можно присвоить свой стиль для каждого языка.


Рисунок 8. Создание нового стиля.

На соседней вкладке – «Параметры» – следует указать цветовую гамму фона, самого шаблона, прописать варианты отображения всего шаблона (фиксированный, либо подвижный), а также, при необходимости, загрузить логотип (рисунки 9 и 10).


Рисунок 9. Настройка стилей. Вкладке «Параметры»


Рисунок 10. Загрузка нового логотипа.

Как правило, определенный стиль привязан к какому-либо пункту меню. Проще говоря, если кликнуть на первую строку в меню, страницы открываются в зеленом шаблоне, а на вторую – в синем. В примере, на рисунке 11, в меню присутствует всего один пункт, поэтому новый стиль привязывается именно к нему.


Рисунок 11. Привязка к отдельным пунктам меню.

Осталось сохранить новый стиль, после чего можно смотреть результаты на сайте. Разумеется, смотреться он будет уже несколько по-другому (рисунок 12). Кстати, шаблон Protostar адаптирован и под мобильные устройства. Как выглядит новый стиль на мобильных устройствах показано на рисунке 13.


Рисунок 12. Шаблон с новым стилем на PC.


Рисунок 13. Шаблон с новым стилем на мобильном устройстве.

Редактирование шаблонов

Шаблон – основа стиля в CMS Joomla. Состоят шаблоны из набора определенных файлов. Естественно, их можно редактировать. Делать это можно непосредственно в административной панели Joomla в режиме онлайн. Для этого нужно пройти по пути: Расширения (Extensions) => Управление шаблонами (Template Manager) => Шаблоны (Templates) => название шаблона. Рисунок 14 представляет скриншот этого процесса.


Рисунок 14. Редактирование шаблона в админпанели.

Разумеется, для редактирования этих файлов можно использовать и внешние редакторы. Хранятся они в директории …/templates/systems folder. Здесь лежат шаблоны для сайта и страниц, которые подгружаются в том случае, если сайт по каким-то причинам находится в нерабочем состоянии. Шаблоны административной панели лежат в директории …/administrator/templates.

Ссылка на основную публикацию
Что такое секретный режим
Режим инкогнито — приватный режим работы браузера, при работе в браузере не сохраняются данные о посещенных сайтах, поисковых запросах, другие...
Через какое время отключают сим карту мегафон
Часто можно слышать, что некоторые люди вместо одной сим-карты предпочитают пользоваться двумя или сразу несколькими. Это объясняется лояльной политикой компании...
Через прямую l провести плоскость перпендикулярно данной
Не будет преувеличением утверждать, что построение взаимно перпендикулярных прямых и плоскостей наряду с определением расстояния между двумя точками являются основными...
Что такое сенсорный экран на телефоне
Сначала тачскрины (сенсорные экраны) встречались достаточно редко. Их возможно было найти, только лишь в некоторых КПК, PDA (карманных компьютерах). Как...
Adblock detector