Tagged: Accordion, background, CSS, enfold
The Enfold forum enabled me to customize colors for the ALB Accordion element successfully. Because I have so many items, I would like to increase the readability by styling it with alternate row background colors.
How might the CSS look?
Here is the code I’m using thus far…
.main_color .toggler {
background: #f1f1f1;
color: #666666;
}
.main_color .toggler:hover {
color: #666;
background: #c1ccc1;
}
.toggler, .main_color .toggler.activeTitle {
background: #c1ccc1;
color: #666;
}
.main_color .toggle_content {
background: white;
}
.toggle_icon .vert_icon, .toggle_icon .hor_icon, span.toggle_icon {
border-color: #FFF;
}
.main_color .toggler, .main_color .toggler.activeTitle:hover {
background: #c1ccc1 !important;
color: #666 !important;
}
Hi Julie!
Thank you for using Enfold.
Use the nth-child selector. Something like this:
.main_color .av_toggle_section:nth-child(even) .toggler {
background: red !important;
}
Regards,
Ismael
Oh beautiful Enfold accordion alternating style :) Gracias!
Please close this ticket.