tab nav each to have a custom color

oneplanetadvertising
(@oneplanetadvertising)

9 years, 8 months ago
Hi

i am desperately trying to change the color of each tab (Title & background) within a tab set. I have looked through the documentation but cannot work it out. i have tried to add a class to each title `[su_tabs class=”my-custom-tabs”]
[su_tab class=”su-tabs-nav1″ title=”Commercial” ] Tab 1 content [/su_tab]
[su_tab title=”Domestic” class=”su-tabs-nav2″] Tab 2 content [/su_tab]
[su_tab title=”Agriculture” class=”su-tabs-nav3″] Tab 3 content [/su_tab]
[/su_tabs]`

with the custom Css being
```
.su-tabs.my-custom-tabs { background-color: #243349 }

  .su-tabs.my-custom-tabs .su-tabs-pane {
    padding: 1em;
    font-size: 1.3em;
    background-color: #882C69;
  }
  .su-tabs-nav1 span{
  	background-color: #3DAAC3;
  	color:#FF0000;
  }
  .su-tabs-nav2 span{
  	background-color: #E95F1F;
  }
   .su-tabs-nav3 span{
  	background-color: #76B31E;
  }
  .su-tabs-nav4 span:hover{
  	background-color: #3DAAC3;
  }
  .su-tabs-nav5 span:hover{
  	background-color: #E95F1F;
  }
   .su-tabs-nav3 span:hover{
  	background-color: #76B31E;
  }
```
So what i am looking for is this

tab1:commercial(Green)| tab2:Domestic(Orange)| tab3:Agriculture(Purple)

Any ideas please?

https://wordpress.org/plugins/shortcodes-ultimate/

Viewing 7 replies - 1 through 7 (of 7 total)

Thread Starter oneplanetadvertising
(@oneplanetadvertising)

9 years, 8 months ago

Forgot to add a a link to the site

http://testerpage.co.za/safire1/products/

wolfdoom
(@wolfdoom)

9 years, 7 months ago

You can try using a CSS selector like this
.su-tabs-nav span:nth-of-type(1) {background-color:pink;}
.su-tabs-nav span:nth-of-type(2) {background-color:red;}
.su-tabs-nav span:nth-of-type(3) {background-color:blue;}

You should be able to apply a hover to that as well…I think it’s
.su-tabs-nav span:hover:nth-of-type(whatever number)

Thread Starter oneplanetadvertising
(@oneplanetadvertising)

9 years, 7 months ago

Thanks wolfdoom, will give this a try now.

Thread Starter oneplanetadvertising
(@oneplanetadvertising)

9 years, 7 months ago

Works like a charm.

Thanks again wolfdoom!

Thread Starter oneplanetadvertising
(@oneplanetadvertising)

9 years, 6 months ago

Hi Guys/Wolfdoom!

It has been brought to my attention that the above fix does not work on ie8 or 9, how would i go about making it on those horrible horrible browsers?

Many Thanks in advance.

Jenni
(@balisolo)

9 years ago

Hi guys,
I want to customize the tab. It seems that the CSS file’s name is “box-shortcodes.css” so I had my style (on “the Tabs + Tab” section but nothing change.

Here is my code (given by the plugin help) :

<style>
.su-tabs.my-custom-tabs { background-color: #396774}
.su-tabs.my-custom-tabs .su-tabs-nav span { font-size: 1.3em }
.su-tabs.my-custom-tabs .su-tabs-nav span.su-tabs-current { background-color: #BB8A59}
.su-tabs.my-custom-tabs .su-tabs-pane {
padding: 1em;
font-size: 1.3em;
background-color: #BB8A59;
}
</style>

Did I put it in the wrong place ?
Any suggestion?

You can see the tab here : http://osteodiez.fr/rendez-vous-tarifs/ after “Tarifs des consultations d’ostéopathie”

Thanks a lot for your help 🙂

Thread Starter oneplanetadvertising
(@oneplanetadvertising)

9 years ago

Hi Jenni

If you are adding this code to box-shortcodes.css then maybe remove the <style></style> tags?

Thanks

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘tab nav each to have a custom color’ is closed to new replies.