If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

CherryFramework 4. How to add custom classes to the shortcodes and assign custom CSS rules to them

This tutorial will show you how to add custom css classes to the shortcodes and assign custom css rules to them in CherryFramework 4 templates.

CherryFramework 4. How to add custom classes to the shortcodes and assign custom CSS rules to them

Let’s create a new shortcode with custom class:

  1. Create a new post/page:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_1

  2. Select any desired shortcode. We will insert ‘Team’ shortcode as an example:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_2

  3. Adjust shortcode parameters to your needs. Scroll down, locate ‘Class’ box.

  4. Create custom style class for this shortcode, e.g.: ‘new_team’. Click ‘Insert shortcode button:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_3

  5. Custom class has been successfully added to your shortcode:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_4

We’ve successfully added new shortcode with custom class ‘new_team’. Let’s see how to assign custom css rules to this class:

  1. Open the post/page with the shortcode you’ve previously created:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_5

  2. We will use FireBug plugin for Firefox browser to inspect elements.

  3. Inspect the element you want to edit. Locate the needed style class:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_6

  4. Add your custom class before the common one, add/adjust any desired CSS properties:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_7

    Now, the changes will be applied to the custom class only and will not affect the common style class.

  5. Click on the CSS class with your right mouse button and choose ‘Copy Rule Declaration’ option to copy it to the clipboard:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_8

  6. Access your WordPress dashboard and navigate to Cherry > Options.

  7. Paste the previously copied CSS rule to the User CSS box:

    CherryFramework_4_How_to_add_custom_classes_to_the_shortcodes_and_assign_custom_CSS_rules_to_them_9

  8. Navigate to your site front-end and refresh the page to see the changes.

This is the end of the tutorial. Now you know how to add custom classes to the shortcodes and assign custom CSS rules to them.

Feel free to check the detailed video tutorial below:

CherryFramework 4. How to add custom classes to the shortcodes and assign custom CSS rules to them