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

      Кодирование Grid MORA в БД Arinc-424
      Кодирование Grid MORA в БД Arinc-424

      The Grid MORA - (Grid Minimum Off Rate Altitude) - минимальная абсолютная высота вне маршрута (сетчатая). Имеет код раздела и подраздела - A и S соответственно при кодировании в БД ARINC-424. По сути, AS-записи содержат таблицу высот. Каждая запись (строка) содержит 30 блоков, а поля "Начальная широта" и "Начальная долгота" совместно определяют нижний левый угол для первого блока каждой записи.




      Windows не видит флэшку - что делать?
      Windows не видит флэшку - что делать?

      Флэшка берет букву сетевого диска В данной статье рассмотривается ситуация с исправной рабочей флэшкой без вирусов, которая нормально работает на других компьютерах. В некоторых организациях у пользователей может появиться проблема, заключающаяся в том, что при подключении флэшки к компьютеру операционная система Windows XP или 7 не видит ее как диск, хотя как физическое устройство флэшка обнаруживается.




      Ошибки Jeppesen FD PRO
      Ошибки Jeppesen FD PRO

      17 октября программа Jeppesen FD PRO получила одобрение от EASA (European Aviation Safety Agency) как програмный продукт для EFB. Одновременно с программой Jeppesen FD PRO была одобрена (сертифицирована) программа Jeppesen TC PRO.




      Сбербанк онлайн - дырка в приложении для iPad
      Сбербанк онлайн - дырка в приложении для iPad

      Многие клиенты сбербанка пользуются сервисом "Сбербанк онлайн" для управления своими финансами и платежами. У данного сервиса есть детище - приложение для iPad, имеющее похожее название - "Сбербанк ОнЛ@йн". В принципе, приложение "Сбербанк ОнЛ@йн" не плохое и довольно удобное. По сравнению с доступом через сайт к сервису "Сбербанк онлайн" гораздо проще реализована авторизация - нужно ввести только собственный пароль. Из...




      Аналоги phpMyAdmin
      Аналоги phpMyAdmin

      PHPMyAdmin - это веб-интерфейс для администрирования СУБД MySQL, который позволяет через браузер администрировать ваши БД, запускать различные команды SQL, просматривать содержимое таблиц и баз данных, редактировать их и создавать новые. Многие web-разработчики пользуются PHPMyAdmin, соответственно, многие хостеры обязательно включают PHPMyAdmin в сборку при установке сервера. PHPMyAdmin имеет...




      Mozilla Firefox + плагины и дополнения
      Mozilla Firefox + плагины и дополнения

      27 сентября 2011 года вышла новая версия популярного браузера Mozilla Firefox - седьмая (7). Поздравляем рыжую лисичку с очередной реинкарнацией! Ура! :) Если честно, то в последнее время обновления браузеров (и Firefox и Opera) напоминает какую-то гонку вооружений. Индекс версии меняется на порядок! Неужели на столько глобальные изменения подвергают эти программы?




      Сравнение компьютерной и человеческой памяти
      Сравнение компьютерной и человеческой памяти

      В массовом сознании память до сих пор воспринимается как аналог жесткого диска, только менее точный и надежный. Эта аналогия в корне неверная. Почти по всем параметрам человеческая память принципиально отличается от машинной. Давайте осуществим их сравнение по нескольким показателям: энергонезависимость, объем памяти, пропускная способность интерфейсов, способ хранения данных, механизмы...



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