Accordion Title Colour Change Sense theme

Store Design
1

Hi,

I am trying to change the colour of the text of the titles on the these two accordians to white. (See screen shots)

The code I have used for .accordion__title doesnt seem to change the colour at all :disappointed_face:

I currently have the following in my base css file:

.banner__heading span {
color: #FFAC9A !important;
}
.banner__text span {
color: #FFAC9A !important;
}
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
color: #AFD7E8 !important;
}
.accordion__title h4 {
color: #FFFFFF !important;
}
.footer-block__heading {
color: #fff !important;
}
.announcement-bar__message {
color: #fff !important;
}
.header__menu-item, .header__menu-item:hover { color: #AFD7E8 !important; }
}

Please let me know how to fix this. https://peachandpetals.com.au/

V

1 Like
2

Screenshot (82).png
Screenshot (82).png1920×1080 219 KB

Screenshot (81).png
Screenshot (81).png1920×1080 213 KB

3

Hi @VeeZed ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-accordion.css->paste below code at the bottom of the file:
.accordion__title {
    color: #fff !important;
}

Hope it can help you.

4

Hi @Amlibolikha ,

Cheer up! It happens. The reason an !important does not work is because you have a code below in the base.css.

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
    color: #AFD7E8 !important;
}

Just a piece of advise, never use “!important”, if you are expecting the code to change in the future. You can read this regarding CSS Specificity.

Specificity Hierarchy

Ex: Button

  1. Inline style. The style inside the element.
  2. Identifiers(ID). Called as: #sectionButton{ background: red }
  3. Classes, pseudo-classes and attributes. Called as: .primary–button { background: red }
  4. Elements and pseudo-elements. Called as: button { background: red }

With this being said, I hope you know what to do. Let me know if you still need help

5

Thank you @Amlibolikha is it possible to only change the colour for the two specific accordians shown above?

This code changes the text colour site wide, which i didnt want to do.

Many thanks

V

1 Like
6

Hi @VeeZed ,

Thanks you for reply

Can you show this section again so I can see it for you to try. On the homepage I can no longer see it