Categories

Featured templates

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

Daniel Morales August 28, 2015
Rating: 5.0/5. From 2 votes.
Please wait...

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

Wordpress Design Templates
This entry was posted in Monstroid Tutorials, WordPress Tutorials and tagged CherryFramework4, class, css, shortcode, style. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket