Change tab color

How can I change the tab color from blue to a custom one?

Comments

  • 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; }
  • 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: 

  • If both are the same color, then please remove !important declaration from the second line of css.
  • 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?
  • To change the text inside, please use:
    .tabs_vertical.ui-tabs .ui-tabs-nav li a { color: #000 !important; }
  • Sorry, I meant was the text of content inside each oppened tab. 
  • 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.
  • 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; }
Sign In or Register to comment.