Change font style and background color of active accordion

Q&ACategory: PluginChange font style and background color of active accordion
Phil asked 2 years ago

I am trying to change the font family stye of my active accordion header and accordion text box to match my general theme style because accordions is overriding them.  How do I do this?
I am also trying to change the color of my active text box.  Is this possible?
I am not an expert in coding but with a little bit of help I am able to do whatever needs to be done.
Thank you

1 Answers
Hasan Staff answered 2 years ago

Thanks for your post,
Could you please check 2.0.2 version of Accordions i have added custom CSS box, please screenshot bellow
http://paratheme.com/wp-content/uploads/2014/10/accordions-custom-css.png
Here is some CSS hacks for your issue
 
Change the id 2883 as your accordion id on custom CSS box.
# class of active accordion header

#accordions-2883 .ui-accordion-header-active{}

# Class of Active accordion content box

#accordions-2883 .ui-accordion-content-active{}

Please let me know for more help.
 

Phil replied 2 years ago

I have updated the version to 2.0.2 and added the following to the custom css box and there is no change:<br>#accordions-3952{}<br>#accordions-3952 .accordions-head{font-family: "Cherry Swash"!important;}<br>#accordions-3952 .accordions-head{font-family: "Comfortaa" !important;}<br><br>I also tried:<br>#accordions-3952{}<br>#accordions-3952 .ui-accordions-head-active {font-family: "Cherry Swash"!important;}<br>#accordions-3952 .ui-accordions-head-active {font-family: "Comfortaa" !important;}<br><br>I also tried:<br>#accordions-3952{font-family: "Cherry Swash"!important;}<br>#accordions-3952 .ui-accordions-head-active {font-family: "Cherry Swash"!important;}<br>#accordions-3952 .ui-accordions-head-active {font-family: "Comfortaa" !important;}<br><br>Nothing has worked. What am I doing wrong?

Hasan Staff replied 2 years ago

Thanks for your reply, can you please give me the accordion page url ? Thanks

Hasan Staff replied 2 years ago

Thanks for your reply, please let me check the font issue, Thanks

Hasan Staff replied 2 years ago

I have checked your link, found the issue with your accordion header & content is wrap by (code) tag thats why its not apply other font-family , after remove the "code" tag its just displaying well font family please see this screenshot http://imgur.com/0rMBs5s , also please check what i mean by "code" tag this screenshot http://i.imgur.com/Vx786dt.png

Hasan Staff replied 2 years ago

This might happen if you use other plugin or script by force warp accordion header or content by "code" tag, our plugin doesn't add "code" tag itself. Thanks

Phil replied 2 years ago

Forgive my ignorance. I have no idea what plug in would force the accordion header or content to have a code tag. All I did was copy the accordion short code into the page that I made. I created a new page and added the accordion code in it. I did nothing else but add a little text to the page so you could see what the body text should look like. I typed a few items in the accordion so you could see what is happening. I left the demo so you could also see that I didn’t add anything. The fonts have not changed.If there is something I need to do to make this work I would appreciate the help and guidance.http://quiltycrate.com/test/test/

Hasan Staff replied 2 years ago

Can you please give me demo admin login to check your issue ? please go this link to send login info http://paratheme.com/contact/ Thanks

Phil replied 2 years ago

Oh, forgive me. I looked at the page’s code and saw that it had added the code tag around the shortcode for accordion. Thank you so much for your help.

Hasan Staff replied 2 years ago

Ha ha ha… that was funny , If you need more help pleas let me know.

Phil replied 2 years ago

I really appreciate it. It is wonderful to have a developer be available and respond quickly to a call for help.

Hasan Staff replied 2 years ago

Hi, if you have time please give us five star reviews at wordpress.org plugin page wordpress.org/support/view/plugin-reviews/accordions also you can submit five star reviews at our plugin page as well http://paratheme.com/items/accordions-html-css3-responsive-accordion-grid-for-wordpress/ Thanks

Phil replied 2 years ago

I will.