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.

Let’s create a new shortcode with custom class:

1. Create a new post/page:

   

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

   

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:

   

   Custom class has been successfully added to your shortcode:

   

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:

   

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:

   

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

   

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:

    

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’.

    

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: