How can we help you today?

How to Change Divider Colors in ShortPoint

When using the ShortPoint Divider design element, you may want to change its color to be consistent with your SharePoint page’s overall aesthetic. We will provide you the steps on how to make these changes using the Custom CSS tab in this article.

The divider design options are set in greyscale by default:

This article will let you change divider colors just like this example:

Follow the steps provided to do this on your SharePoint page.

Article Contents

Step 1: Insert ShortPoint Divider Design Element

You can select the Divider design element from ShortPoint Page Builder.

In Modern page:

Edit your page, insert a SharePoint web part, and select the ShortPoint application. Delete the information window and hit the plus sign to go to Page Builder.

In Classic Page:

While in edit mode, go to the Insert tab, and click the plus sign under the ShortPoint section in the ribbon.

Choose Divider from the design element options in Page Builder.

Step 2: Select a divider Style

You will be brought to the Divider Settings tab where you can choose a divider Style from the drop-down. Click Insert once done.

Note: Not all divider style options in the drop-down allow color change through custom CSS.

Step 3: Copy CSS Code

This is the CSS code that you will use for changing the divider color. Copy it before moving to the next step.

.shortpoint-divider { 
border-top-color: color !important;

Where the text color can be any color entered as:

  • Text representing an actual color i.e. red, blue, green, etc.
  • rgb(red#,green#,blue#) for RGB code i.e. rgb(255,0,0), rgb(0,0,255), rgb(0,128,0), etc.
  • Or simply, #XXXXXX for Hex code i.e. #FF0000, #0000FF, #008000, etc.

Here is the CSS code that we will be using in our example:

.shortpoint-divider { 
border-top-color: blue !important;

Step 4: Edit Row Settings and paste custom CSS code

On your Row element, click the settings cogwheel. This will pull up the Row Settings. Go to the Custom CSS tab, paste the custom CSS code, and hit Update.

Step 5: Save and Publish your page

Finally, hit Save and Publish your page with the changes. Your divider will now be in the color you indicated in the CSS code.

You are done! Make your page look great with the use of dividers.

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