How to make my footer a different color scheme on one specific page?

[Nxte]

I need my footer on just the contact page a different color scheme then the rest of them. Not sure how to do it.

[devcoders]

Hi @Nxte

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[Nxte]

it wont let me post a link

[TheScriptFlow_1]

Hey @Nxte,

Can you try with pasting the original link here. Like if you paste the wrong site link then this issue happens.

[TheScriptFlow_1]

Luckily I find your store url with the help of your profile logo.

If you are looking for way to add the different background color for the footer then you need to target it via the if condition in Shopify.

Here are the steps below you can ensure that you can target it for the specific page.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css paste the following code that shared below.

{% if page.handle == 'contact' %}
footer.footer {
 background: red;
}
{% endif %}

With the help of above css you will see that the footer should have red background for the contact page only.

Now in order to move further just tell me which background color you want for the Contact page only along with the color of menus. Or if you could share the color codes then this would be very easy for me to move further.

Thanks

[Nxte]

Good I’m glad you could find it. For some reason it still won’t let me paste the link.

The color code I want to use is #090C1B. Do I just replace the “red” with the color code?

[TheScriptFlow_1]

Yes exactly,

If you want the background color of the footer for the contact page should be #090C1B then feel free to replace red with this one color code: #090C1B

Or you can copy the code provided below.

{% if page.handle == 'contact' %}
footer.footer {
 background: #090C1B;
}
{% endif %}

[Nxte]

Done it worked thank you!

Only thing is how would I change the color for the text to white or #FFFFFF as the gray doesn’t contrast very well

[TheScriptFlow_1]

In order to make the gray color pure white for the contact page only then you need to paste this code.

{% if page.handle == 'contact' %}
h2.footer-block__heading.inline-richtext em {  
  color: white;
}
ul.footer-block__details-content.list-unstyled li a {
  color: white;
}
a.link.list-social__link .svg-wrapper svg {
  color: white;
}
{% endif %}

This will make the gray color to white and also change the color of icons too.

[Nxte]

Perfect thank you so much!

[Nxte]

I don’t believe there is a way to change the very bottom of that to white is that right? Where the Privacy policy is and the copyright

[TheScriptFlow_1]

My bad. I forget to provide you the code that make the copyrighted content white.

Here is the code below that I shared with you.

{% if page.handle == 'contact' %}
small.copyright__content {
    color: white;
}
ul.policies.list-unstyled li small.copyright__content a {
color: white;
}
{% endif %}

[Nxte]

Looks amazing thank you again!

[Nxte]

I just realized too. The colors changed for every page. On my about page it was supposed to be white and now its navy.

[TheScriptFlow_1]

@TheScriptFlow_1

{% if page.handle == 'contact' %}
footer.footer {
 background: #090C1B;
}
{% endif %}

Remove the whole code that you add from the base.css file and paste the following code in theme.liquid file before the closing tag of body.

<style>
{% if page.handle == 'contact' %}
footer.footer {
 background: #090C1B;
}
h2.footer-block__heading.inline-richtext em {  
  color: white;
}
ul.footer-block__details-content.list-unstyled li a {
  color: white;
}
a.link.list-social__link .svg-wrapper svg {
  color: white;
}
small.copyright__content {
    color: white;
}
ul.policies.list-unstyled li small.copyright__content a {
color: white;
}
{% endif %}
</style>

[Nxte]

How would I change the text colors back to #2A2A2A for the rest of the website and not the contact page?

[Nxte]

Figured it out, thank you for your help!

[TheScriptFlow_1]

Good to Know. You may missing the if condition in the theme.liquid file.

[PaulNewton]

Always backup themes before modifying theme files

For CSS style changes ALWAYS encourage use of a custom-css setting FIRST before risking breaking a theme.
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

For CSS that needs liquid based logic use a custom-liquid section , or custom-liquid block, instead.

Then as last resort modify file code directly after a backup is made.

[AnneLuo]

Hi, @Nxte

You can add your custom CSS to change the foot color of other pages

1. Go to Online Store → Themes → Customize

2. In the Theme Editor, open Theme Settings → Custom CSS (in Dawn)
   or click Edit code and open base.css / theme.css

3. Scroll to the bottom and paste this:

/\* Change footer color only on Contact page */
.page-contact footer {
background-color:* #f5f5f5*; /* light gray background */
color:* #000*;               /* text color \*/
}

/\* Optional: adjust footer links \*/
.page-contact footer a {
color: #000;
}

.page-contact footer a:hover {
color: #ff6b6b;
}

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.