By default, active ShortPoint Tabs are signified by a change in color, typically the Theme color of the page:
Using Custom CSS, you can add a gradient underline below the active Tab:
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have the Tabs Design Element on your page.
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:
- Click the cross icon to close the Toolbox:
- Click the ShortPoint tag.
- Select the 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.
- Click the Tabs tag:
- Select the cogwheel icon:
Step 4: Paste the code
- Click the 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:
- Click Save to apply all changes:
That’s it! You have successfully added a gradient underline below the active ShortPoint tab.
Related articles:
- How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
- Add Custom CSS to a ShortPoint Element right from the Page Builder (Advanced Tutorial)
- How to Automatically Rotate ShortPoint Tabs every few seconds
- How to Modify the Width for ShortPoint Tabs
- How to Change the Font Size of a Link and/or the Link Icon Size