Обзоры расширений Joomla

 

 

 

JM Hot News – это адаптивный, готовый, профессиональный шаблон Joomla 3 для создания новостных сайтов. Сам шаблон Джумлы можно посмотреть на демонстрационном сайте разработчика. Его панель управления полностью переведена на русский язык. При её помощи Вы сможете изменять базовые настройки шаблона без необходимости правки исходных файлов (без знания CSS, HTML и PHP). В данном шаблоне особое внимание уделено представлению большого количества информации, как на главной странице, так и в меню.

Обзор проводится в последней, на момент написания статьи (11.06.2016), русскоязычной версии JM Hot News в Joomla 3.5.1. Кроме самого шаблона Вы получите лицензию на такие расширения (версии указаны на момент написания статьи):

  • DJ-MediaTools 2.6.1. Компонент галереи изображений и видео для Joomla с поддержкой VirtueMart Это позволит создавать слайдер VirtueMart, галереи с товарами и другое.
  • DJ-MegaMenu 3.4.1. Компонент (модуль, плагин) меню, мега-меню и мобильного меню со множеством настроек и поддержкой вставки модулей в меню.
  • DJ-Tabs 1.3.1. Это расширение Joomla для отображения контента сайта во вкладках или аккордеоне

Особенности JM Hot News

Вместе с присущими всем шаблонам от Joomla-Monster.com на фреймворке EF4 особенностями в типографике, оформлении модулей и работе с макетом\позициями шаблона у JM Hot News есть свои изюминки.

  • Возможность настройки цветов различных элементов модулей для нескольких CSS-стилей прямо из панели управления шаблона.
  • Настройки цветов для DJ-MediaTools.
  • Наличие «тематических» элементов (модулей), оформленных специально для новостной тематики.

Приведу несколько изображений с примерами шаблона.

JM Hot News
JM Hot News
Русский шаблон Joomla
Русский шаблон Joomla
Новостной шаблон Joomla
Новостной шаблон Joomla
Шаблон новостного портала Joomla
Шаблон новостного портала Joomla

Правка CSS и LESS в шаблоне

По материалам статьи «How to modify LESS and CSS files in Joomla 3.x template?». Рассмотрим пример редактирование CSS-стилей шаблона Joomla. Это может понадобиться для изменения внешнего вида различных элементов сайта: шрифтов, фоновых цветов, модулей, шапки и так далее. В настройках шаблона есть возможность изменения некоторых параметров, но при помощи правки CSS у Вас появится больше возможностей.

Безусловно, Вы можете внести правки в исходные CSS-файлы, но это не совсем правильно. Так как при обновлении шаблона Ваши изменения могут быть утеряны. Правка шаблонов Joomla 3 происходит при помощи языка стилей LESS. CSS-стили шаблона формируются на основании LESS.

Для работы с LESS и CSS можно использовать, например, или Notepad++ или Aptana Studio editor. В Notepad++, для удобства, нужно импортировать специальный файл, чтобы программа подсвечивала синтаксические конструкции LESS. Но это не обязательно. Также понадобится Firebug – это специальное дополнение для браузера Mozilla Firefox. Или можно воспользоваться встроенными в популярные браузеры инструментами для веб-разработчиков. Для этого нажмите сочетание клавши «Ctrl + Shift + i» (в Opera или Google Chrome).

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

Все LESS-файлы находятся в «templates/nazvanie-vashego-shablona/less». Рассмотрим, в общем, что содержится в различных файлах. Примечание: «ltr» – файлы, относящиеся к письменности слева направо; «rtr» – файлы, относящиеся к письменности справа налево.

  • Папка «override» содержит две вложенные папки «ltr» и «rtl». В них содержатся файлы переназначения bootstrap (для сайтов с письменностью слева направо и справа налево соответственно). Для русского и украинского языков – «ltr».
  • Файл «animated-buttons.less». Стили анимированных кнопок, используемых в типографике и настраиваемых модулях.
  • Файл «boostrap.less» и «boostrap_rtl.less». Стили boostrap.
  • Файл «boostrap_variables.less». Переменные boostrap.
  • Файл «bootstrap_responsive.less » и «bootstrap_responsive_rtl.less ». Отзывчивые стили boostrap.
  • Файл «comingsoon.less». Стили страницы «Скоро будет».
  • Файл «editor.less». Стили типографики и настраиваемых модулей.
  • Файл «joomla.less». Стили для стандартных расширений Joomla.
  • Файл «layout.less». Стили макета шаблона.
  • Файл «menus.less». Стили меню Joomla.
  • Файл «modules.less». Стили модулей шаблона.
  • Файл «offcanvas.less». Стили панели\позиции Offcanvas.
  • Файл «offline.less». Стиль страницы, которая отображается в случаях, когда в общих настройках Joomla на вкладке Сайт для опции Сайт выключен (offline) выбрано Да.
  • Файл «template.less». Стили страниц и модулей Joomla.
  • Файл «template_mixins.less». Правила приёмов mixins в шаблоне.
  • Файл «template_responsive.less». Отзывчивые стили шаблона.
  • Файл «template_variables.less». LESS переменные шаблона. Тут Вы сможете задать переменные для LESS-файлов шаблона. Тут же содержатся настройки цветовых схем шаблона и цвета отдельных элементов (верхней панели, фона подвала и т. д.).
  • Файлы «djmediatools.less», «djmediatools_responsive.less», «djmediatools_rtl.less», «djmegamenu.less», «djmegamenu_rtl.less», «djtabs.less», «djtabs_rtl.less», «dj….less». Стили для различных расширений DJ-extensions.com.

Если Вам нужно внести какие-то изменения в стили, то при помощи Firebug (или аналогов) Вы можете определить CSS класс и стили нужного элемента (рисунок ниже).

Анализ CSS при помощи Firebug
Анализ CSS при помощи Firebug

Обратите внимание, что Firebug показывает, в каком именно CSS-файле находится нужный класс. Вам остаётся найти LESS-файл, содержащий этот класс, в моём случае это «djmediatools.less», и внести в него изменения (рисунок ниже).

LESS-файл
LESS-файл

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

Если в существующих LESS-файлах нет нужных стилей, например, для каких-то сторонних расширений, можно создать в папке «templates/nazvanie-vashego-shablona/less» файл «custom.less» и в него вписывать все нужные стили. Они будут переопределять существующие.

Об обновлениях в в шаблонах на базе фремворка EF4, касающихся данного вопроса, Вы можете прочесть в статье «Обзор JM Minima. Чистый шаблон Joomla».

Русификатор JM Hot News

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

 

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

 

Полезные ссылки: