Changing the colors and font for accordion

Hi Nathalie,

Thank you for using my plugin and for the kind words. While I typically recommend making more robust upgrade-safe changes, for a change like this you could add the following to your theme’s style.css file:

/* All titles */
.arconix-accordion-title {
    font: <enter font info> !important;
    background-color: <enter bg color here> !important;
}

/* Active accordion title */
.arconix-accordion-title.current {

}

/* Mouse-over accordion title */
.arconix-accordion-title:hover {

}

Thank you for your response. I added the code to the style.css file. Once it’s done, how do I change the font and color? Should i use a code in the widget or edit another style file?

You’d add/edit the values in the sections outlined out above. You need to know your way around CSS a little bit in order to do that.

Oh ok I didn’t see the “enter bg color here” line. Thank you very much!

Sorry to bother again but it’s not working. This is what I typed in the css file:
/* All titles */
.arconix-accordion-title {
font: <p style=”text-align: justify;”><span style=”font-family: ‘hipsterishfontnormal’,sans-serif;”> !important;
background-color: <#F51515> !important;
}

/* Active accordion title */
.arconix-accordion-title.current {

}

/* Mouse-over accordion title */
.arconix-accordion-title:hover {

}

Could you please tell me what’s wrong with it?

.arconix-accordion-title {
    font-family: 'hipsterishfontnormal',sans-serif !important;
    background-color: #F51515 !important;
}

Assuming that font family name is accurate then that should work

It’s working! Thank you ??

me again…what about changing the font’s color?
I tried adding “color:white !important;” under the font-family section but not working :S

Because color is the CSS property to change the text color.

.arconix-accordion-title {
    font-family: 'hipsterishfontnormal',sans-serif !important;
    background-color: #F51515 !important;
    color: white !important;
}

Ok! Thank you very much for your help and have a Happy Holiday!

Hi John, sorry to bother you. I am having the same problem with the font color…
This is what I typed in my CSS file but while the accordion title got bold, the color remains black and it is not changing at all:
/* All titles */
.arconix-accordion-title {
font-family: ‘tahoma’!important;
background-color: #eae4dd !important;
color: #736450 !important; font-weight: bold!important;
}

/* Active accordion title */
.arconix-accordion-title.current {

}

/* Mouse-over accordion title */
.arconix-accordion-title:hover {

}

What am I doing wrong?
Thanks!

If you open up Dev Tools in Chrome or Firefox, do you see your CSS being overridden by the plugin defaults? Do you have a link to a site I could take a look at?

Here it is
https://www.izzietrip.com/izt/it/italiano-milano-citta-darte-e-borghi-lombardi/

The accordions are on the second tab

Ah, it’s not working because your CSS is wrong.

This is what you have:

/* All titles */
.arconix-accordion-title {
    font-family: 'tahoma'!important;
    background-color: #eae4dd !important;
    accordion-title-color: #736450 !important;
    font-weight: bold!important;
}

If you notice, you put accordion-title-color as the CSS property where the correct property is just color.

That said, I have an !important declaration of my own that would still prevent your code from working. You can fix that by going into the /includes/css/arconix-shortcodes.min.css, search for .arconix-accordion-title and remove the !important declaration on the color property. I’ll get a formal fix in the next release.

I amended the CSS as you said and I had done that before already but the color is still black.
I have fixed also the plug in as you said, but nothing changes ??