Docs

[Allen O]

Hello,

I’m trying to create different background colors for 5 accordions on my home page.
(http://loveloud.us)

I’ve tried using the following code, but can only get it to create one instance:

/* closed accordion header font/background code */
.ac1-color-acc .x-accordion-heading .x-accordion-toggle.collapsed {
color: #53cecd;
background-color: #ffffff !important;
}

/* open accordion header font/background code */
.ac1-color-acc .x-accordion-heading .x-accordion-toggle {
color: #ffffff;
background-color: #18a19f !important;
font: bold 17px “open sans” !important;
}

/* hover accordion header font/background code */
.x-accordion.ac1-color-acc .x-accordion-toggle.collapsed:hover {
color: #ffffff;

I would like to utilize 5 separate colors.

Please advise…and thank you for your help!

– Allen

[Jade]

Hi Allen,

Please try these CSS selectors:

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(1) .x-accordion-heading .x-accordion-toggle {

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(1) .x-accordion-body {

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(2) .x-accordion-heading .x-accordion-toggle {

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(2) .x-accordion-body {

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(3) .x-accordion-heading .x-accordion-toggle {

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(3) .x-accordion-body {

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(4) .x-accordion-heading .x-accordion-toggle {

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(4) .x-accordion-body {

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(5) .x-accordion-heading .x-accordion-toggle {

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(5) .x-accordion-body {

}

Hope this helps.

[Allen O]

Thanks for your help!

Do I just post that code below the previous on the CSS customization page?

Thanks in advance!

[Allen O]

…and where/how do i assign different colors to each accordion?

[Joao]

Hi There,

Yes you just paste below the other codes.

Than as you can see on the cold every code is related to one of the accordions by number, for example the first two are related to accordion 1:

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(1) .x-accordion-heading .x-accordion-toggle {

You Customizations should go here between the curly tags of each item, see example on the item below.

}

.home #x-section-4 .x-accordion .x-accordion-group:nth-child(1) .x-accordion-body {

color: #53cecd;
background-color: #ffffff !important;

}

Hope that helps,

Joao

[Author]

Posts