Change color of specific buttons - Dawn 2.0

[solmadestudio]

Hi, I’m looking to change the color of specific buttons in my development store. Here is the site: https://the-water-spirit-inspired-craft.myshopify.com/ password is fern.

Top hero banner: need to do two things: 1) remove border stroke. I did figure out how to change the color. and 2) widen the text box of the header so the header displays on one line.

This is more or less what I want the banner to look like. Would like to position the text and buttons more to the left as well…

For the next section, I also want to widen the text box of the header so it displays on one line and to change the button color to #956e41. I have it set to #956e41 in my liquid, but there is some other code for these banners that causes the buttons on them to have different tints or opacities of the colors I’m specifying, and I can’t figure out what that code is.

Same thing for this button. Can’t figure out how to change the color to a solid color/full tint, white text and no stroke. I want it to be #956e41 like the one above.

Thank you so much!!

[brandography]

Hello! You can adjust button settings by going to the Theme Settings. There are tabs for Colors to select your button color and Button to select outline styles.

[brandography]

You could also try adding something like this to your .css file to left align the text in your top section:

.banner--desktop-transparent .banner__box {
    text-align: left;
}

[solmadestudio]

Thank you for your suggestion! This did not change anything, though. The text was already left aligned so I’m not sure if that’s the right code? It’s more about the positioning on the page?

[solmadestudio]

Thank you for your reply. I have done this, but this theme seems to have coding that colorizes buttons differently depending on the section. So the global color settings are not always followed.

I.e. if I insert an “image with text” section and choose a blue background for the text (like shown in my screen shot above), it makes the button light blue. If I make that background copper, it makes the button light copper. I did change my button on the blue background to copper, but it’s a weird darker version of my copper color and the text color looks blue instead of white.

[Kellydriss]

Hi! You can change button settings by going to the Theme Settings. There are tabs for Colors to choose your button tone and Button to choose frame styles.

[jessyhamel]

I’m having the same problem but with the Craft theme. Did you end up figuring this out? The button colors are not even listed in my theme settings…just lighter versions of my colors. Thanks for any help!

[solmadestudio]

Hi! So yes, I did… it’s overall very complicated but I’ll try to keep it simple I found that some of the button colors change depending on whether or not they are actually linked. So first I set my button colors in Settings (as everyone keeps suggesting), but in these “image with text” sections, specifically, the color was not applying. I continued working on the site and eventually linked these buttons to the pages they needed to go to, and when I did that the colors changed from light blue to white. This is the weird part– technically “white” is one of the button colors I specced in my settings for accent backgrounds (i.e. this blue), but this theme applies that button color to the text as well. So if I chose “copper” as the button color for this section, it made the text copper too. So after linking my buttons, the only way to get a copper button with white text was to target that button with css. I entered this css in my liquid to target the specific button in this section and it worked:

#shopify-section-template–15967601950958__16499714958448a327 .button {
background-color: #956e41;
color: #ffffff !important;
}

[jessyhamel]

Hey! Oh my word! Thank you so much!!! I thought I was going crazy and everyone kept tell me to go to the color settings! Thanks a million!

[adrip]

where did you insert that code? been trying to do the same to a button in one specific section but with no luck