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.



Step 3.A: Upload your Customized CSS file ( ShortPoint version 4.x and below )


Now its time to upload your CSS file into Change the look page, so you can see your changes in action, to know how to do this step, refer to the following articles depending on your platform type:


Step 3.B: Upload your Customized CSS file ( ShortPoint version 5.x and above )


Copy the content of your CSS file, and then please refer to the following article that explains how to apply your CSS Customizations on the Site Branding & Customization tool



End Result

Once you are done, ( if you were following this article ), your info element should look like the following.