Change color of Tabs

mattsaundersmcp · March 2019

I am using the tabbed interface and I would like to set a specific orange color but the options do not allow for this, I am trying to change the tab colors using CSS cant seem to get it to work

https://ibb.co/kSb4JSy

this is the CSS code

body .vc_tta-tabs-list .li.vc_tta-tab { backgroud-color: #f06d57;}

Pablo · March 2019

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.

thanks

mattsaundersmcp · March 2019

hello

Here is the page in question

https://beingbold.com.au/bold90-3/

Bryan · March 2019

We see that the background is orange: http://prntscr.com/mtgyvo

What exactly do you want to change there?

Please explain

thanks

mattsaundersmcp · March 2019

I would like to change the orange color to a specific orange color

#f06d57

Bryan · March 2019

Ok, try using this css

.wpb-js-composer .vc_tta-color-orange.vc_tta-style-modern .vc_tta-tab > a {
	border-color: #f06d57 !important;
	background-color: #f06d57 !important;
	color: #fff;
}

mattsaundersmcp · March 2019

Thanks you so much, that seems to be working, just one tweak would be great, what would be the CSS class to change the color of the text and tab color for the active tab?

Pablo · March 2019

Sure, try this:

.vc_tta-tab.vc_active span{
	color:gold !important;
}

html .wpb-js-composer .vc_tta-color-orange.vc_tta-style-modern .vc_tta-tab.vc_active > a{
	background:blue !important;
}

mattsaundersmcp · March 2019

Thank you so much that is working perfectly, is there anything I can do to decrease the size of the tabs in mobile view, they look too large to me

https://cdn1.imggmi.com/uploads/2019/3/6/4281e52d8a3a6fbf96310f4b693104b7-full.png

Pablo · March 2019

What do you mean by 'decrease the size of tabs'?
You want to change the font size or the width of the tab or the padding inside of that box?
Please explain your question greater
Thanks

mattsaundersmcp · March 2019

Sorry, I mean the width and height of the tabs, they seem very large

Pablo · March 2019

Hi,

The height of this tab is automaticaly managed, so we cannot change that.

The only way to make it 'smaller' is to set the padding value to 0 in the WPBakery settings of that item.

Thanks

Change color of Tabs

Comments