[contact-form-7 id="24085" title="Feedback RU"]

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

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

В этом уроке мы Вам покажем, как добавить пользовательские css классы и css правила к шорткодам в шаблонах CherryFramework 4.

CherryFramework 4. Как добавить пользовательские css классы и css правила к шорткодам

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

  1. Добавьте новый пост/страницу:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_1

  2. Выберите любой шорткод. Как пример, мы добавим шорткод ‘Команда’ (‘Team’ shortcode):

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_2

  3. Отрегулируйте параметры на Ваше усмотрение. Прокрутите вниз, выберите ‘Класс’ (‘Class’).

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

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_3

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

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_4

Мы успешно добавили новый шорткод с пользовательским классом ‘new_team’. Давайте посмотрим как добавить пользовательские css правила к этому классу:

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

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_5

  2. Мы будем использовать FireBug плагин для Firefox браузера, чтобы инспектировать элементы кода.

  3. Инспектируйте элемент, который Вы хотите изменить. Найдите необходимый класс стиля:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_6

  4. Добавьте Ваш пользовательский класс перед общим, добавьте/настройте (add/adjust) желаемые CSS свойства:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_7

    Теперь, изменения будут применены только к пользовательскому классу и не будут влиять на общий класс стиля.

  5. Нажмите на кнопку CSS Класс (CSS class) правой кнопкой мыши и выберите опцию ‘Скопируйте Правило Декларации’ (‘Copy Rule Declaration’), чтобы сохранить его в буфер обмена:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_8

  6. Войдите в админ панель WordPress и перейдите в Cherry > Опции (Options).

  7. Вставьте ранее скопированный CSS код в поле ‘Пользовательский CSS’ (‘User CSS’):

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_9

  8. Перейдите на Ваш сайт и обновите страницу, чтобы увидеть изменения.

Теперь вы знаете, как добавить пользовательские css классы и css правила к шорткодам в шаблонах CherryFramework 4.

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

CherryFramework 4. Как добавить пользовательские css классы и css правила к шорткодам