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

      Литературный проект Этногенез
      Литературный проект Этногенез

      Литературный проект Этногенез заявил о себе в 2009 году первым произведением "Маруся", а дальше понеслось... Создатели проекта очень грамотно объединили под эгидой литературы реальные исторические события, фантастику, фэнтези и кучу чего-то еще. Проект очень быстро стал популярным, в 2011 году стал частично коммерческим, но, тем не менее, авторы не запрещают размещать копии текстов и аудиотреков на сторонних сайтах.




      Оптимизация и Настройка операционной системы Windows 7
      Оптимизация и Настройка операционной системы Windows 7

      Не смотря на то, что маркетологи Microsoft рвут на своих попах волосы, уверяя пользователей, что их очередная новая операционная система просто суперская и не имеет ни одного изъяна и косяка и совершенно не требует абсолютно никакой дополнительной настройки, им мало кто верит. Тем более, что практика показывает, что операционные системы Windows - как российские автомобили: чтоб нормально поехать на нем...




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

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




      Служба спасения 911 - Рождественский кошмар
      Служба спасения 911 - Рождественский кошмар

      Ведущий: Ежедневно тысячи людей попадают в кpитические ситуации, безвыходные положения, ломают pуки и ноги. Помочь им в этом пpизвана наша пpогpамма и служба "Спасение 911". Приободрить людей, попавших в беду, свести все к шутке - в этом состоит наша главная задача. И об одном таком случае, случившемся в Рождество, я не имею пpава молчать. Да, собственно, не очень-то и хочется.




      Синий экран смерти (Blue Screen of Death)
      Синий экран смерти (Blue Screen of Death)

      Синий экран XP (по терминологии Blue Screen of Death - "синий экран смерти", он же BSoD)- это метод генерации сообщения о фатальной ошибке в операционных системах Windows NT 4.0, Windows 2000, Windows 2003, Windows XP или Windows Vista, вызванной нарушениями в работе некоторых программ, чаще из-за аппаратных сбоев компьютера. Синий экран XP или по другому STOP-ошибка (от слова STOP -...




      Признаки принадлежности аэродрома
      Признаки принадлежности аэродрома

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




      Обновление БД EGPWS T2CAS
      Обновление БД EGPWS T2CAS

      БД для EGPWS/TAWS "T2CAS" предоставляется компанией ACSS (Aviation Communication and Surveillance System) в своем бортовом формате, конвертация уже выполнена, и БД готова для загрузки в систему. Периодичность обновления – по факту выхода новой БД (примерно кардые 3 месяца). Сроки не совпадают с циклами AIRAC. При этом зарегистрированным пользователям на электронную почту приходит уведомление о том, что новая БД...



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