Accordion colors

[joell-22]

Hello,

I’d like to change the accordion colors. I hope it’s possible with custom CSS.

– header background (when closed) e.g. green
– header background and text (on mouseover) e.g. yellow and red
– header and content background (when open) e.g.orange and red

Thanks in advance!

Joe

[Rui Guerreiro – SUPPORT]

Hi,

Add the code below to your custom css option.

.spb_accordion .ui-state-hover{
background-color:#E2D424!important;
}

.spb_accordion .ui-state-hover a{
background-color:red!important;
}

.spb_accordion .ui-state-active, .spb_accordion .ui-state-default{
background-color:green!important;
}

.spb_accordion_section, .spb_accordion .spb_accordion_section, .spb_accordion_section .ui-accordion-content {
    background-color: red !important;
}

.spb_tabs .nav-tabs li.active a, .spb_tour .nav-tabs li.active a, .spb_accordion .spb_accordion_section > h3.ui-state-active a {
    background-color: orange!important;
} 

Hope it helps.

-Rui

[joell-22]

Cool, works perfect! 🙂
But now the header-text of the open segement disappears on mouseover because it’s the same color. How do I change the text color on mouseover when the segment is open?

[Rui Guerreiro – SUPPORT]

Add the code below and change it’s color.

.ui-accordion h3.ui-accordion-header.ui-state-active:hover a, .ui-accordion h3.ui-accordion-header:hover .ui-icon {
    color: #000!important;
}

-Rui

[joell-22]

THANKS!!

[Rui Guerreiro – SUPPORT]

no problem. Glad I could help 🙂

-Rui