[jrhager84Participant]

Hi there! I cannot figure out how to just make individual accordions different colors via css. I can make *all* of them a different color by using the .x-accordion-group tag, but any time I try to use the unique id, I just get a border around the div. Please help!

http://www.guardiancheer.com/programs/

All components up to date.

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

#rec-list .x-accordion-group:first-child {
    background-color: red;
}

#rec-list .x-accordion-group:last-child {
    background-color: blue;
}

#cheer-list .x-accordion-group:first-child {
    background-color: red;
}

#cheer-list .x-accordion-group:last-child {
    background-color: blue;
}

Change red and blue with the color that you like.

Hope that helps

[jrhager84Participant]

If I only want each *whole* accordion group based on the id to be a particular color, do I still have to specify first and last child?

[jrhager84Participant]

My mistake. I’m referring to the default border. I realized that I did not communicate that effectively. Mea culpa.

[ChristopherModerator]

Hi there,

No, if you use specific ID for each accordion item, then you don’t need to use nth-child selector.

Assume that accordion items IDs are test1 and test2, the CSS would be :

#test1 .x-accordion-group {
    background-color: red;
    border: 1px solid blue;
}

#test2 .x-accordion-group {
    background-color: blue;
    border: 1px solid red;
}

Hope it helps.

[jrhager84Participant]

Thank you so much! I don’t know what I was doing incorrectly, but this solved it!

[jrhager84Participant]

Is there a tutorial for each state of the accordion (i.e. hover etc.)? I can’t find documentation on it anywhere. Thanks!

[RupokMember]

Hi there,

Thanks for writing back. This is not something to be documentation as you only need this when you need custom development and you can always find this by inspecting the element. Whenever you are doing custom development, I assume you know how to use the Inspector as it’s not that complex. You could ask for that as well if you can’t figure it out and we could help to point them.

So it seems you are referring the normal state and hover state of the title of accordion. Here it goes :

/* when collapsed */

.x-accordion-heading .x-accordion-toggle.collapsed {
  background-color: #fff;
}

/* when opened */

.x-accordion-heading .x-accordion-toggle {
  background-color: #fafafa;
}

/* hover state */

.x-accordion-heading .x-accordion-toggle:hover {
  background-color: #fafafa;
}

Hope this helps.

Cheers!

[jrhager84Participant]

Understood. I just figured that there was a resource somewhere that showed the states of each element in css, to make coding easier. No biggie though. I’ll get more adept at inspector. Thanks!

[RupokMember]

You are welcome!

Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts