Многие создатели сайтов на 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;
}

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

     

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


      SQL. Подсветка кода в MS Word
      SQL. Подсветка кода в MS Word

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




      Как переустановить сетевой протокол TCP IP
      Как переустановить сетевой протокол TCP IP

      При установке в составе какой-нибудь сборки Windows иногда может некорректно установиться сетевой протокол TCP IP. В этом случае нужно его переустановить, и по-другому просто никак. Как же переустановить сетевой протокол TCP IP? - без небольших "танцев с бубном" этого не сделать.




      Курс авиационного английского
      Курс авиационного английского "AirSpeak" (Небесный разговор)

      AirSpeak - наверное самый известный курс обучения летного и диспетчерского состава фразеологии радиообмена. Ситуации, приведенные в этом курсе - максимально приближены к реальной эксплуатации воздушных судов и обслуживания воздушного движения. Рассмотрены, конечно, только самые основные и элементарные случаи. Но основной упор данного курса делается на количество повторений и понимание основ...




      Принцип работы flightradar24
      Принцип работы flightradar24

      Flightradar24© является следящей системой за полетами воздушных судов, отображающей в режиме реального времени воздушное движение всего мира. Для отображения воздушных поток Flightradar24 использует несколько источников информации: ADS-B, MLAT и FAA. Данные от ADS-B, MLAT и FAA объединяются с расписанием рейсов и информацией о статусах воздушных судов, получаемых от авиакомпаний и аэропортов, - все это выполняется в целях...




      Как настроить Wi-Fi Router DLINK DIR-300 NRU B5 под Билайн
      Как настроить Wi-Fi Router DLINK DIR-300 NRU B5 под Билайн

      В мае 2011 года я написал и разместил на сайте статью "Как настроить Wi-Fi Router DLINK DIR-300 NRU под Билайн". Писал этот мануал в первую очередь для себя, чтоб качественная шпаргалка всегда была под рукой. Со временем статью немного дополнил и откорректировал в соответствии с новой информацией и фактическим опытом настройки данного типа рутеров. Чуть более чем за полгода эта статья была просмотрена 35 тысяч раз, к ней было написано 5 страниц комментариев к статье: как благодарных, так и...




      Установка программы Jeppesen Services Update Manager (JSUM)
      Установка программы Jeppesen Services Update Manager (JSUM)

      Программа Jeppesen Services Update Manager (JSUM) предназначена для обновления навигационных баз данных различных спутниковых навигационных систем (Honeywell Primus Epic, Honeywell Apex, the Avidyne EX5000 MFD, Garmin 155, 430/530 Series GPS, Garmin G1000 Flight Deck и др.). Запись БД осуществляется с помощью специального карт-ридера - так называемой приставки SkyBound.




      JeppView против Аэропорт Оптима
      JeppView против Аэропорт Оптима

      Всем давно известно, что американская фирма Jeppesen является лидером в области аэронавигационных данных, будь то чисто навигационные данные (ARINC-424 и пр.), данные по препятствиям или различные авиационные компьютерные приложения. Другие поставщики аэронавигационных продуктов тоже стараются и создают свои варианты. Давайте сравним как-бы аналогичные продукты от Jeppesen и от ФГУП ЦАИ (бывшее ЦАИ ГА).



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