JA ACM - Accordion - Support Central

JA ACM - Accordion

fairyjo

Hello,

I'm trying to use the ACM - Accordion module that I found on with the Uber template (https://uber.demo.joomlart.com/index.php/accordion) and managed to make it work as you can see on my website https://fairyjo.ch/faq.

But I find the accordion titles and color very light and dull, I can't find a way to change that, the colors and settings of the accordion look very different in the Uber template.

Where do I set that up? I looked at the Uber template Block documentation but couldn't find how this works.

Thanks a lot for the support, sincerely, Joanie

PS: I'm using the JA Accordion tag because there is no JA ACM extension tag. Might be good to add it (?)

pavit

Hi fairyjo

Could you specify exactly what you want to change ? a screenshot with annotations could help

Would be better for us if you can disable css optimization too -

Regards

fairyjo

pavit

You got it 🙂 Hope that helps

Thanks a lot for the support Pavit

pavit

Hi fairyjo

Could you start to look at THIS DISCUSSION Regarding the closed item ?

Regarding Accordion background you can add to custom.css

.acm-accordion .panel-title a.collapsed {
background:#yourcolor!important;
}

Font color :

.acm-accordion .panel-title a.collapsed {
color:#yourcolor!important;
}

+/- icons colors :

.acm-accordion .panel-title .marker .fa {
background:#yourcolor!important;
color:#ypourcolor!important;
}

Hope it helps

fairyjo

pavit

Wow, thanks Pavit, it works just great. Just wondering why changing the font color cancels the mouse over for the font but not when I change the background color of the fa icons.

So the result is that the accordion items fonts don't change color when I mouse over, but the + icon still does. Any idea how to restore the mouse over for the font? I'm changing the site url so you can see the website with the latest changes including new template (I'm not 100% sure to keep that accordion bg color, I need a better palette).

Also, I'm not sure I understand the link for the closed item. Is it possible to use the custom.css as well or would I have to modify the php file? If so, then I'll just leave it. I'm not comfortable with touching the php files at all.

And since I'm at it, I'm trying something else too. I don't like that the slide-down menus (and future mega menus) are black in the SmallBiz template. I can't find all the right elements to add in the custom.css to make the slide-down my brand color. If you could show me what to do that would be fantastic. I'm still a css tweaker more than a creator 😁

Thanks so much for your help, sincerely, Joanie

pavit

Hi fairyjo

It is not clear to me what you want to change exactly

You want to change mouse hover accordion title for closed items ?

Changing closed items for default will means to change php files , it cannot be done via custom.css

Regarding your last question could you please open a new discussion with the appropriate title ?

Regards

fairyjo

pavit
Sorry I wasn't clear. This is how it looks like after the color change in custom.css
I did the same thing, changed the color of the a link, but for the font it also changed the mouse over. So when I mouse over now, only the + icon is changing color. I don't understand why the difference.

I'll open another thread for the slide-down menu.
Thanks for the explanations, Joanie

Ninja

fairyjo
Hi
the icon change a different color compared to the title
This code is used for icon

.acm-accordion .panel-title a.collapsed:hover .fa {
    background: #234269;
}

If you do not want to change them, you can remove this code.

fairyjo

Ninja

Thanks so much, this is working just fine Pankaj.

I'm very happy, you can now close this thread.
Joanie