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

      Сравнение PDF-файлов
      Сравнение PDF-файлов

      Существует множество программ для сравнения текстовых файлов типа TXT, DOC и т.п. Такие программы могут легко сравнить два файла и отобразить в отчете все различия: что было удалено, что было добавлено, а что не было отредактировано и осталось без изменения. Программами для сравнения файлов часто пользуются программисты, составители различных инструкций, ТЗ и др. документации, которым приходится периодически...




      301 редирект страницы с параметром с помощью .htaccess
      301 редирект страницы с параметром с помощью .htaccess

      В интернете написано много примеров, как настроить с помощью файла .htaccess переадресацию с одной конкретной страницы сайта на другую, с нескольких страниц на одну, с WWW на без WWW, с HTTP на HTTPS и др. Но нормальных примеров для 301 редиректа с использованием страниц, имеющих параметры, не удалось найти. Как-то просматривая логи сайта https://skalolaskovy.ru, были обнаружены левые попытки авторизации...




      Изменение БД для GPS Garmin с цикла AIRAC 1708
      Изменение БД для GPS Garmin с цикла AIRAC 1708

      Количество аэронавигационной информации со временем неизбежно увеличивается, и носители навигационных данных для старых спутниковых навигационных систем уже не могут вместить в себя всю информацию. Потому что разработчики этих систем несколько десятилетий назад даже не могли себе представить, что использование карты памяти размером в 2 или 3 мегабайта может оказаться не достаточно. В результате пользователи...




      CTRL F5 для Mac
      CTRL F5 для Mac

      При работе интернет-браузеры сохраняют в кэш много различной информации, которая должна облегчить жизнь пользователя: ускорить загрузку станиц, предугадать его намерения и предложить то, что надо и др. Но иногда нужно часть этих сохраненных данных удалить, чтобы браузер загрузил свежую информацию (например, JS-скрипты). Для этого необходимо ПОЛНОСТЬЮ перезагрузить web-страницу. В пресловутой...




      Что находится с противоположной стороны Земли?
      Что находится с противоположной стороны Земли?

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




      Программа Qloud для пилотов Qatar Airways
      Программа Qloud для пилотов Qatar Airways

      Авиакомпания Qatar Airways начала внедрение собственного нового приложения для iPad - Qloud. Это мобильное приложение собственной разработки, предназначенное только для использования внутри компании (так называемое Inhouse Application). Программа Qloudбудет обеспечивать всех пилотов авиакомпании Катар Эйрвэйс в режиме реального времени актуальной информацией в том числе - и для принятия решения.




      Где прячутся вирусы
      Где прячутся вирусы

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



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