Change Colors on Tabbers & Accordions

southhillsmarketing

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

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

Pablo

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

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

southhillsmarketing

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

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

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

southhillsmarketing

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

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

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

southhillsmarketing

This was so helpful, thank you so much!!