How can we help you today?

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

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!

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