- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
CherryFramework 3. Как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSS
Апрель 30, 2016
Из этого туториала Вы узнаете, как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSS в CherryFramework 3.
CherryFramework 3. Как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSSДавайте создадим новый шорткод с пользовательским классом:
Создать новую запись/страницу:
Выберите нужный Вам шорткод. Мы добавим шорткод ‘Сетка записей’ (Posts Grid) в качестве примера:
Настройте параметры шорткода в соответствии с вашими нуждами. Прокрутите вниз и найдите блок ‘Пользовательский класс’ (Custom class).
Создайте пользовательский стиль для шорткода, например, ‘new_class’. Нажмите на кнопку ‘Вставить’ (Insert):
Пользовательский класс был успешно добавлен к вашему шорткоду:
Вы успешно добавили новый шорткод с пользовательским классом ‘new_class’. Давайте узнаем, как добавить пользовательские правила css к этому классу:
Откройте запись/страницу с шорткодом, который Вы ранее создали:
Мы будем использовать плагин FireBug для браузера Firefox, для того чтобы исследовать элементы.
Исследуйте элемент, в который Вы хотите внести изменения. Найдите нужный класс стиля:
Добавьте ваш пользовательский класс перед общим классом, добавьте/измените любые свойства CSS:
Теперь изменения применятся только к пользовательскому классу и не повлияют на элементы с общим классом.
Нажмите правой кнопкой мышки на CSS класс и выберите настройку ‘Скопировать правило’, для того чтобы скопировать его в блок обмена:
Получите доступ к вашей админ панели WordPress и перейдите на вкладку Cherry > Настройки > Общие настройки (Cherry > Options > General).
Вставьте ранее скопированное правило CSS в блок ‘Пользовательские правила CSS’ (Custom CSS) и нажмите на кнопку ‘Сохранить’ (Save).
Перейдите на ваш сайт и обновите страницу для просмотра изменений.
Это конец данного туториала. Теперь Вы знаете, как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSS.
Вы можете также ознакомиться с детальным видео-туториалом ниже:
CherryFramework 3. Как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSS