Change footer color only on specific page

Site URL: https://maxtschudi.eu

Hi dear community,

After roaming this and other parts of the net, trying unsuccessfully myself, I would love to call out for some support, on two main issues:

1a) make the footer seamlessly the same color as the background (without the cream colored cage around the footer)

I'm using: 

<style>
  footer#footer-sections .content-wrapper {
    background: #342C27 !important;
}
</style>

1.b) Btw. the sharp eye will notice that #342C27 is not exactly the same as the color shown in the font editor in HSL (23°, 14%, 18%). How can I retrieve the color from the squarespace font editor in HEX instead to match it properly?

1.c) to then, only change the color on the "past" and "future" project page. not the subsections. At this moment, the code above subsequently changes all projects listed in the respective portfolios. However, those portfolios stick with the page's "normal" light blueish color.

https://maxtschudi.eu/futureprojects

https://maxtschudi.eu/pastprojects

Is it possible, to specify the ccs to only color the footer on the past and future section?

2. If all this is possible, it would be amazing to then change the footer text color to white, giving a good contrast.

All texts within the footer are links and I haven't managed to change just the color for "past" & "future" section where the background should be this dark color. rest should be untouched in bordeaux red as they remain with their light blueing backgrounds

I hope I've been clear enough, 

A thousand thanks and all the best!!

Max

Use this color

<style>
  footer#footer-sections .content-wrapper {
    background: #352d28 !important;
}
</style>

I use Eye Dropper on Chrome to check color.

https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en

With footer text, use this

<style>
  footer.sections * {
    color: white;
}
</style>

With portfolio list page, use this

<style>
  .view-list footer#footer-sections .content-wrapper {
    background: #352d28 !important;
}
</style>

Cheers, Tuanphan, the specific color coding and tipps works like a charm.

Unfortunately, there is now a white frame around the footer.

Can that be removed?

BTW gotta say it, you are powerful force on this forum, and surely beyond squarespace as well! I've had many enlightening moments reading through your answers 🙂  Thank you so much !

On 6/22/2021 at 6:42 PM, mtschudi said:

Cheers, Tuanphan, the specific color coding and tipps works like a charm.

 

Unfortunately, there is now a white frame around the footer.

Can that be removed?

 

BTW gotta say it, you are powerful force on this forum, and surely beyond squarespace as well! I've had many enlightening moments reading through your answers 🙂  Thank you so much !

Try this code. If it doesn't work, can you take a screenshot?

<style>
 footer#footer-sections .content-wrapper {
    background: #352d28 !important;
    max-width: 100%;
}
</style>

5 hours ago, tuanphan said:

Try this code. If it doesn't work, can you take a screenshot?

<style>
 footer#footer-sections .content-wrapper {
    background: #352d28 !important;
    max-width: 100%;
}
</style>

 

Thank you,

unfortunately, it doesn't work, the white frame persists.

See screenshots attached. On the mobile view the frame is even shown in bold.

Any way this can be solved? 

22 minutes ago, mtschudi said:

Thank you,

unfortunately, it doesn't work, the white frame persists.

See screenshots attached. On the mobile view the frame is even shown in bold.

Any way this can be solved? 

Can you share link to page in screenshot?

1 hour ago, tuanphan said:

Can you share link to page in screenshot?

Voila,

https://maxtschudi.eu/futureprojects

Don't remove any code. Add this to Design > Custom CSS

body#collection-60d0b2e6aa2025164fbc1c3a article .section-background {
    background-color: #352d28 !important;
}

unfortunately, doesn't solve it either.

Maybe it's helpful If i share the custom codes I already use regarding header/ footer:

.header-nav-item a:hover {
    color: #720303 !important;
}
footer#footer-sections a {
    background-image: none !important;
}
footer a {
text-decoration: none !important;
}

plus the one you just added. cheers

On 6/28/2021 at 8:23 PM, mtschudi said:

unfortunately, doesn't solve it either.

Maybe it's helpful If i share the custom codes I already use regarding header/ footer:

 

.header-nav-item a:hover {
    color: #720303 !important;
}
footer#footer-sections a {
    background-image: none !important;
}
footer a {
text-decoration: none !important;
}

plus the one you just added. cheers

 

Can you add & keep the code? Wee can check easier