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

      SQL-задачка от Яндекса
      SQL-задачка от Яндекса

      Один товарищ рассматривал вариант устроиться на работу в Яндекс на вакансию "Асессор-разработчик". В тестовом задании была задачка на составление SQL-запроса.




      Английский язык за три урока!
      Английский язык за три урока!

      Шуточные уроки английского языка с изрядной долей юмора и элементами скороговорок, нацелены в первую очередь на проверку вашего произношения. Первый урок - английский для начинающих: «Три ведьмы разглядывают трое часов «Свотч». Какая из ведьм разглядывает какие часы?» Теперь скажем это по-английски: Three witches watch three swatch watches. Which witch watches which swatch watch? Язык не...




      Комментарии в json и типы данных json
      Комментарии в json и типы данных json

      Как писать комментарии в JSON-файле? Некоторых аналитиков этот вопрос приводит в замешательство, и они либо признаются сразу, что не знают/не помнят, либо начинают что-то сочинять на ходу :) Кто-то при этом может вспомнить про экранирование спец-символов. На самом деле формат JSON не предусматривает добавление комментариев. JSON - это только данные.




      В скайпе вирус
      В скайпе вирус

      В мае 2011 года компания Microsoft купила Skype. Многие пользователи этой программы не особо были рады этому событию, некоторые из них громко сказали "Фу!" Но, тем не менее, я лично не знаю ни одного человека, который перестал пользоваться программой Skype после смены владельца.




      Надпись
      Надпись "Licensed to (unknown)" в колонтитуле схем Jeppesen

      Пользователи программ Jeppesen e-Link for Windows (E4W) или Jeppesen JeppView при распечатке схем (Charts) аэродромов (как на реальном, так и с помощью виртуального PDF-принтера) могут заметить в верхнем колонтитуле непрезентабельную надпись "Licensed to (unknown)", которая, теоретически, может стать причиной дополнительных ненужных вопросов к пилоту от рамповой инспекции в случае, если эти схемы попадутся...




      Идентификаторы применения в УПД
      Идентификаторы применения в УПД

      При передаче товаров, подлежащих маркировке, в универсальном передаточном документе (УПД), кроме стандартной бухгалтерской информации о контрагентах, товаре, цене, количестве и пр..., должны фигурировать коды маркировки данных товаров. Но все так просто - эти коды должны быть только в УПД в формате XML, в печатном PDF-файле их не должно быть.




      Программа Jeppesen Mobile TC
      Программа Jeppesen Mobile TC

      Программа Jeppesen Mobile TC является первым коммерческим аэронавигационным продуктом от фирмы Jeppesen для iPad. Программа включает в ребя 2 раздела: схемы аэродромов (кроки, заход на посадку, SID, STAR и др.) и текстовая часть сборников Jeppesen (ATC, Airport Directory, Meteorology и др...). В 2011 году Jeppesen анонсировал следующую программу - Jeppesen Mobile Flite Deck (Jepp Mobile FD),...



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