Dawn theme - Image banner - Changing text font colour and weight

[Myellagroup]

Hi everyone,

Wondering how to code change the font colour and weight (bold/italic) of the texts on the Image banner section in the Dawn theme?

Preview link to my store: 

https://oyqdxz872xvla8xj-15517073.shopifypreview.com

Thanks in advance!

[Zworthkey]

Hii, @Myellagroup 
Paste this code on top of the section-image-banner-text.css  file.

h2.banner__heading.h0, .banner-text {
    color: red !important;
    font-weight: bolder !important;
    width: 103% !important;
}
.banner__text {
    color: red !important;
    font-weight: bolder !important;
    font-size: 18px !important;
}

Thank You.

[ArtMag]

Hey @Zworthkey , we're also using Dawn but this didn't work. Any suggestions? We just want the text to stay black, not to become white when we uncheck "Show text box on desktop"

[allanbrunosm]

Hi - I just went through this and here's how I solved it:

Go to Online Store --> Themes --> Action --> Edit Code

Open section-image-banner.css

Go to line 317 or search for this:

@media screen and (min-width: 750px) {
  .banner--desktop-transparent .banner__box {
    background-color: transparent;
    --color-foreground: 255, 255, 255;
    --color-button: 255, 255, 255;
    --color-button-text: 0, 0, 0;
    max-width: 89rem;
    padding: 0;
  }

The --color-foreground is your text color, the --color-button is the background color of your action button, and the --color-button-text is the color of the text of your action button.

These three numbers after each specification explained above are the RGB code of the color. For instance, (255,255,255) is white and (0,0,0) is black. Change it to the color you want and voila!

PS: I tested changing it to color names (black instead of 0,0,0) and it does not work, so find you will have to find your RGB color code.

I hope it helps!

Best,

Allan

[jy85]

Hi,

The code worked for desktop, but on mobile its still showing it in white. Could you please recommend a code for this?

Thanks

[ArtMag]

Did you change the code under the line saying: @media screen and (min-width: 750px) ? That "min-width" means the screen size needs to be minimum 750px wide (so bigger than a phone screen). If you want it for mobile too, try changing the 255, 255, 255 in the mobile banner code, which for me is at row 118:

.banner:not(.banner--mobile-bottom) .banner__box {
background-color: transparent;
--color-foreground: 255, 255, 255;
--color-button: 255, 255, 255;
--color-button-text: 0, 0, 0;

[jy85]

That worked!

Thanks