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 the 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


If you have worked before with CSS preprocessors like Sass, Less, Stylus or PostCSS, then you might be familiar with the nesting feature those pre-processors offers, as it makes writing CSS a more pleasant task.


In ShortPoint Page Builder's Custom CSS, we utilize postCSS Nested plugin to bring this functionality, 

This means if you want to override a style for an inner element that's placed inside the current ShortPoint element, you only have to write the CSS selector for the inner element.


So for example, if I want to update the close button in the previous alert example, and make it a little bit transparent, I would add the following CSS:


.shortpoint-close {
  opacity: .4;
  transition: .2s opacity ease;
}



As you can see, I didn't have to put the CSS Selector for the alert element.


Now the close button will appear transparent, so to improve the experience, we need to increase the opacity when the mouse is over the alert box, we can do that by adding the following CSS:


&:hover .shortpoint-close {
  opacity: 1;
}




The final result will look like the following animation: