Change tab color

Comments

• Albert

  September 2016

  Hi,
  
  to change background color for the tabs, you need to use the following css:

  .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background: #000 !important; }
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #000 !important; }
  .ui-tabs .ui-tabs-nav li a, .accordion .question .title, .faq .question .title, table th { color: #000; }
  .ui-tabs .ui-tabs-nav li.ui-state-active a, .accordion .question.active .title > .acc-icon-plus, .accordion .question.active .title > .acc-icon-minus, .faq .question.active .title > .acc-icon-plus, .faq .question.active .title, .accordion .question.active .title { color: #FFF; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• felipegm

  September 2016

  thank you. 

  I´m using the code above, changing the colors, but both tabs, active and inactive are getting the same color. 

  
  

  I´m using 

  .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background: #000000 !important; }

  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #AEAA91 !important; }

  .ui-tabs .ui-tabs-nav li a, .accordion .question .title, .faq .question .title, table th { color: #fff; }

  .ui-tabs .ui-tabs-nav li.ui-state-active a, .accordion .question.active .title > .acc-icon-plus, .accordion .question.active .title > .acc-icon-minus, .faq .question.active .title > .acc-icon-plus, .faq .question.active .title, .accordion .question.active .title { color: #FFF; }

  
  

  the result: 

  http://mariapavan.com/onde-encontrar-2/
  

  
  
• Albert

  September 2016

  If both are the same color, then please remove !important declaration from the second line of css.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• felipegm

  September 2016 edited September 2016

  Thanks

  I´m trying to change the text inside the tabs, but only works when defining them as H1. What´s the option to change the color of the text inside?
• Albert

  September 2016

  To change the text inside, please use:

  .tabs_vertical.ui-tabs .ui-tabs-nav li a { color: #000 !important; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• felipegm

  September 2016

  Sorry, I meant was the text of content inside each oppened tab. 
• Albert

  September 2016

  Please back-up the page you sent us before or send us link to new page where you got these tabs so we can have a look on it.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• felipegm

  September 2016

  Here it is: http://mariapavan.com/onde-encontrar/
• Albert

  September 2016

  Ok. So to change the content color inside tabs, you need to use the following css:

  .tabs_vertical.ui-tabs .ui-tabs-panel { color: #FFF !important; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next