How can I change the image-with-text color on Debut theme?

[Turbefi]

Hey guys,
I’m using the Debut theme for a customer ( https://www.trixsparts.com/ )
I want to change the Aftermarket section to show a purple card with the purple 1px border around the image. I went into the Config\settings_schema.json section and have created another drop down in the Customise section so I can select purple however it seems like the CSS is being overwritten elsewhere.

Is anyone able to help? I have added a note with !important in the theme/liquid section as I would have thought this would have overridden anything else.

[ZainAli]

Hi,

Hope you are having a great day.

In the above-given instance when you add a new drop-down item, it is treated as a class name (class=‘#7600bc’) just like “accent-1” or “background-2”.

To resolve this use “purple-bg” as the value of the Purple drop-down label then create a CSS class such as:

.purple-bg{
  background-color: #7600bc;
}

Add the “important” attribute if needed.

Now after saving this when you will select “Purple” on the drop-down the “purple-bg” class will be added to your HTML.

To see where the background changing class is being applied, search for

{{ section.settings.color_scheme }}

or 

{{ block.settings.card_color_scheme }}

in the HTML/liquid code.

Hope it helps.

Regards,

Zain Ali.

[Turbefi]

Thanks for your help. See my screenshots attached again. It still hasn’t seemed to work so I must not be doing it quite right. In theme.liquid I added the CSS you mentioned

And below is where I referenced it with the purple-bg