How can we help you today?

Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)

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.


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+ */

Custom CSS tab

And the result will look like this:



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;

adding nesting

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. 

with transparent close button

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;

add hover

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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 54 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more