Collapsible Row's Background Color Changes ( Dawn Theme )

[dreamtechzone_5]

Hello Everyone!

I am using Shopify Dawn Theme. I want to change the background color and text color of the Collapsible Row. Want to change the background color and text color of the blue color marked area. I want to keep the background color white and the text color black. Also want to change the arrow icon. I have added an image below to keep it exactly that way. Please help me. Thank you.

Store: https://urbanglowingstore.myshopify.com/pages/faqs
Password: Admin

As it is now

The way I want to keep it

[Moeed]

Hey @dreamtechzone_5

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @dreamtechzone_5

Please add this code to Custom CSS of that section.

summary .icon-caret { transform: rotate(267deg); }
.accordion details[open]>summary .icon-caret { transform: rotate(0deg) !important; }
.collapsible-row-layout .accordion .accordion__content { background: #fff; color: #000; }

[anupam1607]

Hey @dreamtechzone_5

First of all you have to remove this CSS.

Then after add that same CSS to the Title of the accordion

[dreamtechzone_5]

Arrows can be kept in this way? I am talking about changing the Arrows style.

[Moeed]

Hey @dreamtechzone_5

Keep the previous code and add this new code above in the end of theme.liquid file.

summary .icon-caret { 
    transform: rotate(267deg); 
}
.accordion details[open]>summary .icon-caret { 
    transform: rotate(0deg) !important; 
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed