Define different colour for tabs

Last updated on

Product:

Wonder Tabs Plugin

Question:

Is it possible to define a different colour for each tab?

Answer:

1. Change tab background colour

In the plugin, step 3 Options tab, Advanced Options, add the following code to the Custom CSS input box. The code changes the colour of the first and second tab.

#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(1) {
    background-color: #90ee90 !important;
}

#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(1):hover {
    background-color: #a0ffa0 !important;
}

#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(2) {
    background-color: #ffe4b5 !important;
}

#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(2):hover {
    background-color: #fff4c5!important;
}

2. Change tab text colour

If you want to change the tab text colour, add the following code. The code changes the text colour of the first tab to white. If you want to change a different tab, change the number in the code nth-child(1).

#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(1) .wonderplugintabs-header-title,
#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(1) .wonderplugintabs-header-title a {
    color: #ffffff !important;
}
 
#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(1):hover .wonderplugintabs-header-title,
#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(1):hover .wonderplugintabs-header-title a {
    color: #ffffff !important;
}

3. Change tab border colour

If you want to change the border colour of the tab, add the following code. The code changes the border colour of the third tab to red. If you want to change a different tab, change the number in the code nth-child(3).

#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(3) {
    border: 1px solid #990000 !important;
}

#wonderplugintabs-TABSID > .wonderplugintabs-header-wrap .wonderplugintabs-header-li:nth-child(3):hover {
    border: 1px solid #ff0000 !important;
}

The created demo is as follows: