css coding to change colour of FAQ section divider and icon

Shopify Discussion
1

I have a page with multiple FAQ sections

I need to change the colour of the icon and divider in each section with CSS.
I am using turbo theme OOTSB.
any help would be greatly appreciated.

1 Like
2

Can you share your store’s URL?

3

Hi @StevieBuoy , Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

4

https://www.steviebuoy.com.au/pages/perfume-collection

icon and divider in each section are pink and need to match title colour please

5

https://www.steviebuoy.com.au/pages/perfume-collection

icon and divider in each section are pink and need to match title colour please.

6

  1. Go to ‘Online Store’ → Themes → Edit Code

  2. In the assets folder, locate the file ‘styles.css’

  3. At the bottom of the file paste the below code

.faqAccordion>dt>button {
    border-bottom-color: black; /* Adjust the color according to your preference */
}
.faqAccordion>dt>button:hover{
    border-bottom-color: black /* Adjust the color according to your preference */
}
.faqAccordion>dt>button:focus{
    border-bottom-color: black /* Adjust the color according to your preference */
}
.faqAccordion>dt>button::after {
    color: black; /* Adjust the color according to your preference */
}
7

  1. Go to ‘Online Store’ → Themes → Edit Code

  2. In the assets folder, locate the file ‘styles.css’

  3. At the bottom of the file paste the below code

#shopify-section-template--22888501674277__main .faqAccordion>dt>button {
    border-bottom-color: black; /* Adjust the color according to your preference */
}
#shopify-section-template--22888501674277__main .faqAccordion>dt>button:hover{
    border-bottom-color: black /* Adjust the color according to your preference */
}
#shopify-section-template--22888501674277__main .faqAccordion>dt>button:focus{
    border-bottom-color: black /* Adjust the color according to your preference */
}
#shopify-section-template--22888501674277__main .faqAccordion>dt>button::after {
    color: black; /* Adjust the color according to your preference */
}
8

Thank you this worked perfectly

9

Thank you for your help :blush: