- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
CherryFramework 4. Как добавить пользовательские CSS классы и CSS правила к шорткодам
Август 28, 2015
В этом уроке мы Вам покажем, как добавить пользовательские css классы и css правила к шорткодам в шаблонах CherryFramework 4.
CherryFramework 4. Как добавить пользовательские css классы и css правила к шорткодам
Давайте добавим новый шорткод с пользовательским классом:
-
Добавьте новый пост/страницу:
-
Выберите любой шорткод. Как пример, мы добавим шорткод ‘Команда’ (‘Team’ shortcode):
-
Отрегулируйте параметры на Ваше усмотрение. Прокрутите вниз, выберите ‘Класс’ (‘Class’).
-
Добавьте пользовательский класс стиля для этого шорткода, например: ‘new_team’. Нажмите кнопку ‘Вставить шорткод’ (‘Insert shortcode’):
-
Пользовательский класс был успешно добавлен к Вашему шорткоду:
Мы успешно добавили новый шорткод с пользовательским классом ‘new_team’. Давайте посмотрим как добавить пользовательские css правила к этому классу:
-
Откройте пост/страницу с шорткодом, который Вы создали:
-
Мы будем использовать FireBug плагин для Firefox браузера, чтобы инспектировать элементы кода.
-
Инспектируйте элемент, который Вы хотите изменить. Найдите необходимый класс стиля:
-
Добавьте Ваш пользовательский класс перед общим, добавьте/настройте (add/adjust) желаемые CSS свойства:
Теперь, изменения будут применены только к пользовательскому классу и не будут влиять на общий класс стиля.
-
Нажмите на кнопку CSS Класс (CSS class) правой кнопкой мыши и выберите опцию ‘Скопируйте Правило Декларации’ (‘Copy Rule Declaration’), чтобы сохранить его в буфер обмена:
-
Войдите в админ панель WordPress и перейдите в Cherry > Опции (Options).
-
Вставьте ранее скопированный CSS код в поле ‘Пользовательский CSS’ (‘User CSS’):
-
Перейдите на Ваш сайт и обновите страницу, чтобы увидеть изменения.
Теперь вы знаете, как добавить пользовательские css классы и css правила к шорткодам в шаблонах CherryFramework 4.
Вы также можете ознакомиться с детальным видео-туториалом ниже:
CherryFramework 4. Как добавить пользовательские css классы и css правила к шорткодам