Шаблоны

Обзор JM Joomads. Адаптивный шаблон Joomla 3

 

  • Тип – шаблон доски Joomla на русском языке.

 

 

JM Joomads – это адаптивный шаблон Joomla 3 на русском языке для доски объявлений или каталога. Как и все шаблоны от Joomla-Monster.com на фреймворке EF4 он смотрится очень стильно, профессионально и современно. Демонстрационный пример шаблона Joomla для аукциона. Безусловно, при желании, данный шаблон можно использовать не только для доски объявлений или каталога ­– он универсальный. А учитывая множество настроек (макет, цвета, типографика) его можно изменить даже без правки CSS-кода. Шаблон отлично подойдёт для сайта фирмы, организации и так далее (с или без каталога продукции). Также это будет очень хорошим решением для тех, кто хочет создать интернет-магазин, но ему не нужна полноценная корзина (с покупками на сайте). Хотя DJ-Classifieds - компонент для создания каталога и\или доски объявлений, но в нём есть и такие возможности, как оформление покупки на сайте и выбор доставки.

Обзор будет проходить в последней, на момент написания статьи (16.02.2016), версии шаблона доски Joomla 3.4.8 на русском языке JM Joomads 1.0.2. Помимо самого шаблона, вы получите лицензию на такие расширения (версии указаны на момент написания статьи):

  • DJ-Classifieds 3.4.1.1. Компонент создания доски объявлений и каталога.
  • DJ-MediaTools 2.6.1. Компонент галереи изображений и видео для Joomla.
  • DJ-MegaMenu 3.3.1. Компонент (модуль, плагин) меню, мега-меню и мобильного меню с множеством настроек и поддержкой вставки модулей в меню.
  • DJ-Reviews 1.1. Компонент рейтингов (оценок пользователей).

Особенности JM Joomads

Помимо присущих всем шаблонам от Joomla-Monster.com на фреймворке EF4 особенностям у этого шаблона доски Joomla есть свои изюминки.

В разделе Цветовые модификации (рисунок ниже) доступны опции для изменения цветов модулей в целом для Джумла, а также некоторых элементов модулей DJ-Mediatools и DJ-Classifieds.

JM Joomads
JM Joomads

Другие возможности данного шаблона аналогичны тем, что описаны в статьях «Обзор JM Job Listings. Шаблон каталога Joomla» и «Обзор JM Job Listings. Настраиваемый шаблон Joomla».

Суффиксы модулей Joomla

Как и во многих профессиональных шаблонах в JM Joomads есть специальные CSS-суффиксы для быстрого изменения внешнего вида модулей Joomla (рисунок ниже). О том, как их использовать можно узнать в видео из статьи «Обзор JM Classifiedads. Шаблон в стиле Material Design».

Адаптивный шаблон Joomla 3
Адаптивный шаблон Joomla 3

Суффикс CSS-класса модуля позволяет применить заложенные в шаблон стили для оформления модуля. Это относится не только к JM Joomads, а и ко всем шаблонам от Joomla-Monster.com и других профессиональных студий. Работает это аналогично для любого шаблона. Покажу на примере JM Joomads. В быстром старте шаблона есть страница с суффиксами CSS-класса модуля (рисунок выше) (в «Template – Module Suffixes»). Или можно посмотреть на демонстрационном сайте разработчика. На данной странице показан пример того, как может выглядеть тот или иной тип модуля при условии применения определённого суффикса модуля Joomla, там же указаны эти суффиксы. Вам не нужно самостоятельно править CSS-стили шаблона или изменять его настройки. Достаточно зайти в настройки любого модуля (в менеджере модулей Joomla) и на вкладке Дополнительные параметры в поле Суффикс CSS-класса модуля ввести нужное Вам название суффикса (рисунок ниже). Обратите внимание, что перед суффиксом стоит пробел.

Шаблон Joomla 3 на русском языке
Шаблон Joomla 3 на русском языке

На рисунке ниже показан пример оформления «стандартного» модуля меню Joomla:

  1. Верхнее изображение – без указания стиля. То есть, со стилем шаблона по умолчанию.
  2. Среднее изображение – суффикс CSS-класса модуля « white-ms».
  3. Нижнее изображение – суффикс CSS-класса модуля « tag-ms»
