[Dawn Theme] How do I modify collapsible rows? Background color, border, etc.

[namestolen]

On my product page I want to have a collapsible row that is automatically open for my "Product Specifications". I want to change the background color, the border size, and border color.  Thanks!

[AnneLuo]

Hi, @namestolen 

I can help you with it. But it need to add some custom code. If you need my help, please let me know.

[namestolen]

Yes of course.  What is the code and where should I put it?

[Sweans]

Hi @namestolen ,

You can make the mentioned changes by adding a simple line of css.

.product__accordion{
background-color: #3a3aa6 !important;
border-top:1px solid #fff !important;
border-bottom:1px solid #fff !important;
}

You can change the color by replacing the #color to your hex code and adjust the thickness of border by increasing the px value in border-top and bottom

Paste this code to your base.css

Go to your online store> themes > Click on three dots of current active theme > edit code > search base.css in the left sidebar > open it and paste the code.

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[namestolen]

Posting this code in base.css did not work.  Posting your code in the Custom CSS of the Product information section of the Default product page did work.

[Sweans]

Hi @namestolen ,

It must be due to some overide issue can you add the code below.

.product__info-wrapper .accordion {
background-color: #3a3aa6 !important;
border-top:1px solid #fff !important;
border-bottom:1px solid #fff !important;
}

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Sangeetanahar]

hello @namestolen 

please send me the Website URL.

thanks

[namestolen]

https://rttrove.com/