Jump to content


resolved

Change Tabber Colors

in progress information tabber

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

#1 charrabennett

charrabennett

    Advanced Member

  • Members
  • PipPipPip
  • 53 posts

Posted 25 February 2012 - 03:32 PM

How do I change the colors of the tabber?

http://homeswilliamsburgva.com/wp-content/themes/iRealEstate/images/Screenshot2.png

http://homeswilliamsburgva.com/

#2 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

Posted 26 February 2012 - 04:08 PM

Hi,

the colours are changed (compared to the theme out-of-the-box), so you must have figured this out before. It can be done by editing the jtabber.css file and modifying background images.

A search for change tabber in this forum will also give you some relevant results, such as this one http://ithemes.com/forum/topic/132-how-do-you-change-the-background-color-of-tabber/

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.


#3 charrabennett

charrabennett

    Advanced Member

  • Members
  • PipPipPip
  • 53 posts

Posted 08 March 2012 - 07:06 PM

Yes, I know, I added the code in the exact same post you quoted to the bottom of my regular css stylesheet. But there is no white tag in it. ...and I have went through the entire jtabber.css and changed what I thought was the proper tag - didnt work. Then I changed every color code in it that was white (#ffffff) to bright pink (#ff40ff) so I could see if it was truly there that the problem was - and guess what - that didnt work either. SO i checked my regular css code again and still couldnt find it. UGH. Im going to copy both below and hopefully you can see where I screwed up.

[code removed by moderator, we can see all the css code by examining your site. When posting large chunks of code, please use a service like pastebin]

#4 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

Posted 09 March 2012 - 05:21 PM

Hi,

what exactly is the change you want to apply?

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.


#5 charrabennett

charrabennett

    Advanced Member

  • Members
  • PipPipPip
  • 53 posts

Posted 10 March 2012 - 11:24 AM

If you look at the tabber that is on the home page directly under the first block of text - the color of the tabs when you mouse over them is white so you can barely read the text. I want to change the background color of the mouseover from white to black. See below screenshot.
http://homeswilliamsburgva.com/Screenshot.png

#6 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

Posted 12 March 2012 - 06:43 AM

Ah,

now I see, you are not referring to the iCompany tabs, but the tabber widget plugin in another location.

I will first move this topic to the appropriate forum: http://ithemes.com/forum/forum/71-tabber-widget-plugin/

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.


#7 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

Posted 12 March 2012 - 06:48 AM

Hi,

add the following code at the end of your child themes stylesheet style.css:

.tabber-widget-rounded-dark ul.tabber-widget-tabs a:hover {
	color: #000 !important;
}

and change the colour to your likings,

that should do the trick,
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.


#8 charrabennett

charrabennett

    Advanced Member

  • Members
  • PipPipPip
  • 53 posts

Posted 14 March 2012 - 04:03 PM

Alright - that changed the color of the FONT so at least now you can read it :) Now how do I change the hover color? LOL! This is a challenge now to get this right!

#9 Ronald

Ronald

    Forum Admin

  • Administrators
  • Others: All Plugins, All Themes, Moderators, Webdesign
  • 30,145 posts

Posted 15 March 2012 - 05:02 AM

Hi,

the code I gave you changes the text color on hover indeed, so this really shouldn't be too difficult to figure out. If you instead wanted to change the background color, add the word "background-" before "color". If you want to change both text and background, add both lines.

.tabber-widget-rounded-dark ul.tabber-widget-tabs a:hover {
	color: #000 !important;
	background-color: #e1771e !important;
}
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.


#10 charrabennett

charrabennett

    Advanced Member

  • Members
  • PipPipPip
  • 53 posts

Posted 27 March 2012 - 03:42 PM

Thank you :)