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

Myellagroup
Excursionist
30 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 6 (6)
Zworthkey
Shopify Partner
5581 641 1503

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.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
ArtMag
Excursionist
20 0 6

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

allanbrunosm
New Member
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
20 0 6

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