Jump to content

Change footer color only on specific page

Recommended Posts

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

 

Link to comment
  • Replies 9
  • Views 2.1k
  • Created
  • Last Reply

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 !

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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? 

Screenshot 2021-06-24 10.23.26.png

Screenshot_cell.png

Link to comment
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? 

Screenshot 2021-06-24 10.23.26.png

Screenshot_cell.png

Can you share link to page in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.