Dawn theme - Image banner - Change font color

[HoneypressDesig]

Hi,

I'm working on the Dawn theme on my shop, and I want to add a banner image with text, but without having the overlay box. When I uncheck the overlay box, the font color changes to white. The image is white as well so you can't read any of the text when it's white. How can I change the code so that the text on the banner is always black, regardless if the overlay box is present or not?

Thanks!

[Ollie]

Hey @HoneypressDesig.

Thanks for reaching out.

I appreciate the context that you have shared and let us know which theme you are using as that is super helpful. Looking into the options available with the Dawn theme, it looks like if we are using the section Image Banner we cannot hide the text using the Theme Editor. The reason for this is because the section comes with text automatically added onto the section, we can only show/hide the text box.

With that being said, if you would like to add an image to the homepage, we can remove the sub-sections to only have the image appear. I took a screenshot from my test store to show you the section I am referring to:

Remove the blocks added to the section.

To allow the image to appear without text, example:

Since the Dawn theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal themes team to make the coding changes to have the font appear as whatever colour you would like. If you are interested in using the design time to make this change, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before discussing the changes you would like to see on the homepage of the online store with a Support Advisor.

Let me know if you have any additional questions.

[cherryangel]

@Ollie How can I change the Font style of this banner only. I don't want to change the font for my entire theme just for the large font on the banner. I want to change it Abril Fatface.

Thank you, 

[Ollie]

Hey @cherryangel.

Thanks for the quick response.

In order to make changes to the font that is appearing on the banner only will require a change a coding. Since we cannot specifically change the font within the section of the online store using our Theme Editor.

With that being said, since the Shopify designed and supports the Dawn theme, we can use free design time for Shopify themes to allow our internal themes team to make the changes on your behalf. If you are wanting to use the design time to make this change, you will need to login to your store using our Contact Us page. This will allow us to verify you as the store owner before discussing the changes you would like to see on your online store.

Let me know if you have any questions.

[ArtMag]

Hey @Ollie  , we're also using Dawn and have the exact same issue. Any suggestions? We just want the text to stay black, not to become white when we uncheck "Show text box on desktop"

[Ollie]

Hey @ArtMag.

Thanks for reaching out.

I appreciate that you have included screenshots to the sections you are referring to as that is very helpful! Looking into the options available for the Dawn theme, it looks like there isn't a way to specifically change the color of the text ISSUE #109 within the images. I can definitely see this being a frustration and will provide this feedback to our developers that created the theme.

With that being said, we can have our internal themes team make the coding changes on your behalf. We will need you reach out to our support by logging into your store using our Contact Us page. Once you have successfully logged in, you will be directed to our Help Center - type in what you would like assistance with in the search bar. After you search for related articles, you should see the Get Support option appear below the search results. This will allow you to reach out to a Support Advisor about the changes you would like to see on your online store.

Let me know if you have any additional questions.

[Fifi1002]

Hey, I had the same issue and this is what I did - you need to head to the code section to make and edit then:

- go to 'section-image-banner-css'

- search (or scroll) until you see 'color foreground' there will be a couple of them so make sure you edit them all

- then edit the hex number from '255, 255, 255' to '0, 0, 0'

the save!

[TButler]

I'm having the same issue so thanks for this tip however I don't seem to have 'color foreground' in my code. Not even 'color' anywhere....

[ArtMag]

@TButler It needs to have a hyphen: color-foreground

If you can't find that, CTRL+F search: 255, 255, 255

I think you should find it at line 118 in the code:

[LF4]

Are you working in the 2.0 or 3.0 version? I'm not seeing this at all in the 3.0 version

[ArtMag]

@LF4 2.0. I didn't even know a 3.0 version had come out, whoops! I can only find 2.0 in the theme store; if you give me the link for 3.0 I'll download that and look in the code to see if I can find what you'd need to change. 

[jsleep]

Hey there, we're you able to determine what needs to change in 3.0? Thanks!

[ArtMag]

@jsleep @LF4  I don't have the code for 3.0, so I can't check it. Dawn is now at update 4.0. In 4.0, the color-foreground: 255 is definitely there in the section-image-banner.css file. If it was in 2.0 and 4.0, I'm not sure why it wouldn't be in 3.0 also.

If you have 3.0, can you go to your code and copy all of the code from section-image-banner.css asset, then paste it in a message here so I can have a look?

EDIT: I found the 3.0 code on GitHub. The code is definitely there, same as in 2.0 and 4.0, so I don't know why you guys aren't seeing it in your site unless somebody edited it for you?

1. Go to "Edit Code"

2. Search "section-image-banner.css" in the search box, or just click it under the "Assets" heading

3. Ctrl+F "255" or "color-foreground"

Nothing comes up for you? 

[AJ84]

Hi, Thanks for this. I also had the same issue and this fixed it however only for the desktop version. The mobile version still has white text and my banner image is also light. How can we edit the code and change the mobile banner text to black as well?

[ArtMag]

Did you click into the "section-image-banner.css" code window, hit Ctrl+F / Cmd+F and search for every instance of "255" or "color-foreground"?

[Emilydurrance]

Thanks for the previous advice you have been posting, very helpful. I am, however, also having the same issue with the mobile version. I have changed every instance, by searching for it with Ctrl+F, but no luck. Any suggestions?

[ArtMag]

Can you send me the link for the webpage? I can check the code causing it. If you copy your "section-image-banner.css" code into a document and attach it to a reply I can have a look.