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

      Как настроить skype
      Как настроить skype

      Многие пользуются бесплатной программой skype. Но крайние версии скайпа уже не так лояльны к пользователям - программа стала слишком самостоятельной и в некоторых случаях напрягает своими действиями. Плохие черты характера skype стали более активно проявляться после покупки скайпа компанией Microsoft. Многим не понравилась эта "сделка с дьяволом", но популярность скайпа не сильно уменьшилась...




      Jeppesen Mobile FliteDeck версия  2.0
      Jeppesen Mobile FliteDeck версия 2.0

      Сегодня ночью (по Московскому времени, когда в американском Денвере в это время был солнечный день) фирма Jeppesen представила на всеобщее обозрение видеоролик с анонсом новой версии программы Jeppesen Mobile FliteDeck - v2. К сожалению пока не раскрывается дата, когда можно будет вживую протестировать эту программу. Действующая версия программы Jeppesen Mobile FliteDeck, существующая с прошлого года на данный...




      Вирус в браузере Safari
      Вирус в браузере Safari

      Не смотря на то, что операционная система Apple - iOS не боится вирусов, некоторые наиболее активные злоумышленники все равно стараются и создают хитрых вредных зверьков (вирусы и прочие неприятные скрипты). И в некоторых редких случаях при посещении определенных сайтов (которые "для взрослых" или просто взломаны и заражены) даже на планшете iPad можно подхватить какую-нибудь бяку.




      Сохранение маршрутов в Jeppesen FliteStar/FliteMap
      Сохранение маршрутов в Jeppesen FliteStar/FliteMap

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




      Корректное отображение иконок в Tab Bar (Swift)
      Корректное отображение иконок в Tab Bar (Swift)

        При добавлении кастомных иконок в Tab Bar они могут иногда отображаться не корректно, например так:  Для отрисовки иконки xCode использует цвет по умолчанию (в данном проекте это синий цвет).




      Как выровнять многострочный UILabel по верхнему краю
      Как выровнять многострочный UILabel по верхнему краю

      Если содержимое UILabel в интерфейсе мобильного приложения может варироваться от одного короткого слова до двух предложений, то нужно немного постараться, чтобы это выглядело адекватно хорошо на различных устройствах с разными экранами. Когда UILabel не имеет фиксированного размера и должен меняеться динамически в зависимости от количества текста в нем, то это делается следующим образом:




      Ошибка http/1.1 413 request entity too large
      Ошибка http/1.1 413 request entity too large

      Загрузка файлов на сайт (а по сути - на сервер) обычно выполняется через POST-запрос или UPLOAD-запрос. Но это актуально только для тех  сайтов, для которых на сервере используется Appache. Но если на сервере используется NGINX (CGI или FAST CGI), то максимально допустимый размер тела запроса определяется по-другому - директивой client_max_body_size. По умолчанию директива client_max_body_size имеет...



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