- Тип – шаблон новостного портала Joomla 3 и 2.5.
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.
- Наличие «тематических» элементов (модулей), оформленных специально для новостной тематики.
Приведу несколько изображений с примерами шаблона.
Правка 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++. В 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 класс и стили нужного элемента (рисунок ниже).
Обратите внимание, что Firebug показывает, в каком именно CSS-файле находится нужный класс. Вам остаётся найти LESS-файл, содержащий этот класс, в моём случае это «djmediatools.less», и внести в него изменения (рисунок ниже).
После окончания редактирования обязательно отключите опцию Исходная карта (LESS) в настройках шаблона в разделе Расширенные возможности, так как она может существенно увеличить время загрузки страницы.
Если в существующих LESS-файлах нет нужных стилей, например, для каких-то сторонних расширений, можно создать в папке «templates/nazvanie-vashego-shablona/less» файл «custom.less» и в него вписывать все нужные стили. Они будут переопределять существующие.
Об обновлениях в в шаблонах на базе фремворка EF4, касающихся данного вопроса, Вы можете прочесть в статье «Обзор JM Minima. Чистый шаблон Joomla».
Русификатор JM Hot News
Надеюсь, что эта статья помогла узнать полезное о русском шаблоне Joomla для новостного портала, что немного упростит процесс редактирования CSS-стилей.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
