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

Как добавить свой CSS-класс в редактор TinyMCE

Начиная с Joomla версии 2.5 эта популярная CMS использует поддержку технологии "Lightbox", и теперь для получения этого эффекта не нужно устанавливать сторонние расширения, все уже реализовано в самом движке Joomla, достаточно только в редакторе TinyMCE (нужно использовать расширенный режим редактора) при редактировании изображения прописать необходимый класс.




Для того, чтобы к картинкам на сайте был применим эффект "Lightbox" нужно в окне Добавления/Редактирования изображений на вкладке "Appearance" прописать свой класс в поле "Class":

Как добавить свой CSS-класс в редактор TinyMCE

По умолчанию его там нет, доступны только стандартные классы, которые не нужны:

Как добавить свой CSS-класс в редактор TinyMCE

Но фактически-то класс был создан, и он есть!

 

Как вариант, его можно прописать вручную:

Для этого необходимо в выпадающем списке окна "Class" выбрать строку "(value)" - значение. И вручную прописать это значение.

Для применения эффекта "Lightbox" для изображений нужно написать значение класса следующего вида:

sim-lightbox

где, "sim" - это CSS-префикс вашего сайта. У каждого сайта CSS-префикс может быть как уникальным, так может и совпадать с другим сайтом. Например, у всех шаблонов, сделанных с помощью программы Artisteer, по умолчанию стоит CSS-префикс "art".

 

Использование ручного добавления класса имеет ряд недостатков:

1. Нужно помнить CSS-префикс каждого сайта.

2. Необходимо гораздо больше времени на ручной ввод текста по сравнению с быстрым выбором нужного класса из выпадающего списка.

3. Можно ошибиться при вводе класса, и тогда эффект "Lightbox" не будет работать.




 

Как добавить свой CSS-класс для изображений в редактор TinyMCE

1. Открыть в текстовом редакторе (например, в Notepad++) файл template.css вашего использующегося шаблона сайта (расположен в директории .../templates/[папка вашего шаблона]).

2. Найти в нем текстовый блок с описанием стилей для эффекта "Lightbox". Обычно это текст примерно следующего содержания:

img.sim-lightbox
{
cursor: pointer;
}

Внимание! Вместо "sim" должен CSS-префикс ВАШЕГО САЙТА!

3. Скопировать этот текст в буфер обмена.

4. Открыть в текстовом редакторе (например, в Notepad++) файл editor.css вашего использующегося шаблона сайта (расположен в директории .../templates/[папка вашего шаблона]).

5. Вставить текст из буфера обмена в любое место, которое понравится :) - Для удобства лучше вставить в самый конец, визуально отделив пустыми строками или комментариями от имеющегося текста.

6. Теперь в окне Добавления/Редактирования изображений на вкладке "Appearance" в поле "Class" появилась дополнительная строка - наш класс для эффекта Lightbox:

Как добавить свой CSS-класс в редактор TinyMCE




 

Дополнение:

Режим редактора TinyMCE должен быть выбран - расширенный

Как добавить свой CSS-класс в редактор TinyMCE

Комментарии   

#1 Nik 25.02.2015 01:52
На Joomla 3.3 также можно это реализовать.
Жаль, для Joomla 1.5 этот метод не подходит - слишком устаревшая система.
#2 Сергей 05.02.2017 12:52
Вариант написания в файле template.css может быть и таким:

.sim-lightbox, .sim-lightbox-wrapper .sim-lightbox-image
{
cursor: pointer;
}

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

Вы можете авторизоваться с помощью социальных сетей:
     

Или заполнить форму:

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


      Ошибки Jeppesen FD PRO
      Ошибки Jeppesen FD PRO

      17 октября программа Jeppesen FD PRO получила одобрение от EASA (European Aviation Safety Agency) как програмный продукт для EFB. Одновременно с программой Jeppesen FD PRO была одобрена (сертифицирована) программа Jeppesen TC PRO.




      Проверка сроков действия НБД Jeppesen в EFB
      Проверка сроков действия НБД Jeppesen в EFB

      Не смотря на информацию в статье "Срок действия баз данных Jeppesen для EFB" у некоторых товарищей периодически возникают вопросы относительно актуальности баз данных Jeppesen в программах EFB. С одной стороны, их вопросы вполне логичны, так как интерфейс программы Jeppesen FD PRO все еще не идеален, и некоторые моменты весьма не однозначны для пользователей. Например, если открыть в приложении Jeppesen FD PRO страницу Updates, то можно увидеть, что...




      Apple MDM - использование iOS-устройств на предприятии
      Apple MDM - использование iOS-устройств на предприятии

      Устройства iPad и iPhone способны трансформировать бизнес компании и методы работы сотрудников организации. Эти устройства могут существенно повысить продуктивность, дать свободу действий и дополнительный запас гибкости, позволив работать по-новому, не так, как раньше. Новый подход к выполнению рабочих обязанностей идёт на пользу всей организации.




      Как настроить skype
      Как настроить skype

      Многие пользуются бесплатной программой skype. Но крайние версии скайпа уже не так лояльны к пользователям - программа стала слишком самостоятельной и в некоторых случаях напрягает своими действиями. Плохие черты характера skype стали более активно проявляться после покупки скайпа компанией Microsoft. Многим не понравилась эта "сделка с дьяволом", но популярность скайпа не сильно уменьшилась...




      Как повернуть видео на 90 градусов?
      Как повернуть видео на 90 градусов?

      Многие современные гаджеты имеют встроенную фото/видео камеру (а то и даже две): планшеты, видео регистраторы, мобильные телефоны... Последние по причине очень широкого распространения довольно часто используются владельцами в качестве средства фото или видеофиксации. Причем, зачастую совершенно не задумываясь над итогом, держат мобильный телефон так, как удобнее, а не так, как нужно для...




      Windows не видит флэшку - что делать?
      Windows не видит флэшку - что делать?

      Флэшка берет букву сетевого диска В данной статье рассмотривается ситуация с исправной рабочей флэшкой без вирусов, которая нормально работает на других компьютерах. В некоторых организациях у пользователей может появиться проблема, заключающаяся в том, что при подключении флэшки к компьютеру операционная система Windows XP или 7 не видит ее как диск, хотя как физическое устройство флэшка обнаруживается.




      Как распознать музыку
      Как распознать музыку

      Бывает, услышишь мелодию и сразу хочется узнать, что это за композиция, кто автор, кто исполнитель этого шедевра??? К сожалению иногда играть в игру "Угадай мелодию" довольно сложно - за 2000 с лишним лет люди придумали столько песен, столько мелодий..., что все запомнить ну просто не реально. Тем более, что многие из них, особенно попсовые иногда очень похожи.



Яндекс.Метрика