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

      Авиационное озеро в Китае
      Авиационное озеро в Китае

      В китайской провинции Гуандун (называемая также, как Кантон - Kwangtung) возле города Хэюань (Heyuan / 河源 市) находится озеро Ванлю (万绿湖), оно же - Синьфэнцзянское водохранилище (Xinfengjiang Reservoir / 新丰 江 水库), по своей форме напоминающее самолет: Наибольшее сходство с очертанием самолета дает цифровая карта Яндекса, на других картах с большей деталлизацией это не так сильно заметно.




      Как настроить Wi-Fi router Apple Airport Express
      Как настроить Wi-Fi router Apple Airport Express

      Некоторые пользователи яблочных устройств (iPad, iPhone и др.) наверняка сталкивались с проблемой использования Интернета, находясь в командировке - а именно с тем, что не везде есть беспроводной Wi-Fi Интернет. Кабель LAN есть, а Wi-Fi нет :( И как на зло огрызки могут работать с сетью только по беспроводному каналу! Что же делать в таких случаях? Для этого хитрые яблочники придумали...




      Изучайте английский..., или о пользе нестандартного мышления
      Изучайте английский..., или о пользе нестандартного мышления

      Cвященнослужитель и австралийский пастух овец выступают соперниками в одной телевизионной викторине. После того, как были заданы все стандартные вопросы, результат - ничья. Тогда ведущий передачи задает последний решающий вопрос: оба участника должны придумать в течение 5-ти минут стихотворение, в котором бы прозвучало слово "Тимбукту" (для справки - это город в республике Мали, который в свое...




      Боевой листок второго отделения
      Боевой листок второго отделения

      2003 год, Краснодарский край, город Ейск, военные сборы гр. 51/98 УВАУ ГА Приближалось лето!!! Одна из туристических фирм города Ульяновска предложила нам прекрасно провести время на курорте Краснодарского края - в солнечном городе Ейске. Посоветовавшись группой, мы решили приобрести путёвки...




      Культ карго
      Культ карго

      На островах Тихого океана местные жители поклоняются самолетам, которые привозят разные ништяки и вкусняшки. А чтобы боги прилетали почаще, строят фальшивые аэродромы с муляжами самолетов, вышек и взлетными полосами.




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

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




      Малыш и Карлсон
      Малыш и Карлсон

      — Потрясающе! — удивился Малыш. — Но позвольте! Вы ведь летели с положительным тангажем.— Чего? — Карлсон открыл рот от неожиданности и чуть не подавился. — Ну... Вы летели головой вверх, слегка наклонившись вперед. При этом пропеллер должен был тянуть вас вверх и назад. Почему же вы летели вперед, а не назад? А можно посмотреть на твой пропеллер?— Конечно. — Карлсон развернулся.— С ума сойти! Я так и...



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