How can we help you today?

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

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

  • 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.

Insert ShortPoint web part


  • 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:

Add design element


Select the Tabs Design Element from your ShortPoint Page Builder grid:

Select Tabs design element


The Settings tab will open. Add the tab items:


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:


Custom CSS tab


Paste the copied code to the Custom CSS field:


CSS code applied


You may check how it will look like on your page by clicking the Preview button:   


Preview the result


Then, click Insert/Update and save the page.  


Insert or Update



Result


That's it. This is how it may look like on your page:




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