Product Description Accordion Color

[MHC]

Hi,

I tried to change the accordion color using the below code but they don’t seem to work. Could you let me know how I can change the accordion color? (Please see attached screenshot for explanation)

.spb_accordion .spb_accordion_section > h4.ui-state-default{
background-color: #2d3036 !important;
}
.spb_accordion .spb_accordion_section > h4.ui-state-hover{
color:#c3cbd9 !important;
background-color: #2d3036 !important;
}
.spb_accordion .spb_accordion_section > h4.ui-state-active{
background-color: #2d3036 !important;
}

Thank you for your help!

[MHC]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

The 2 images seem equla. Can you check and send them in a higher resolution.
Thanks.

-Rui

[MHC]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

I already logged in but need more specifications to be able to help.

You have a first Panel with the description. Is this one?
You have the Accordion titles(Shipping, Payment, Cancellation)?
There is also the Accordion content.

Any different color when hover?

-Rui

[MHC]

Hi Rui,

Sorry that I didn’t make it clear.
Yes it’s the first Panel with the description, together with Accordion titles & content.

They are the only white backgrounds on that page, and I’d like to make their background darker.

[Rui Guerreiro – SUPPORT]

Add the code below to your theme custom css.This is for the background and text color of the entire accordions.

#product-accordion .panel{
background-color: #2d3036!important;
color:#FFF!important;
}

-Rui

[MHC]

Hi Rui,

Thank you! That works great.
Do you also know how to change the border color for the table shortcode?

Best regards,
MHC

[Rui Guerreiro – SUPPORT]

You mean all the entire borders event the ones inside the table?
-Rui

[MHC]

Yes if that’s possible!

[Rui Guerreiro – SUPPORT]

Add this one to the custom css

/* Inside Vertical lines */
table.standard_bordered td{
border: 1px dotted #e4e4e4!important;
}

/* Outside Border lines */
table.standard_bordered{
border: 1px dotted #e4e4e4!important;
}

-Rui

[MHC]

Hi Rui,

Thank you very much! Both work great. Just one last thing, do you know which folder I can edit the “Description” title (please see attached) and if you know if there is CSS to remove the little arrow next to it?

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
1-For Renaming Title-:
Please refer this article http://docs.woothemes.com/document/editing-product-data-tabs/#section-2.

2- Use this custom css code to remove icon:-
div#product-accordion:after{content:" " !important;}

Thanks
Mohammad

[MHC]

Hi Mohammad,

The 2- code to remove icon is not working..

[Mohammad – SUPPORT]

Hi,
Please try to use this custom css code:-

#product-accordion .accordion-toggle:after {
    content: " " !important;
}

Thanks