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 3. How to add custom classes to the shortcodes and assign custom CSS rules to them

This tutorial will show how to add custom classes to shortcodes and assign custom CSS rules to them in CherryFramework 3.

CherryFramework 3. 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:

    How to add custom css

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

    How to add custom css 1

  3. Adjust shortcode parameters to your needs. Scroll down and locate ‘Custom class’ box.

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

    How to add custom css 2

    Custom class has been successfully added to your shortcode:

    How to add custom css 3

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

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

    How to add custom css 4

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

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

    How to add custom css 5

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

    How to add custom css 6

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

  11. Right-click the CSS class and choose ‘Copy Rule Declaration’ option to copy it to the clipboard:

    How to add custom css 7

  12. Access your WordPress dashboard and navigate to Cherry > Options > General tab.

  13. Paste the previously copied CSS rule to the ‘Custom CSS’ box and then click ‘Save’.

    How to add custom css 8

  14. Navigate to your site front-end and refresh the page to see 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 3. How to add custom classes to the shortcodes and assign custom CSS rules to them