Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

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

Myellagroup
Excursionist
35 0 5

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!

Replies 17 (17)

Zworthkey
Shopify Partner
5581 642 1583

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
Excursionist
36 0 12

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"

 

image banner.png

jds20
Excursionist
14 0 2

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

ArtMag
Excursionist
36 0 12

Can you send a screenshot of your edited code?

jds20
Excursionist
14 0 2

111e.png

ArtMag
Excursionist
36 0 12

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
Excursionist
14 0 2

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
Excursionist
36 0 12

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

 

ArtMag_0-1665062677806.png

 

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? 

 

ArtMag_1-1665062952958.png

 

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

 

 

jds20
Excursionist
14 0 2

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

ArtMag
Excursionist
36 0 12

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

 

ArtMag_0-1665064330790.png

 

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:

 

screen-capture (1) (1).gif

 

jds20
Excursionist
14 0 2

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
Excursionist
36 0 12

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

 

ArtMag_0-1665066146192.png

 

ArtMag_1-1665066157047.png

 

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
Excursionist
14 0 2

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

allanbrunosm
Visitor
1 0 0

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
Tourist
3 0 2

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
Excursionist
36 0 12

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
Tourist
3 0 2

That worked!

 

Thanks