Adding an Extra CSS Class to a Shortcode

Updated on April 8, 2018

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:

1Click on the Edit Employees button to open the Employees Settings pop-up.

Adding extra CSS class to a shortcode - employees settings

2In the Extra Class Name setting field, add a text. The text should start with a letter. For this example, we use custom-employees

Adding extra CSS class to a shortcode - extra class name

3Click on the Save Changes button.

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:

1From the front-end of your website, right-click on one of the employees, and then click Inspect.

Adding extra CSS class to a shortcode - inspect

2In the developer tools, under the Elements section, find a div with the mk-employees class.

Adding extra CSS class to a shortcode - div class

3Look at the end of the line and you should be able to see the extra added class.

Adding extra CSS class to a shortcode - div custom 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.

Adding extra CSS class to a shortcode - example

1From the front-end of your website, right-click on the thumbnail, and then click Inspect.

Adding extra CSS class to a shortcode - inspect

2Reduce the border-radius value in the Styles tab, and then copy the codes.

Adding extra CSS class to a shortcode - css

3From the WordPress left menu, go to the Theme Options > Advanced > Custom CSS page, paste the codes and add custom-employees to the beginning of the codes.

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

4Click on the Save Settings button and check the result on the front-end of your website.

Adding extra CSS class to a shortcode - result


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.

1From the WordPress left menu, go to Theme Options > Advanced > Custom JS then add the following codes.

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

3Click on the Save Settings button and check the result on the front-end of your website.
Did this answer your question?