Styling the H3

You’re first line should do it:

.accordion-title {color: #32557d;}

You could also try:

h3.accordion-title {color: #32557d;}

and as a last resort try:

h3.accordion-title {color: #32557d !important;}

You shouldn’t need !important, but it could help debug the problem. Perhaps the h3 color style has been set somewhere else in the styles.

It seems like the h3 is set somewhere else in the styles, as none of these snippets are doing the job even when I place them at the very bottom of the stylesheet.

Is there a way to have the accordion-title be displayed as an h2 instead of an h3? That would also solve my issue if possible.

-Zac

Hmm, !important usually overrides any other setting. I’d have to look more closely at your specific stylesheet to offer more help.

There is a way to change the tag from h3 to h2. You just need to set tag="h2" for each accordion-item shortcode like this:

[accordion-item title="Title goes here" tag="h2"]…[/accordion-item]

Hope that helps.

That worked perfectly now that it’s an h2 element. Thanks for your help, I’ll change this topic to resolved!

Best,
Zac