Популярные расширения Joomla 3

Как включить пользовательские стили редактора JCE Joomla

 

Вступление

Редактор JCE Joomla является сторонним расширением для создания и редактирования контента Joomla! ®. А проще говоря. Удобный визуальный редактор с массой дополнительных возможностей. О JCE я писал в статье тут

Задача данной статьи

Задача данной статьи, включить пользовательские стили редактора JCE Joomla. Проще говоря, активировать кнопку «Стиль» редактора и добавить на эту кнопку нужные стили оформления статей.

Поясню. В редакторе JCE под кнопку «Стиль» можно добавить любое оформление статьи. Например, специальное выделение совета в тексте или выделение важной информации, или добавления специальной таблицы.

vklyuchit css jce 12

Три варианта настройки стилей в JCE

В редакторе JCE можно настроить три варианта использования стиля CSS. Для этого идем на вкладку Компоненты→JCE редактор→Общие настройки→Форматирование и отражение. Видим в строке "Стиль редактора" список:

  • По-умолчанию (стиль самого редактора JCE);
  • CSS шаблона (подключаем стиль рабочего шаблона);
  • Пользовательский CSS (подключаем любой, написанный самостоятельно или со стороннего сайта стиль CSS).

vklyuchit css jce 2

vklyuchit css jce 3

В этой статье я добавляю пользовательский стиль CSS. Но поясню, что значат два других варианта.

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

Вполне возможно, что авторы вашего шаблона уже добавили нужные файлы стиля в ваш рабочий шаблон. Лежат файлы стилей шаблона в каталоге с вашей темой (templates/название_темы/CSS). Это настройка подключит стиль в файле template.css шаблона.

Настройка «По умолчанию» (Стиль JCE)

Эта настройка должна подключать стили JCE редактора.

Пользовательский CSS (Custom CSS)

Этот выбор включает использование пользовательского стиля CSS, который сначала нужно создать или «импортировать».

Как создать пользовательский стиль CSS JCE

Вариант 1, Импорт стилей

Смысл импорта стилей в следующем. Нам нужно создать (в текстовом редакторе, например, Notepad++) файл css под названием editor.css (название произвольное) со следующим содержанием:

@import url(file1.css);

, где, file1.css это пользовательский файл css, помещенный в каталог css вашей рабочей темы.

Можно подключить файл стилей с внешнего сайта, например, так (нужны права CHMOD 777, на доступ к запрашиваемому файлу):

@import url("https://sete.com/.../editor.css");

Можно подключить любой файл из НЕ рабочей темы вашего сайта.  

@import url (templates /.../file.css);

Причем, таких файлов может быть несколько, но лучше объединить их в один файл.

Вариант 2

Пишем самостоятельно файл CSS в котором прописываем все стили, которые хотим. Вот кусочек такого файла:

.inf {

background-color: # xxxxxx;

}

.syst {

background-color: #xxxxxx;

}

.vazhno {

background-color: #xxxxxx;

}

Этот код добавить стили inf (инфо), syst (системный), vazhno (важно) под кнопку стиль.

Можно пойти дальше. Tcnm плагин стилей под названием "XTypo". Качаем плагин с сайта (https://www.templateplazza.com/joomla-extensions) и заимствуем файл css этого плагина.

Далее, сохраняем наш пользовательский файл css, с любым именем, например, [editor] и по FTP заливаем файл [editor.css] в каталог  [templates/название_темы/css].

vklyuchit css jce 5

Подключаем пользоватиельский файл стилей

  • Идем в настройки редактора JCE.
  • В общих настройках компонента JCE в модуле: «Форматирование и отображение» в графе «Стиль редактора» выставляем «Пользовательский CSS»,
  • в графе «Пользовательский CSS» пишем такую строку: templates/название-папки-с-вашей-темой/css/editor.css (без точки в конце)
  • Не забываем сохраняться.

vklyuchit css jce 4

Всё! Этим действием мы подключили пользовательский файл css к редатору JCE. Сами стили, которые мы прописали, в этом файле будут на кнопке «Стиль» в редакторе.

vklyuchit css jce 10

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

  • JCE редактор: https://www.joomlacontenteditor.net/
  • CSS Bootstrap: http://bootstrap-3.ru/css.php

 ©Joomla-abc.ru

Другие статьи раздела: расширения Joomla

 

 

Оставьте свой комментарий

Опубликовать комментарий в качестве гостя

0
terms and condition.
  • Комментариев нет

Поиск по сайту

Популярные

Уроки Joomla 3