Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Dawn theme footer change colors for two sections.

Solved

Dawn theme footer change colors for two sections.

MonikaK
Excursionist
33 2 5

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

 

footer Dawn.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
9079 2170 2679

This is an 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:
  • Made4uoRibe_0-1696790529758.png
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 23 (23)
MonikaK
Excursionist
33 2 5

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🫣

theycallmemakka
Shopify Partner
1737 421 439

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

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

MonikaK
Excursionist
33 2 5

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 

theycallmemakka
Shopify Partner
1737 421 439

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

makkaomakka_0-1696785713968.png

 

 

 

 

Step 2: Search for "theme.liquid"

makkaomakka_1-1696785713989.png

 

 

 

 

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

makkaomakka_3-1696785780259.png

 

 

 

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

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

MonikaK
Excursionist
33 2 5

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
Shopify Partner
9079 2170 2679

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:
  • Made4uoRibe_0-1696784154881.png
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
MonikaK
Excursionist
33 2 5

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
Shopify Partner
9079 2170 2679

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
MonikaK
Excursionist
33 2 5

Hi, 

Thank you for reply

 

I published store with Dawn theme

 

www.flowerystories.com

Made4uo-Ribe
Shopify Partner
9079 2170 2679

This is an 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:
  • Made4uoRibe_0-1696790529758.png
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
MonikaK
Excursionist
33 2 5

Oh, now I see there is share preview button. 

 

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

LittleBonBon
Tourist
13 0 0

Hi, I tried this code on my website but does not work. Can you help me with this?

https://5y5ksqjs0fr6fn5o-84715929933.shopifypreview.com

Made4uo-Ribe
Shopify Partner
9079 2170 2679

Do you mean like this? 

Made4uoRibe_0-1728662335023.png

If it is, try this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. 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-bottom.scroll-trigger.animate--slide-in {
    background: #fff;
    padding-bottom: 20px;
}

footer.footer {
    padding-bottom: 0;
}

.footer__content-bottom-wrapper, .footer__localization h2 {
    color: #000;
}

 

  • And Save.

 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
LittleBonBon
Tourist
13 0 0

Hi, thank you for reply. Pink bg should be wider but code does not working anyway:( I will try find something in google.

Made4uo-Ribe
Shopify Partner
9079 2170 2679

Do you mean whiter on the top? Where did you paste the code? cant see them on the base.css. 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
LittleBonBon
Tourist
13 0 0

I meant height should be little higher. I paste it again in base.css but it is not working. 

LittleBonBon
Tourist
13 0 0

Hi, I know why code is not working. My theme is build using Dawn theme, but is called Canyon. I check code on Dawn theme and is working. What to do to make it working on my theme?

Made4uo-Ribe
Shopify Partner
9079 2170 2679

It doesnt matter you name or not, it should be working. Can you paste it on the custom.css on the theme edits? 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
LittleBonBon
Tourist
13 0 0

Yes! it is working now! Thank you!

Made4uo-Ribe
Shopify Partner
9079 2170 2679

Welcome, you still want to adjust the height? 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
LittleBonBon
Tourist
13 0 0

Hi, no thank you. I will do it by myself. Yesterdy tried and worked so I will do it later:D But One thing what I want change is this little bottom padding in pink color. Can we remove it?

Made4uo-Ribe
Shopify Partner
9079 2170 2679

Sorry, can you provide SS which bottom padding your referring to? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
HungDang
Visitor
1 0 0

The simplest way:
Step 1: Create a new Schemes in "Theme Settings"

HungDang_0-1733197828382.png

 


Step 2: Choose colors for the elements you want to apply

HungDang_1-1733197918507.png

 

Step 3: Go back to "Footer" and click "Change" to select the newly created Scheme

HungDang_2-1733198257221.png

Done