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

Комментарии (2)

This comment was minimized by the moderator on the site

На Joomla 3.3 также можно это реализовать.
Жаль, для Joomla 1.5 этот метод не подходит - слишком устаревшая система.

This comment was minimized by the moderator on the site

Вариант написания в файле template.css может быть и таким:

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

Здесь не опубликовано еще ни одного комментария

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

  1. Опубликовать комментарий как Гость.
0 Значки
Вложения (0 / 3)
Поделитесь своим местоположением

      Идентификаторы применения в УПД
      Идентификаторы применения в УПД

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




      Как почистить кэш панели управления ISP Manager 5
      Как почистить кэш панели управления ISP Manager 5

      Иногда в панели управления сервером ISP Manager Lite в интерфейсе могут быть "глюки", например, отсутствие некоторых элементов управления или всплывающие окна с указанием на ошибку.




      Python - FizzBuzz
      Python - FizzBuzz

      Один программист при устройстве на работу получил задание - написать программу, которая выводит на экран числа от 1 до 100. При этом вместо чисел, кратных трем, программа должна выводить слово «Fizz», а вместо чисел, кратных пяти — слово «Buzz». Если число кратно и 3, и 5, то программа должна выводить слово «FizzBuzz».




      Эволюция Jeppesen - улучшенные схемы процедур SID/STAR
      Эволюция Jeppesen - улучшенные схемы процедур SID/STAR

      Основываясь на обратной связи от пилотов, компания Jeppesen приняла решение усовершенствовать свои IFR-схемы процедур SID и STAR. Эти усовершенствования нацелены на повышение ситуационной осведомленности, сократить продолжительность полета по приборам без наблюдения за внекабинной обстановкой (reduce heads-down time = уменьшение времени отвлечения внимания пилотов от пилотажных приборов) и,...




      Как отобразить html, php-код или Java-скрипт на странице в Joomla с помощью плагина Sourcerer
      Как отобразить html, php-код или Java-скрипт на странице в Joomla с помощью плагина Sourcerer

      Иногда бывает необходимо отобразить HTLM-код (или PHP-код или java-скрипт) в статье на сайте. Обычно текстовый редактор нещадно обрезает все теги и скрипты, и создателю статьи приходится делать скриншот кода и вставлять его как картинку. С одной стороны это просто и надежно - вставить легко и код не может повредиться, пока жива сама картинка. Но для посетителей сайта такая ситуация не очень приятная...




      Срок действия баз данных Jeppesen для EFB
      Срок действия баз данных Jeppesen для EFB

      Базы данных Jeppesen используются в EFB в следующих программах: Mobile TC, Mobile TC PRO, Mobile FD и Mobile FD PRO. Все перечисленные приложения могут быть установлены, активированы и использоваться в планшетах iPad и содержат следующие базы данных: TerminalChart (схемы и процедуры аэродромов); Text (текстовая информация – General, ATC, Radio Aids, Entry Requirements и др.) Enroute (маршрутная карта) – только у...




      Восстановление разделов дисков
      Восстановление разделов дисков

      Как восстановить раздел диска? Не важно, какой это диск: винчестер компьютера, переносной USB-жесткий диск или USB-флэшка. Причиной сбоя могут быть чаще всего вирусы. В этом случае при попытке открыть диск виндовс сообщает некую прискорбную информацию, которая никак не может радовать, например: "Диск в устройстве [буква диска] не отформатирован. Произвести его форматирование?"  window.yaContextCb=window.yaContextCb||[] window.yaContextCb.push(()=>{...



Яндекс.Метрика
Сайт работает на быстром VPS/VDS хостинге от FASTVPS