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"

[jds20]

Hey! It works perfect for the text but not for the heading, it stays white... Any solution? Thank's in advance

[ArtMag]

Can you send a screenshot of your edited code?

[jds20]

[ArtMag]

Can you find anything in the code where the text color = 0, 0, 0? If you share your website and/or the version of Dawn you are using I can have a look.

[jds20]

No, I definietly didn't get the same code as you shared prev with the 0,0,0 etc.. 

https://shopiquet.myshopify.com/

pw: layngo 

I'm using Dawn Theme v7.0 

ty

[ArtMag]

It is coming from the "banner__box" code in your section-image-banner.css.

If you go to section-image-banner.css and search "color-foreground" or "255", and look for the code that starts with "@media screen", do you see something like this? 

Use Ctrl+F / Cmd+F to search. The search box should appear at the bottom of the code. 

[jds20]

I found the code and changed from 255 to 0 but nothing changed

[ArtMag]

It is still showing as 255 in your code when I inspect the front end:

Can you double-check that you have found "color-foreground" everywhere in the section-image-banner.css code? It appears twice in my file (row 194 and row 321 for me - yours might be in different rows). Here is a screen recording:

 

 

[jds20]

Thank's a lot man, It looks perfect now. You also teach me a new way to find code with the cmd+F! 

Btw can I abuse just a bit of your time ? I'm having an issue with my header logo, I've added a part of code to add hamburger menu and center logo but when It's centered in my home page it is lefted in my product page.. Any idea ? Thank's in advance

[ArtMag]

It appears left on your homepage and centred on your product page when I look:

I think you would definitely get answers on how to change it, but should start a new community thread so that people just looking to resolve the text colour issue can find that info in this thread.

[jds20]

I think my theme is just broke, when I preview with mobile view it's black lmao....

[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