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.
2In the Extra Class Name setting field, add a text. The text should start with a letter. For this example, we use custom-employees
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.
2In the developer tools, under the Elements section, find a div with the mk-employees class.
3Look at the end of the line and you should be able to see the extra added 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.
1From the front-end of your website, right-click on the thumbnail, and then click Inspect.
2Reduce the border-radius value in the Styles tab, and then copy the codes.
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;
}
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;
4Click on the Save Settings button and check the result on the front-end of your website.
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.
Note: If you have any questions regarding custom CSS,
open a ticket in our help desk.
Note: To learn how to insert custom CSS, check out
this article. To learn how to inspect elements, check out
this article.
