Adding an Extra CSS Class to a Shortcode

Last Updated on

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

In this article


Adding an Extra CSS Class

To add an extra CSS class:

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

Adding extra CSS class to a shortcode - employees settings

2
In 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

3
Click 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:

1
From 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

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

Adding extra CSS class to a shortcode - div class

3
Look 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

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

Adding extra CSS class to a shortcode - inspect

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

Adding extra CSS class to a shortcode - css

3
From 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;
}

x
Note: If the codes don’t work as expected, you may need to add the !important tag to the front of the border-radius value. It would then be border-radius: 10% !important;
4
Click 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.

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

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

3
Click on the Save Settings button and check the result on the front-end of your website.
x
Note: If you have any questions regarding custom CSS, open a ticket in our help desk.
x
Note: To learn how to insert custom CSS, check out this article. To learn how to inspect elements, check out this article.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket