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

      EFB - Electronic Flight Bag
      EFB - Electronic Flight Bag

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




      Как обновить навигационные БД программ JeppView 3 и Flight Deck 3
      Как обновить навигационные БД программ JeppView 3 и Flight Deck 3

      Есть две замечательные программы для пилотов/штурманов от фирмы Jeppesen - JeppView 3 и FlightDeck 3. Вот только Jeppesen несколько лет назад перестал их поддерживать. Вместо программы JeppView 3 сейчас можно приобрести и установить программу JeppView for Windows (в принципе, она почти как старая версия, ничуть не хуже, даже, наоборот, функционал стал более расширенным). А вместо старой доброй FlightDeck 3...




      Синий экран смерти (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 -...




      URL-encoding & ASCII Characters
      URL-encoding & ASCII Characters

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




      Требуются ли аэронавигационные карты при использовании навигационных баз данных?
      Требуются ли аэронавигационные карты при использовании навигационных баз данных?

      По мере того, как навигация с использованием спутниковой системы (GPS навигация), бортовых пилотажных комплексов (FMS), компьютерных полетных карт и компьютерных систем планирования полетов получали распространение, авиационные компании и разработчики ПО предоставляли все больше и больше технических характеристик. Благодаря большому количеству систем, доступных на сегодняшней день, можно легко...




      Как добавить кнопку +1 от Google на сайт
      Как добавить кнопку +1 от Google на сайт

      Кнопка +1 позволяет людям, которым понравился ваш сайт, рекомендовать его друзьям и знакомым прямо в поиске Google. Кнопка "+1" помогает пользователям узнавать о веб-сайтах, результатах поиска Google или об объявлениях от тех, кому они доверяют. Добавляя кнопку "+1" на свои страницы, вы предоставляете посетителям возможность рекомендовать их друзьям и контактам. Эти рекомендации будут показаны в наиболее...




      Установка SSL-сертификата на MDM-сервер Apple
      Установка SSL-сертификата на MDM-сервер Apple

      Для полноценной работы по администрированию мобильных устройств Apple с помощью MDM-сервера (Profile Manager) очень желательно использовать SSL-сертификат, выданный авторизованным центром сертификации. Можно, конечно, использовать и самоподписанный сертификат, созданный с помощью самого MDM-сервера - часть задач он будет решать. Но, тем не менее, будут некоторые ограничения, не позволяющие легко и просто управлять...



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