How can I change only the footer color in my theme?

[klaasvk]

I know this question is simple but no one seems to be able to answer it propperly. Everyones tip on chaging something in them.liquid about footer collor makes it change the collor of the whole theme including the top menu bar collor. I mean to change ONLY the footer's collor background...

only that part ^^

[Moeed]

Hey @klaasvk 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[klaasvk]

Sended u a message

[Moeed]

Hey @klaasvk 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.footer__content-bottom.scroll-trigger.animate--slide-in {
    background: lightgray !important;
}
</style>

RESULT:

NOTE: You change it from light gray into any color of your choice

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[klaasvk]

Thankss That's already going in the right direction and is an other solution to the problem but. Now I mean to get these 2 bars also this same collor...

Im stating to the 2 white bars top one and bottem one. They need to stay but be the same collor. Top one doesnt have to stay per se if that makes it easier.

[Moeed]

Hey @klaasvk 

Keep the previous code and add this new code above </style> in theme.liquid file

.footer__content-top {
    padding: 0 !important;
}
.footer {
    padding-bottom: 0 !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[klaasvk]

Isn't there a way to change the collor of this padding? Because now it just gets rid of it and I prefer keeping the bottem one and also top if possible. Cus I could also have used the padding sliders to remove it that way in theme editor.

[PageFly-Oliver]

Hi @klaasvk ,

You can try this code by following these steps:

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

Step 2: Search file theme.liquid

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

<style>
.footer__content-top {
    padding: 0 !important;
}
.footer {
    padding-bottom: 0 !important;
}
.footer__content-bottom {
    background: color
}

</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[klaasvk]

Nope, that's the same it works but removes the padding and if I add padding it's white instead of the grey.

[klaasvk · Accepted solution]

Fixed it with chat GPT: 

was simpler than I thought thanks for the kickstart! 🙂