Customizing a ShortPoint element using CSS used to be a time-consuming task, as you had to give the element a custom CSS or ID, then open the Site Customization tool, navigate to Custom CSS, memorizing what was the custom CSS class you gave to that element, and write your Custom Stylesheets there.


Well, not anymore! 

Now you can write a Custom CSS that target a specific ShortPoint element right from the page builder.

In this article, we will dive into the basic syntax and some advance usage on how to use this Custom CSS feature.


Basic Syntax

You can write CSS in the Custom CSS text-area as you would write CSS in your own text editor, with one exception ( no declarations for the current element ). and that's because the class for current element will be generated at runtime, and it will be might be changed whenever you edit the page.


So for example, for an alert element, If I want to apply a gradient background to it, I would write the following CSS:


background: #c2e59c;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */




And the result will look like this:



Nesting


work in progress, come back soon