Using ShortPoint Page Builder, you can write a custom CSS that targets a specific ShortPoint Design Element. In this article, we will dive into the basic syntax and some advanced usage on how to use the Custom CSS feature.

TABLE OF CONTENTS

• Basic Syntax
• Nesting

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 CSS preprocessors like Sass, Less, Stylus, or PostCSS, you might be familiar with the nesting feature those preprocessors offer, as it makes writing CSS a more pleasant task.

In ShortPoint Page Builder's Custom CSS, we utilize the 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, 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 the green checkmark to save the changes for your Design Element.

That's it, you now know the basics of Syntax! You can now use this feature on your SharePoint pages.

Related Articles:

• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• How to Add Lottie Animations in the ShortPoint Code Design Element
• How to Add a Hover Color to the ShortPoint Tiles Design Element with Custom CSS