Hello!
I want to add a black border colour on my theme. However, I only want it to apply if the button has a white background. I found a code for this but it applies it to all the buttons. This does not work as it clashes with my accent colour.
Hello @nouslesfilles
Any solution will vary wildly without seeing the code your using or being able to inspect the theme.
You just need to use, some sort of attribute in the buttons html that that indicates it is has a white background. Or customize the theme make that indication by conditionally match whatever setting is being used for the button colors.
Example:
{% if theme.setting.button_color = "ffffff" %}data-style-background="white"{% endif %}
In tandem with matching CSS
button([data-style-background="white"]) {
border: 1px solid black;
}
Alternatively if inversing the problem for modern browsers using the :not pseudo selector
button:not([data-style-background="black"]) {
border: 1px solid black;
}
Hi there, @nouslesfilles !
Welcome to the Community! Definitely a great place to gather some input regarding anything about the platform! As you can already see, we have great contributors like @PaulNewton who are willing to provide help.
Given that you are using the Dawn theme, I just wanted to add this help document with regards to our theme support. Since you are using a Shopify-made theme, you may qualify for 60 minutes of design time from our Themes team. The document linked above will provide you with all the necessary information about this benefit.
Definitely let us know how this works out for you.
Hi @nouslesfilles ,
Which button do you want to add border to? Please send me the site link, I will guide you to change it.
Hello,
I tried putting the first two codes in the theme.liquid and the base.css. It did not work. Is there anything else I should do?
Hi @nouslesfilles ,
Which button do you want to add border to? Please send me the site link, I will guide you to change it.
Hi @nouslesfilles ,
Go to Assets > base.css and paste this at the bottom of the file:
#Banner-template--15900446589128__e4a1ee5c-a5ff-4a8e-8f5d-439f12c951bc .banner__buttons .button {
border: 1px solid #000;
}
Hope it helps!