Dawn theme - image with text, multirow button color change

[Tedez]

Hi
I searched the universe for an answer but couldn't find one, so here I am looking for help.
- how to change the background color of the button in that section (image with text. multirow), as currently the background is set up the same as the whole section. And this is really what Im after. If the section background is black, I want button background to be i.e. blue. Not the border, not the text, the button background color.
Will that code change do that?
- if so, which CSS (at this version of Dawn) to edit and where? Or maybe a new code is required?
It would be great if we could change the size of the button too.

there is a sort of similar post from 2021 but that was more about what we can customize in the panel ourselves now, so not that helpful.

https://community.shopify.com/c/online-store-and-theme/change-button-color-in-quot-image-with-text-q...

Thanks

 

Thanks

[SBD_]

Hey @Tedez 

In the Custom CSS section, you can set the button's background colour like this:

a.button {
  background-color: blue;
}

Here's a screenshot - let me know if I'm not understanding your question.

[Tedez]

Hey SBD

Thank you very much for that.
It works indeed with "image with text" unfortunately it doesn't work with "featured product"  despite the Custom CSS section being there. 

And most importantly this is not the solution for the multirow, as multirow doesn't have the CCS section within the panel - hence the question:
- would I be able to change it within the code? If so, which CSS I should go to and where to change it?

Many thanks

[SBD_]

Hey @Tedez 

The button in the feature product section is a different element with a different class name, you can target it with custom CSS like so:

.product-form__submit {
  background: blue;
}

Another approach (and for multiline) you can to modify the component's CSS directly. For example, to change the button background colour of the 'Image with text' section, edit `assets/component-image-with-text.css` and add additional styles to the file:

.image-with-text a.button--primary {
  background-color: blue;
}

[Sheesh_b · Accepted solution]

Hi @Tedez 

I'm adding this solution for Dawn 12.0.0 version and I'm not sure if this will work for previous versions.

Copy below code from Github file and replace the code.

https://github.com/impulsebyte/Dawn-12.0.0-Multirow-Custom-Button-Color/blob/470e45c8e0ded4aec335389...

It'll add two more options in multirow section customization where you can change the color and that'll be different to section.

Each color can be set separately.

Thanks

Sheesh B

[Tedez]

Thanks Sheesh!

It worked indeed!

I was wondering if you (Shopify) consider adding that option into other sections like Featured Product, Image with Text and so on?

Thank you once again.

[Sheesh_b]

Hi @Tedez 

Glad you found it useful.

Yes, I can add the same color options in all the places where you think you need.

Thanks

Sheesh B