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
  • In Modern page:
  • In Classic Page:
• Step 2: Select a divider Style
• Step 3: Copy CSS Code
• Step 5: Save and Publish your page

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; 
}

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:

• Custom CSS tab for ShortPoint Design Elements