Dawn theme footer change colors for two sections.

[MonikaK]

Hi everyone!

I have still problem with Dawn footer. I have now different theme installed but want customize Dawn theme because is lighter than theme what I use now. I want change footer colors like here on the picture. Footer menu with color and section with payment icons-white. Anyone can help me?

Br, Monika

[MonikaK]

Thank you for your answer, but I don’t see any option to change footer in Dawn and have two separately colors. When I change footer color then all footer section change color. I am sorry I didn’t get it but really I don’t see options to do that🫣

[makkaomakka]

This needs to be done via custom CSS. Can you provide following this to me so that i can write you the custom CSS

1. URL to your store

2. Color code of two footers

[MonikaK]

Hi, thank you for your answer. 

www.flowerystories.com

and color code for first footer with menu is #ef3167 and footer with payment icons and copyright #ffff 

[makkaomakka]

Hi @MonikaK ,

Please add below codes on the theme.liquid file:

<style>
#shopify-section-footer > footer > div:nth-child(2){
    background: #ef3167 !important;
    max-width: 100%!important;
}

#shopify-section-footer > footer > div:nth-child(3) {
    background: white!important;
    max-width: 100%!important;
}

.site-footer__content {
    max-width: 1200px!important;
    margin: 0px auto!important;
    padding-top: 30px!important;
    padding-left: 55px!important;
    padding-right: 55px!important;
}

.grid.grid--no-gutters.small--text-center.grid--footer-float-right {
    max-width: 1200px!important;
    margin: 0px auto!important;
    padding-bottom: 30px!important;
    color: #000!important;
    padding-left: 55px!important;
    padding-right: 55px!important;
    padding-top: 15px!important;
}

footer.site-footer {
    padding-bottom: 0px!important;
}

small.site-footer__copyright-content, .site-footer__copyright-content a {
    color: #000!important;
}

@media only screen and (max-width: 600px) {
    .site-footer__content, .grid.grid--no-gutters.small--text-center.grid--footer-float-right{
        padding-left: 22px!important;
        padding-right: 22px!important;
    }

}
</style>

Steps to add CSS:

Step 1: Go to Online Store > Themes > Active theme > Edit

Step 2: Search for "theme.liquid"

Step 3: Add the CSS above "</body>"

If you require further help to add the code to your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Mangit

[MonikaK]

Hi,

Thank you for answer but code does not working. I want edit Dawn theme that is not published yet. Can be this issue?

[Made4uo-Ribe]

Hi @MonikaK

Try this one.

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

#shopify-section-footer > footer > div:nth-child(2){
    background: #ef3167 !important;
    padding: 4% 10% 1% 10%;
    max-width: 100%;
}

#shopify-section-footer > footer > div:nth-child(3) {
    background: white;
    max-width: 100%;
    padding: 1% 10%;
}

• And Save. 
• Result:
• 

[MonikaK]

Hi, 

Thank you for answer but code does not working. I want change Dawn theme that is not published. I tried this code and footer is still all white.

[Made4uo-Ribe]

The store that you share is not the Dawn theme? If its not the dawn that you currently working on, the code wont work. Please share the preview instead. Thanks!

[MonikaK]

Hi, 

Thank you for reply

I published store with Dawn theme

www.flowerystories.com

[Made4uo-Ribe · Accepted solution]

You can just share the preview it will do. 

Try this one then. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.footer__content-top.page-width {
    background: #ef3167;
    max-width: 100%;
    padding-top: 36px;
}
footer.footer.color-background-1.gradient.section-sections--19797895905628__footer-padding {
    padding-top: 0px;
}

• And Save. 
• Result:
• 

[MonikaK]

Oh, now I see there is share preview button. 

But your solution is working! Thank you so, so much!