Суффиксы модулей Joomla
Суффиксы модулей Joomla

Также можно добавлять не один суффикс CSS-класса модуля, а несколько. Например, для оформления заголовка модуля и самого модуля. На рисунке ниже в верхней части показан пример настройки модуля, а в нижней – результат во фронтальной части сайта.

Суффикс CSS-класса модуля
Суффикс CSS-класса модуля

Как Вы уже поняли, есть суффиксы CSS-классов для заголовков модулей и для самого модуля (тела). Не все они между собой сочетаются визуально. Нужно подбирать. Обратите внимание, что далеко не каждый суффикс подойдёт абсолютно для любого модуля. Есть суффиксы, предназначенные для конкретного типа модулей, например, для модуля слайд-шоу «DJ-MediaTools Album» или для модуля поиска DJ-Classifieds.

Помимо общего изменения внешнего вида модуля есть суффиксы, которые позволяют, например, убрать нижний отступ модуля – « margin-ms», или сделать модуль определённой высоты – « _mod300» (где «300» – высота модуля в пикселях).

Типографка и оформление текстов

На демонстрационном сайте шаблона или на его странице «Template – Typography» в быстром старте Вы можете найти множество вариантов для красивого оформления текста, изображений, видео и других элементов материалов Joomla

Шаблон доски Joomla
Шаблон доски Joomla

На демонстрационном сайте Вы сможете увидеть весь перечень классов для оформления тех или иных материалов. Это работает по аналогии с суффиксами CSS-классов модулей. То есть, Вы задаёте нужному элементу материала определённый стиль и этот элемент (текст, изображение, список и т.д.) принимает определённый вид (внешнее оформление, анимацию и т.д.). На рисунке ниже показаны следующие примеры применения стилей к материалам:

  1. Изображение монстра (баннера) в рамке. При наведении курсора мыши на изображения происходит анимация и появляется ссылка для перехода на другой сайт.
  2. Надпись «JM University для слабовидящих» – заголовок четвёртого уровня (H4).
  3. Изображение рядом с абзацем «Отличительной особенностью данного…».
  4. Текст в рамке «Настройки JM University аналогичны настройкам JM Job Listings, рассмотренных в предыдущей статье. Не будем повторять, а остановимся только на тех, что отличаются.».
Типографика и оформление текстов
Типографика и оформление текстов

В редакторе материалов Joomla эти элементы выглядят так, как показано на рисунке ниже.

Редактор материалов Joomla
Редактор материалов Joomla

А в HTML-коде это выглядит так, как показано на рисунке ниже.

HTML-код
HTML-код
  1. Голубым обведён фрагмент кода, отвечающий за изображение монстра (баннера) в рамке.
  2. Зелёным подчёркнуты открывающий и закрывающий теги, надпись «JM University для слабовидящих».
  3. Красным подчёркнут открывающий и закрывающий теги, которые определяют, рядом с каким абзацем будет добавлено изображение.
  4. Лиловым подчёркнуты открывающий и закрывающий теги, которые определяют, какой абзац будет обведён рамкой.

Как видите, достаточно просто добавить класс, например, «class="jmcheck"» к тегу абзаца и рядом с ним появится изображение, добавятся отступы, выравнивания.

Как и в случае с модулями, для элементов материалов можно добавлять несколько классов. Например, «class="bluefill jmcheck"». В результате получится то, что показано на рисунке ниже.

Пример применения двух классов
Пример применения двух классов

Русификатор JM Joomads

Скачать русификатор JM Joomads.

 

Как видите, JM Joomads – это не только адаптивный шаблон Joomla 3 на русском языке для создания доски объявлений или каталога, но и универсальный шаблон с достаточно широкими возможностями по стилизации контента и модулей без знания CSS. Это относится не только к JM Joomads, но и ко всем шаблонам от Joomla-Monster.com на фреймворке EF4. В следующей статье «Обзор JM Joomclassifieds. Шаблон доски объявлений Joomla 3» мы рассмотрим ещё один шаблон для DJ-Classifieds.

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

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