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 user 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 big blue 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, select the Tabs Design Element from your ShortPoint Page Builder grid:  



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) {
    background-color: tomato !important;
}

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

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

.sp-type-tab.shortpoint-li.shortpoint-child:nth-of-type(4) {
    background-color: yellow !important;
}
Notes:
  • You may update the background-color values for different tabs.
  • The active tab will always have the theme color (check the Settings tab to update it if necessary).
  • You can have more than 4 tab items. In this case, simply copy the code line for the item and update its index (for exmaple, 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: