Jump to content


resolved

Different Coloured Tabs



This topic has been archived. This means that you cannot reply to this topic.
6 replies to this topic

#1 58twelve

58twelve

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 12 March 2012 - 11:38 AM

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



#2 Bes Zain

Bes Zain

    Member

  • Members
  • 4,268 posts

Posted 12 March 2012 - 02:14 PM

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

#3 58twelve

58twelve

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 12 March 2012 - 02:35 PM

Hi Bes

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

Thanks for taking a look!

Andy

#4 Bes Zain

Bes Zain

    Member

  • Members
  • 4,268 posts

Posted 12 March 2012 - 02:39 PM

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

#5 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 29,981 posts

Posted 12 March 2012 - 03:51 PM

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

Join the iThemes Builder Community on Google+.



To ensure that we can process your support request efficiently, ALWAYS include a link to your site, and/or the page your request is related to. Please also read the forum guidelines.



When asking your question/posting your request on the forum, please be as concise and specific as possible. The shorter your request, the more to the point, the more specific, the easier it will be for us to try and help out.


#6 58twelve

58twelve

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 12 March 2012 - 04:11 PM

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

#7 58twelve

58twelve

    Advanced Member

  • Members
  • PipPipPip
  • 84 posts

Posted 12 March 2012 - 04:31 PM

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

Andy