Categories

Новые шаблоны

CherryFramework 3. Как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSS

Daisy Cooper Апрель 30, 2016
Rating: 5.0/5. From 2 votes.
Please wait...

Из этого туториала Вы узнаете, как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSS в CherryFramework 3.

CherryFramework 3. Как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSS

Давайте создадим новый шорткод с пользовательским классом:

  1. Создать новую запись/страницу:

    How to add custom css
  2. Выберите нужный Вам шорткод. Мы добавим шорткод ‘Сетка записей’ (Posts Grid) в качестве примера:

    How to add custom css 1
  3. Настройте параметры шорткода в соответствии с вашими нуждами. Прокрутите вниз и найдите блок ‘Пользовательский класс’ (Custom class).

  4. Создайте пользовательский стиль для шорткода, например, ‘new_class’. Нажмите на кнопку ‘Вставить’ (Insert):

    How to add custom css 2

    Пользовательский класс был успешно добавлен к вашему шорткоду:

    How to add custom css 3
  5. Вы успешно добавили новый шорткод с пользовательским классом ‘new_class’. Давайте узнаем, как добавить пользовательские правила css к этому классу:

  6. Откройте запись/страницу с шорткодом, который Вы ранее создали:

    How to add custom css 4
  7. Мы будем использовать плагин FireBug для браузера Firefox, для того чтобы исследовать элементы.

  8. Исследуйте элемент, в который Вы хотите внести изменения. Найдите нужный класс стиля:

    How to add custom css 5
  9. Добавьте ваш пользовательский класс перед общим классом, добавьте/измените любые свойства CSS:

    How to add custom css 6
  10. Теперь изменения применятся только к пользовательскому классу и не повлияют на элементы с общим классом.

  11. Нажмите правой кнопкой мышки на CSS класс и выберите настройку ‘Скопировать правило’, для того чтобы скопировать его в блок обмена:

    How to add custom css 7
  12. Получите доступ к вашей админ панели WordPress и перейдите на вкладку Cherry > Настройки > Общие настройки (Cherry > Options > General).

  13. Вставьте ранее скопированное правило CSS в блок ‘Пользовательские правила CSS’ (Custom CSS) и нажмите на кнопку ‘Сохранить’ (Save).

    How to add custom css 8
  14. Перейдите на ваш сайт и обновите страницу для просмотра изменений.

Это конец данного туториала. Теперь Вы знаете, как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSS.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

CherryFramework 3. Как добавить пользовательские классы для шорткодов и закрепить за ними пользовательские правила CSS
Темы Wordpress
Эта запись была размещена в WordPress туториалы и помечена как CherryFramework3, css, custom class, shortcodes, WordPress. Добавьте в закладки постоянную ссылку.

Submit a ticket

Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов