Многие создатели сайтов на 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)
Поделитесь своим местоположением

      Как восстановить вкладки в Safari macOS Sierra
      Как восстановить вкладки в Safari macOS Sierra

      Не нужно лишних слов для псевдо-SEO. Закрытые случайно или специально вкладки (предыдущую сессию) браузера Safari в Mac OS Sierra возвращает простая комбинация клавиш:




      Чехол Griffin Survivor для iPad 2
      Чехол Griffin Survivor для iPad 2

      Пользователь планшета iPad рано или поздно обязательно задумается о необходимости приобретения и использования специального чехла для iPad. Какой защитный чехол купить? - каждый решает сам. А какой защитный купить, чтобы планшет смог выжить в любой, даже в экстремальной ситуации? - только Griffin Survivor.




      EFB. Циркуляр AC120-76A
      EFB. Циркуляр AC120-76A

      Этот документ является одним из первых, написанных для Electronic Flight Bag (EFB). Авторство принадлежит FAA - Federal Aviation Administration (США). К сожалению на данный момент нет подобного документа не только в России, но и во многих других странах, в том числе в Европейских. Даже ИКАО в этом плане отстает от Америки.




      Проблема идиотских NOTAM
      Проблема идиотских NOTAM

      Это всё совершенно нелепо. Мы передаём самую важную полётную информацию, используя систему, изобретенную в 1920 году в формате, который не менялся с 1924 года. При этом мы зарываем в кучу нечитабельного, бесполезного информационного мусора важную информацию, не знание которой может стать для пилотов причиной потери работы, авиакомпании – своих самолетов или жизней пассажиров. Да, Австралийская CASA, это вы! Да, греческие CAA,...




      Кодирование Grid MORA в БД Arinc-424
      Кодирование Grid MORA в БД Arinc-424

      The Grid MORA - (Grid Minimum Off Rate Altitude) - минимальная абсолютная высота вне маршрута (сетчатая). Имеет код раздела и подраздела - A и S соответственно при кодировании в БД ARINC-424. По сути, AS-записи содержат таблицу высот. Каждая запись (строка) содержит 30 блоков, а поля "Начальная широта" и "Начальная долгота" совместно определяют нижний левый угол для первого блока каждой записи.




      Обновление навигационных баз данных навигатора Garmin GPS Map 495
      Обновление навигационных баз данных навигатора Garmin GPS Map 495

      Навигаторы Garmin считаются одними из лучших, причем, не важно, какие это навигаторы: туристические, автомобильные, морские или авиационные - профессионалы предпочитают приборы Garmin (очень похоже на рекламу, но факт остается фактом). В зависимости от типа навигатора и частоты его использования необходимо поддерживать в актуальном состоянии его базы данных. Например, если туристический...




      Mapsme VS Google Maps
      Mapsme VS Google Maps

      В настоящее время имеется большое разнообразие программ для навигации: Mapsme, Яндекс.Навигатор, Sygic, Навител, Copilot, Magic Earth, iGo, TomTom Go и множество других приложений. Наиболее популярные версии - для iOS и для Android, для других платформ (например, Windows) не каждый производитель делает приложение. Разные пользователи выбирают и используют различные приложения для навигации - кому какие...



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