FROM CACHE - en_header

Dawn theme - Image banner - Change font color

HoneypressDesig
Tourist
4 0 3

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!

Replies 12 (12)
Ollie
Shopify Staff
Shopify Staff
1148 163 205

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.

08-31-22522-51676

To allow the image to appear without text, example:

08-29-41522-39245

 

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.

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

cherryangel
New Member
2 0 1

@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
Shopify Staff
Shopify Staff
1148 163 205

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.

 

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

ArtMag
Excursionist
21 0 6

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"

 

ArtMag_0-1641136929143.png

 

 

Ollie
Shopify Staff
Shopify Staff
1148 163 205

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.

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Fifi1002
New Member
1 0 0

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
New Member
1 0 0

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
Excursionist
21 0 6

@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:

 

ArtMag_0-1645386479652.png

 

LF4
New Member
2 0 1

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

 

ArtMag
Excursionist
21 0 6

@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
Shopify Partner
3 0 0

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

ArtMag
Excursionist
21 0 6

@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?