Change Colors on Tabbers & Accordions

southhillsmarketing · January 2020

Hello,

My employers have requested that I change the background colors of the tabber tops (the clickable portions) and the +/- (open/close) boxes on the accordions to make them stand out more. I can only find the option to change the colors of the text in the Muffin Options. Before I go poking around in the CSS blindly, can you advise me on how to do this? Thanks!

southhillsmarketing · January 2020

Forgot to add link to website - tabbers and accordions appear together on this one page: https://www.southhills.edu/programs/diagnostic-medical-sonography/.

Pablo · January 2020

Hello,

Please use this CSS code below.

Paste it into the Theme Options > Custom CSS & JS > CSS

.mfn-acc .title, .jq-tabs li a{
	background:gold !important;
}

.mfn-acc .title i{
	color:red !important;
}

Thanks

southhillsmarketing · January 2020

Thank you for your fast response! I put the code into place, but it does not work fully as expected. The Accordion color only changed the +/-, not the background. And the tabber color changed all the tabs, so it was difficult to discern which tab was currently selected.

In a nutshell, what I'd like to do is change inactive tabbers to blue background with white text, active tabs to white background with blue text, and the accordion squares with the +/- to blue with white +/-.

(Same link above applies to this comment.)

Bryan · January 2020

Do you mean the whole bar or just the background behind the icon?

It would be easier if you could present this on an image so we understand better

thanks

southhillsmarketing · January 2020

Hello! I've created a mockup of the look my employers have requested.

How the elements currently appear: https://www.southhills.edu/BeThemeSupport/CurrentLook.png

How we'd like them to appear: https://www.southhills.edu/BeThemeSupport/ColorMockup.jpg

Thank you again for your help!

Bryan · January 2020

Hey,

check this css

.accordion .question .title::before {
	background:blue !important;
}

body .mfn-acc .title i {
	color:#fff !important;
}

.ui-tabs .ui-tabs-nav li:not(.ui-state-active) a {
background:blue !important;	
	color:#fff !important;
}

thanks

southhillsmarketing · January 2020

This was so helpful, thank you so much!!

Change Colors on Tabbers & Accordions

Comments