How can we help you today?

How to Add a Gradient Underline below ShortPoint Tabs

By default, active ShortPoint Tabs are signified by a change in color, typically the Theme color of the page:


default active tab


Using Custom CSS, you can add a gradient underline below the active Tab:


active tab with gradient underline


TABLE OF CONTENTS


Prerequisites


Interactive Tutorial

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


.sp-type-tab.shortpoint-active {
border: none;
border-bottom: 5px solid #fff;
border-image:
linear-gradient(to right, red 2%, purple 25%, red 60%, yellow 90%) 1;
}



Step-by-step Tutorial

Follow the detailed guide below to learn how to add a gradient line:


Step 1: Edit the ShortPoint Web Part


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

Edit


  • Click the cross icon to close the Toolbox:

cross icon


  • Click the ShortPoint tag.
  • Select the Edit properties icon:


Edit properties icon


Step 2: Copy Code


  • Copy the Custom CSS code below:


.sp-type-tab.shortpoint-active {
border: none;
border-bottom: 5px solid #fff;
border-image:
linear-gradient(to right, red 2%, purple 25%, red 60%, yellow 90%) 1;
}

Step 3: Edit the Tabs Design Element


NOTEBefore proceeding, make sure you already have the Tabs Design Element on your page. To learn how to add it, check out How to Customize the Tabs Design Element.

Tabs Design element


  • Click the Tabs tag:

tabs tag


  • Select the cogwheel icon:

cogwheel icon


Step 4: Paste the code


  • Click the next icon:

next icon


  • Navigate to the Custom CSS tab.
  • Paste the code.
  • (Optional) Customize the gradient color values according to your preferences.

Step 5: Save

  • Click the green check mark once satisfied.
  • Click the eye icon to see your page in real time:

eye icon


  • Click Save to apply all changes:

Save


That’s it! You have successfully added a gradient underline below the active ShortPoint tab.


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