Accordion Vertical Title Bar Color

Sabrenzie · March 2017

Hello,

I have searched through the forum, and I could not find anything that would work on my site. I am trying to change the accordion title bar color on my website. One specific page it is being used on is: http://frost.frostpllc.com/tax-services/ . I would like to change the background of the accordion to #c6d6e3 and then change the text to white. Is there a way to do this?

On the same page, I would also like to know how I can color the widgetised sidebar menu without effecting the menus within the footer of the theme? The title and surrounding color, as well as the alternate hover colors.

Thank you all for being so helpful!

Bryan · March 2017

Hi,

for the accordion color use

.vc_tta-color-grey.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-heading {
    background-color: #c6d6e3 !important;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-title>a {
    color: white !important;
}

Hi, the customization of the sidebar can be done only with css.

thanks

Sabrenzie · March 2017

Thank you so much!! The accordion css worked perfectly.

Could you also help me with turning the icon white on the accordion?

Could you please provide me with the css for the sidebar colors as well?

Bryan · March 2017

Yes, but how do you want it to look, what colors etc.

Sabrenzie · March 2017

Here you go:

I would like the background to be #01384f

I would like the hover background color to be #c6d6e3

Then, for both I would like the text to be white.

Thank you!!

Sabrenzie · March 2017

Also, I would like the icon on the accordion to be white.

Bryan · March 2017

Here you go

.widget_mfn_menu ul li a:hover {
	background:#c6d6e3 !important;
}
.widget_mfn_menu ul li.current-menu-item:not(.current-menu-ancestor) > a, .widget_mfn_menu ul li.current_page_item:not(.current_page_ancestor) > a {
	background:#01384f;
}
.vc_tta-color-grey.vc_tta-style-flat .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::after, .vc_tta-color-grey.vc_tta-style-flat .vc_active .vc_tta-panel-heading .vc_tta-controls-icon::before, .vc_tta-color-grey.vc_tta-style-flat .vc_tta-controls-icon::after, .vc_tta-color-grey.vc_tta-style-flat .vc_tta-controls-icon::before {
    border-color: white !important;
}

Sabrenzie · March 2017

It worked perfectly! Thank you so much!

Accordion Vertical Title Bar Color

Comments