By default, ShortPoint Tabs have transparent background color. Only the active tab, and the tab being hovered over, have the background color:
You can set the background color for the inactive tabs using the Inactive tab settings (check the Advanced tab):
Using some custom CSS, it is possible to set different colors for each tab, to make them more vibrant:
If you would like to apply this solution, please follow the steps in this support article.
TABLE OF CONTENTS
- This article is for you if
- Before we begin
- Step 1: Insert ShortPoint Tabs Design Element
- Step 2: Copy the custom CSS code
- Step 3: Update Tabs with the code
- Result
This article is for you if
- You have ShortPoint installed on your SharePoint site(s).
- You are a ShortPoint Designer with an active license.
Before we begin
CSS customizations are available since ShortPoint SPFx version 5.2.2.28 or higher. We recommend you to always have the latest version installed. You can visit our Download ShortPoint page and get the latest version of ShortPoint.
Step 1: Insert ShortPoint Tabs Design Element
The Tabs Design Element can be easily added to your pages using ShortPoint Page Builder.
Modern page:
You can start with adding a ShortPoint web part to your page by clicking the Insert button and selecting ShortPoint from the list of the web parts.
Classic page:
1. Choose the Insert tab in the Ribbon.
2. Click the blue Insert button.
Then, Click the Plus button to add a design element:
Select the Tabs Design Element from your ShortPoint Page Builder grid:
The Settings tab will open. Add the tab items:
- You can switch to the Tabs and add the items manually. Please see more information on how to do this in our solution article: Adding, Duplicating, Moving and Deleting Items in ShortPoint Design Elements.
- Make the Tabs dynamic using the Connect feature. Switch to the Connect tab, set up the connection and map the items in the Tabs. Check our ShortPoint Connect: Basic Tutorial to know more about this feature.
Step 2: Copy the custom CSS code
Here is the custom CSS code you will need to use for setting different colors for the separate tabs in Tabs Design Element:
.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. You may update the background-color values for different tabs. 2. The active tab will always have the theme color (check the Settings tab to update it if necessary). 3. 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) ).
After you have modified the code, please copy it.
Step 3: Update Tabs with the code
Switch to the Custom CSS tab:
Paste the copied code to the Custom CSS field:
You may check how it will look like on your page by clicking the Preview button:
Then, click Insert/Update and save the page.
Result
That's it. This is how it may look like on your page:
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