Support Center

How can we help you today?

Customize ShortPoint look and feel using the CSS class name and Custom CSS

Modified on: Wed, 10 May, 2017 at 3:34 PM

In this article, we will show you how you can customize the look and feel of a ShortPoint element, by adding a specific class name to the element, and overriding its behavior using an external stylesheet.

Let us take for example the following info ShortPoint element, We want to change the color into yellow, and add a yellow border to the element as well.

Step 1: Edit the Info ShortPoint element, and add a "my-custom-colors" class name into the field "Class"

Edit your desired ShortPoint element, and go to "Custom CSS" tab, and add "my-custom-colors" into the Class field as shown below

Click on Update, and save the page, nothing will change so far.

But if you right click on the element ( using Google Chrome ), and click on Inspect

You will see that our new Class "my-custom-colors" has been added into the Info ShortPoint element.

Step 2: Create a CSS file that contains your customizations

For the sake of this article, we will update the text color of the info element into yellow, and add a thick dashed border around the info with a yellow color as well.

Save the file for the next step.

Note: Based on your version of ShortPoint, applying CSS Customization can be different, so please make sure to check the version you have of ShortPoint, from the ShortPoint dashboard, before proceeding with either Step 3.A or Step 3.B.