Change tab color

felipegm · September 2016

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

The page is: http://mariapavan.com/onde-encontrar-2/

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

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.

felipegm · 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; }

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.

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

Change tab color

Comments