How to change the color of my accordion backgrounds

Good Day To Everyone,

My next quest is to find how to change the color of my accordion backgrounds.

I have several hundred PDF academic papers to post and I would like to color code the different subjects.

I am using Integrity

Is that possible or do they have to all stay black?

Slainte’,

Jann

Hi Jann,

Please use the new Accordion element for that reason, there you will have an option to change the background color out of the box in the options:

Make sure that you enable the Advance mode to see the background option. For more information about the advanced/simple mode please read the changelog:

https://theme.co/changelog/#theme-pro-2-1-0-theme-x-6-1-0-cornerstone-3-1-0

Thank you.

I appreciate your reply however, cornerstone and I are incompatible.
I just can not use it.
Sorry, but since the beginning of X it has blown
my site into cyber-space.

I do not seem to grasp how to use it properly…I have tried.

So is there a work a round?

Thanks,

Jann

Hi again,

If you’re not using Cornerstone then you’ll need it to do it with custom CSS. Try adding the following code in the Theme Options > CSS:

.x-accordion-heading .x-accordion-toggle {
    color: #fff !important;
    background-color: #2196F3 !important;
}
.x-accordion-inner {
    background-color: black !important;
    color: #fff !important;
}

If you need to customize the accordion in more detail then please follow https://xthemeusers.com/code-snippet/styling-accordions/

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

Thank you very much.

Jann

You’re most welcome!

Pertaining to this code, how in a section of my site where I have an academic
area, there are several topic pages each with the .pdf’s pertaining to the topic they are posted under.

How do I color coordinate each separate accordion for that topic.
As in: Predators are brown Mammals are tan Vegetarian is green aviary is blue etc.?

I do not want to global change and have them still all the same color.

Each topic will have several pages due to size of the content.

Thanking you ahead,

Jann

Hi @webbjann,

To assist you with further, we’ll need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

Hi,

I do not have the PDF’s in yet as I have to get them in, over 1K
of them and hand coding 1 by 1 is grueling to get done.

I also have the video area and want to also color tit/hem as well.
https://mountains.milestones.legendoflamarvalley.com/video/documentaries/

Thank you for replying.

slainte’,

Jann

Hello There,

Are you using the accordion shortcode which can be found here (http://demo.theme.co/integrity-1/shortcodes/accordion/)?

You will need to edit your shortcode and include a custom class. For example, you will have this:

[accordion class="predators"] [accordion_item title="Accordion Title" parent_id="my-accordion"]Your text here[/accordion_item] [accordion_item title="Accordion Title" parent_id="my-accordion" open="true"]Your second accordion text[/accordion_item] [accordion_item title="Accordion Title" parent_id="my-accordion"]Your third accordion text[/accordion_item] [/accordion]

[accordion class="mammals"] [accordion_item title="Accordion Title" parent_id="my-accordion"]Your text here[/accordion_item] [accordion_item title="Accordion Title" parent_id="my-accordion" open="true"]Your second accordion text[/accordion_item] [accordion_item title="Accordion Title" parent_id="my-accordion"]Your third accordion text[/accordion_item] [/accordion]

[accordion class="vegetarian"] [accordion_item title="Accordion Title" parent_id="my-accordion"]Your text here[/accordion_item] [accordion_item title="Accordion Title" parent_id="my-accordion" open="true"]Your second accordion text[/accordion_item] [accordion_item title="Accordion Title" parent_id="my-accordion"]Your third accordion text[/accordion_item] [/accordion]

[accordion class="aviary"] [accordion_item title="Accordion Title" parent_id="my-accordion"]Your text here[/accordion_item] [accordion_item title="Accordion Title" parent_id="my-accordion" open="true"]Your second accordion text[/accordion_item] [accordion_item title="Accordion Title" parent_id="my-accordion"]Your third accordion text[/accordion_item] [/accordion]

And then you will have to update the css code and use something like this:

/* Predators */
.predators .x-accordion-heading .x-accordion-toggle {
    color: #fff !important;
    background-color: brown !important;
}
.predators .x-accordion-inner {
    background-color: brown !important;
    color: #fff !important;
}

/* Mammals */
.mammals .x-accordion-heading .x-accordion-toggle {
    color: #fff !important;
    background-color: tan !important;
}
.mammals .x-accordion-inner {
    background-color: tan !important;
    color: #fff !important;
}

/* Vegetarian */
.vegetarian .x-accordion-heading .x-accordion-toggle {
    color: #fff !important;
    background-color: green !important;
}
.vegetarian .x-accordion-inner {
    background-color: green !important;
    color: #fff !important;
}

/* Aviary */
.aviary .x-accordion-heading .x-accordion-toggle {
    color: #fff !important;
    background-color: blue !important;
}
.aviary .x-accordion-inner {
    background-color: blue !important;
    color: #fff !important;
}

Hope this helps.

Yes that is what I am using and I am working with what you gave me now. Thank you very very nuch for the help.

Blessings,

Jann

Thanks Jann for updating the thread, you are welcome :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.