button colours showing innacurately when using a colour theme with transparent background

[junglecatclub]

Hello! we have some pages on our site that are set to have a transparent background as we have background images with CSS.

however in these sections the buttons/other elements seem to be showing with black backgrounds/not letting us adjust the colours like a theme normally does.

any one can help?

the page: https://junglecatclub.com.au/products/mint-green

[Made4uo-Ribe]

Hi @junglecatclub 

TRy this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.quantity:before {
    background: transparent !important;
    }

• And Save.
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[junglecatclub]

thank you for that it worked but it doesnt really address the issue of why its happening/why we can no longer edit the button colour. any ideas whats going on?

[jordancarey]

Hmm... That's a bit tricky, and from the title of your theme I can see that your Dawn has been customized quite a bit. I couldn't replicate this in Dawn 15.2.0, and it's hard to tell exactly why it's happening without having access to the store and being able to see all the code.

I looked through your post history, and it's possible that this person's reply to an earlier post you made may have caused it? Since they had you change the background color of button--secondary to black and used !important at the end, that !important could be overriding your theme editor changes.

(Code with !important is prioritized over any other code, and people recommend it because it's a lot easier to override the theme than figure out what's going on in the theme code and making changes that way--but the downside of using it is issues like this where you don't want your secondary buttons to be black no matter what.)

[tim]

Actually, it's a bug/feature in Dawn -- if your background color has transparency, theme strips the opacity part of the color. Say, 

transparent in Customizer equals RGBA 0,0,0,0.
Theme strips the A component and it becomes 0,0,0 -- black.

Here is the code --https://github.com/Shopify/dawn/blob/main/layout/theme.liquid#L62-L63:

.color-{{ scheme.id }} {
  --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};

[junglecatclub]

Oh right, sorry can i do anything with this code? 

[jordancarey]

No, Tim is talking about code that's already in Dawn that ignores transparency in colors in a lot of places--for example, link text color and button colors can't be made transparent without some code edits. (I didn't know that before, thanks for sharing Tim!)

For your transparent sections, something you can try to see if it's the transparency causing the issue is to keep the transparent slider all the way down while changing the color value, like this:

But if that doesn't do anything, my guess is that it's most likely this code that someone else commented in an older thread you made that's causing it, if you ended up using it and it's still in your theme.liquid. What you'd want to do in that case is to remove the "!important" after the "color:" part and see if that fixes it without causing issues with your current image with text sections, and if it's still not letting you change the color of your buttons, try removing it completely.

Best of luck with your store!

[tim]

Yes and you may also try using "transparent gradient" -- for some elements it will override the background color: