6 replies to this topic

[58twelve]

Hi

I can't find an answer to this anywhere, so I am hoping that it is do-able, and that someone may be able to show me how to do it, please...

I need to have different colours for each active tab.  I will have 5 tabs in all (I have attached a rough screenshot of where the design is heading).  In an inactive state they will be #3d3d3c, but then as each one is clicked, I need the tab background to be the colour associated with that word.  In the screenshot you will see that the tab for 'relational' is light green.  For 'inspiring' I need a red background, for 'trusting' I need it to be dark green and for 'engaging' it needs to be blue.  I know how to change the tab colours so that they are all one colour when active, but I can't see how to change them so that each active tab can have a different colour

I am also using Slideshow on the site, and I have tried other tab options, but when I activate the plugin they seem to break the slideshow - I am guessing some kind of javascript conflict, so apart from the fact I like the ithemes stuff and want to use it, it seems I have to stop things breaking :-)

I really really hope this is possible...

Thanks in advance

Andy

Attached Files

•  RITE Home.pdf   922.58K   150 downloads

[Bes Zain]

Hi Andy,

Thanks for posting this. Let's see:

1 : What is the link to your site where you have this Tabber Widget setup and ready so we can see it?

2 : This can help too: http://ithemes.com/forum/topic/24524-change-tabber-colors/

Regards,

Bes

[58twelve]

Hi Bes

It's a test site - dev.ritesocialenterprises.org

Thanks for taking a look!

Andy

[Bes Zain]

Hi Andy,

Thanks for the reply. Just to confirm: did you take a look and go through the suggestions in the above thread I shared also http://ithemes.com/forum/topic/24524-change-tabber-colors/

Regards,

Bes

[Ronald]

Hi Andy,

for the active tab background colours, add the following code at the end of your stylesheet:

#tabber_widget-2-content.tabber-widget-rounded-light ul.tabber-widget-tabs li:nth-child(2) a.selected {
	background-color: lightgreen;
}

#tabber_widget-2-content.tabber-widget-rounded-light ul.tabber-widget-tabs li:nth-child(3) a.selected {
	background-color: red;
}

#tabber_widget-2-content.tabber-widget-rounded-light ul.tabber-widget-tabs li:nth-child(4) a.selected {
	background-color: darkgreen;
}

#tabber_widget-2-content.tabber-widget-rounded-light ul.tabber-widget-tabs li:nth-child(5) a.selected {
	background-color: blue;
}

Can you activate the slideshow, and indicate where (on which page) there may be a conflict?

Ronald

[58twelve]

Great - thanks Ronald, much appreciated.  I will try that first thing in tomorrow.

The conflict was on the page I linked to when I tried using alternative tab approaches - but with your fix I won't need to look elsewhere so the conflict, or whatever it was, won't be an issue :-)

Thanks for your help!

Andy

[58twelve]

Couldn't wait until tomorrow - tried it now :-)  Works like a charm.  Thank you SO much!

Andy