Customizing a ShortPoint element with CSS used to be a time-consuming task. 

You had to give the element a custom CSS class or ID, then open the Theme Builder, 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 targets a specific ShortPoint Design Element right from the Page Builder.

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

Basic Syntax

You can write your CSS in the Custom CSS text area as you would write the CSS in your own text editor, with one exception: no declarations for the current Design Element. 

That is because the class for the current Design Element will be generated at runtime, and it might be changed whenever you edit the page.

As an example, you can apply a gradient background for an Alert Design Element, using the following custom 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 worked before with the CSS preprocessors like Sass, Less, Stylus or PostCSS, you might be familiar with the nesting feature those preprocessors 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.

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

For example, if you want to update the close button in the previous Alert Design Element example, and make it a little transparent, you can add the following CSS:

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

As you can see, there is no need to put the CSS selector for the Alert Design Element.

Now the close button will appear transparent. 

To improve the user experience, you can increase the opacity when the mouse is over the alert box. 

To do that, please add the following CSS:

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

The final result will look like in the following animation:

After you are done with the CSS customizations, click Insert/Update to save the changes for your Design Element.

That's it!