Free login module joomla

Вставка стилей в редактор JCE для Joomla

Стили CSS в JCEТрудоемкий процесс создания веб-страниц можно значительно облегчить, воспользовавшись широким функционалом редактора JCE. Одним из важнейших вспомогательных инструментов, облегчающих создание материалов для сайта, являются встроенные стили CSS, предназначенные для централизованной настройки внешнего вида страниц. В редакторе JCE выбор заранее подготовленных CSS стилей для оформления текста осуществляется с помощью кнопки "Стили" в панели инструментов. Благодаря встроенным стилям очень удобно делать различные вставки в текст сайта, которые требуют обращения внимания пользователя. У Вас возможно возникнет вопрос: как в меню "Стили" визуального редактора JCE добавить свои собственные CSS стили? Именно об этом сегодня пойдёт речь в этой статье.

При клике по кнопке "Стили", расположенной в верхней части панели инструментов редактора, откроется выпадающее окно с перечнем встроенных стилей шаблона Joomla.


CSS стили в JCE

Сегодня мы с вами подготовим и добавим свои собственные CSS стили.

Прежде всего нам необходимо подготовить файл стилей для редактора JCE. С помощью блокнота Notepad++ создайте файл, например, editоr.css.  Теперь вставляем в него необходимые нам CSS стили. Вы можете указать любой фон, выбрать рамку, установить шрифты и, при желании, поместить внутрь информационного блока небольшое изображение или анимированный смайлик – в общем всё, на что способна Ваша фантазия!

В моем случае получилось следующее:
.info {
background-color: # C1E3E9;
background-image: url("../images/editor/info.png");
}
.system {
background-color: #E1FFD4;
background-image: url("../images/editor/system.png");
}
Можно сделать так, чтобы при наведении курсора на информационный блок он увеличивался, например, в 1, 1 раза:
.vajno:hover {
transform: scale(1.1);
}
.vajno {
background-color: #F5E1D0;
background-image: url("../images/editor/vajno.png");
}
.statiya-v-temu {
background-color: #DAFFD4;
background-image: url('/../images/editor/bookmark.png');
border: 3px dashed #3f9f3f;
border-radius: 5px;
font-weight: bold;
}
Общие свойства для информационных блоков можно обьединить:
.vajno, .info, .system , .statiya-v-temu {
background-position: 20px 50%;
background-repeat: no-repeat;
margin: 10px;
padding: 15px 20px 15px 80px;
position: relative;
}
.vajno, .info, .system {
border: 1px solid #b3876c;
border-radius: 10px;
box-shadow: 3px 3px 3px 3px #999;
}

 

Далее переходим в настройки редактора JCE: Компоненты→Редактор JCE→Общие настройки редактора и остановимся на разделе "Форматирование и отображение"

"Форматирование и отображение"

Стиль редактора (Editor Styles) - использовать CSS для отображения контента и списка стилей редактора:

  • CSS шаблона (Template CSS Files) - используется CSS-файл (template.css или template_css.css) вашего шаблона Joomla!
  • Пользовательский CSS (Custom CSS Files) - используется собственный CSS-файл
  • По умолчанию (Default)- используется CSS-файл Редактора JCE

Здесь необходимо выключить использование CSS-файла вашего шаблона Joomla "Template CSS Files", при этом пропадут стили из основного файла css вашей темы (если они там были), но будут доступны стили из отдельного файла, указанного в "Custom CSS Files" то есть в поле "Стиль редактора" выбираем "Пользовательский CSS". (Как указано на скриншоте). После чего прописываем путь к файлу с будущими стилями: templates/ваш_шаблон/css/editоr.css.

 

Файл должен лежать в каталоге с css файлами шаблона.

Кроме этого, пропишите эти же стили в главном  CSS-файле вашего шаблона, у меня это theme.css (шаблон от YooTheme) у вас, скорей всего, это будет  template.css или другой, в зависимости от применяемого шаблона.
Сохраняем изменения в настройках редактора и переходим в любой материал Joomla. Выделяем фрагмент текста, нажимает в панели редактора JCE инструмент "Стили" и видим список только что добавленных нами стилей. Теперь, если мы применим любой из стилей к выделенному тексту, то редактор автоматически поместит выделенный текст в нужный стиль.

Встроенные стили CSS

О том как создавать стили в редакторе JCE на лету, без подготовки их заранее, читайте в статье "Редактор JCE | Изменение стиля текста". 

Если у Вас возникли вопросы по данной статье пишите, пожалуйста, о них в комментариях.

↓↓↓ Понравилась статья? Жми на кнопки! ↓↓↓

Тэги: CSS-стили, редактор JCE

Добавить комментарий


Защитный код
Обновить