Adding an Extra CSS Class to a Shortcode

Adding an extra CSS class allows you to target the shortcode easily within your custom codes.

In this article, we explain how to add a custom CSS class to the Employees shortcode and then tweak the styling and functionalities

Adding an Extra CSS Class

To add an extra CSS class:

Checking the CSS Class

To make sure the CSS class has been added to your shortcode, use your browser developer tools. For this example, we use Chrome browser.

To check the class:

Tweaking the Stylings

The extra CSS class name can be used to tweak the styling of the shortcode without conflicting with other similar items. For this example, we reduce the border radius of the thumbnail. By default, the employees’ image looks like the following.

.custom-employees.mk-employees.simple .team-thumbnail.rounded-true img {
    position: relative;
    border-radius: 10px;
}

Tweaking the Functionality

The extra CSS class name can also be used to tweak the functionality of the shortcode without conflicting with similar items.

For this example, we change the thumbnail link’s default target setting. By default when you click on the thumbnail, the link opens in the same browser tab so we’ll change the functionality to make it open in a new tab.

jQuery('.custom-employee a').attr('target', '_blank');