How to Set a Separate Color for Each Tab of ShortPoint Tabs Design Element

By default, you can only assign two colors as background for the Tabs Design Element. The first background color is set in the Design tab for the active tab:

The second background color is set in the Advanced tab for the inactive tabs:

This article will demonstrate how to set different colors for each tab using Custom CSS:

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint 
  • Step 2: Edit the Tabs Design Element
  • Step 3: Copy the custom CSS code
  • Step 4: Paste the code
  • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint 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.

Step-by-step Tutorial

Follow the steps below to learn how to set different colors for each tab:

Step 1: Edit the ShortPoint 

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

Click the cross icon to close the Toolbox:

Select the ShortPoint tag:

Click the Edit Properties icon:

Step 2: Edit the Tabs Design Element

NOTEBefore proceeding, make sure you already have the Tabs Design Element on your page. Go to How to Customize the Tabs Design Element to learn how to insert it.

Click the Tabs tag:

Select the cogwheel icon:

Step 3: Copy the custom CSS code

Copy the Custom CSS code below:

.sp-type-tab.shortpoint-li.shortpoint-child:nth-of-type(1) .shortpoint-tab-title {
    background-color: tomato !important;
}

.sp-type-tab.shortpoint-li.shortpoint-child:nth-of-type(2) .shortpoint-tab-title  {
    background-color: red !important;
}

.sp-type-tab.shortpoint-li.shortpoint-child:nth-of-type(3) .shortpoint-tab-title {
    background-color: green !important;
}

.sp-type-tab.shortpoint-li.shortpoint-child:nth-of-type(4) .shortpoint-tab-title {
    background-color: yellow !important;
}

Notes
1. The active tab will always have the theme color of the page. (You can update it in the Design tab).
2. You can have more than 4 tab items. In this case, simply copy the code line for the item and update its index (for example, the 5th tab will look like this: .sp-type-tab.shortpoint-li.shortpoint-child:nth-of-type(5) ).

Step 4: Paste the code

Click the next icon:

Switch to the Custom CSS tab:

Paste the code in the field provided:

Customize the background-color values for each tab:

Once done, click the green check mark:

Step 5: Save

Click the eye icon to see your page in real-time:

Click Save to apply all your changes:

That’s it! You can now customize the color of each tab inside the Tabs Design Element.

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 Modify the Width for ShortPoint Tabs
• How to Make Single Tabs in Tabs Design Element Equal and Full Height
• How to Add a Gradient Underline below ShortPoint Tabs
• How to Automatically Rotate ShortPoint Tabs every few seconds
• How to Prevent ShortPoint Tabs Stacking on Top of Each Other on Mobile Devices