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. By default, the divider color is set in greyscale:


gray divider


This article will demonstrate how to change the divider color using Custom CSS:


colored divider


NOTEThis Custom CSS is only applicable for Divider styles that allow color change. Some Divider styles do not allow color change.

TABLE OF CONTENTS


Prerequisites


Interactive Tutorial

Before starting the interactive tutorial, copy the Custom CSS code below:


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



NOTEYou can change blue to any of the following:
>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 #XXXXXX for HEX codes i.e. #FF0000, #0000FF, #008000, etc.


Step-by-step Tutorial

Follow the steps below for a detailed guide on how to change Divider colors:


Step 1: Edit the ShortPoint Web Part

  • Go to the SharePoint page you want to use and click Edit.


Edit


  • Click the ShortPoint tag.
  • Select the pencil icon.

Step 2: Copy the Custom CSS code

  • Copy the Custom CSS code below:


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


NOTEYou can change blue to any of the following:
>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 #XXXXXX for HEX codes i.e. #FF0000, #0000FF, #008000, etc.

Step 3: Paste the Code


NOTEBefore proceeding, make sure you already have the Divider Design Element on your page.


  • Click the Row where the Divider Design Element is located.


Row tag


  • Click the cogwheel icon.


cogwheel icon


  • Navigate to the Custom CSS tab.
  • Paste the copied code.
  • Change the color according to your preference.

Step 4: Insert and Save

  • Once satisfied with your color change, click the green check mark.
  • Click the eye icon to see your page in real-time.


eye icon


  • Select Save to apply all your changes.


Save


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