Dawn Theme: Footer font color change to white

Topic summary

A user is attempting to change footer font colors to white on their Dawn-themed Shopify site but encountering issues with incomplete styling—specifically the email subscribe box and mission text remain unchanged.

Problem Details:

  • Initial CSS code provided by the user appears malformed (reversed/garbled text)
  • Target elements include newsletter subscription field, placeholder text, and footer headings

Proposed Solutions:
Three community members offered CSS fixes with similar approaches:

  1. KetanKumar’s solution: Targets footer block content, newsletter labels, field inputs, and removes box-shadow/display properties on newsletter elements

  2. Artzen_tech’s approach: Applies white color to entire footer class, adds white border to fields, and styles field labels

  3. PageFly-Victor’s method: Uses wildcard selector for all footer elements and adds white border-color to newsletter field wrapper

Implementation: All solutions require editing base.css file via Online Store → Theme → Edit code, pasting CSS at the bottom.

The discussion remains open with no confirmation of which solution resolved the issue.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.

Hi,

I tried using the following code below to change the font color in my footer to white on my website (Dawn Theme) https://womenofcourageplatform.org/ however not all font is changed to white. How do I get the subscribe box with email and the mission white. Please assist.

Code:

.copyright__content a, .footer-block__details-content .list-menu__item–link {color: #fff;}
.footer-block__heading{color: #fff;}
.newsletter-form__field-wrapper .field__input::placeholder {color: #fff;}

.list-social__link{color: #fff;}
.footer-block__details-content .list-menu__item–active {color: #fff;}
.copyright__content, .copyright__content a {color: #fff;}

1 Like

@WOC

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.footer-block__details-content>p, .footer-block__details-content>li, .footer-block--newsletter .field__label, .footer-block--newsletter .newsletter-form__button {
    color: #fff !important;
}
.footer-block--newsletter ::before, .footer-block--newsletter .field::after {
    display: none !important;
}
.footer-block--newsletter .field__input:focus {
    box-shadow: none !important;
}

Hello @WOC

Its Artzen Technologies! We will be happy to help you today.

  1. Go to online store > theme > Edit code > Assets > base.css (file) and paste the following code:
.footer{
Color:#fff;
}
.field {
border : 1px solid #fff;
}
.field .field__label{
Color:#fff;
}
#NewsletterForm--footer .footer-block--newsletter ::before, .footer-block--newsletter .field::after {
    display: none !important;
}

Let me know if need further assistance

Regards,

Artzen Technologies

Hi @WOC,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css,

Step 3: Paste the below code at bottom of the file → Save

footer *{
color:white !important
}
.newsletter-form__field-wrapper .field:after{border-color:white !important}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly