Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
arising

Hudson: How can I change the background color on one page?

Question

How can I change the site background and cavas color for my information page without changing the color of my other pages?

Edited by arising
Questionify, fix title

Share this post


Link to post

12 answers to this question

Recommended Posts

  • 6

Changing the color on just one page is possible using a couple of CSS rules. Go to your one page, click the Settings button, then go to the Advanced tab. Enter the following into the Page Header Code Injection field:


<style>
 body {background-color: pink;}
 #canvas {background-color: pink;}
</style>

The first rule changes the entire page body. The content area has its own color setting though, so you must change that one separately. I’ve tried these rules on the demo site’s Read Me page, and they seem to do what you are after.

Possibly you might need to add !important after the color names, as in “…:pink !important;”. Try the above first. Add the !important if you need it.

It would be to your advantage to learn enough about CSS to personally understand what the above rules mean and how they work. That’s a shameless plug for my book, but it’s true too.

Jonathan Gennick, Author: Learn CSS for Squarespace

Share this post


Link to post
  • 1

The Fulton template is better as a separate question, and it would help if you posted a link to the specific page you want to colorize. For regular pages though, the following seems to work:


#siteWrapper {background-color: green;}

And then you can target the footers with:


#preFooter {background-color: green;}
#footer {background-color: green;]

Index pages may require a different technique.

I had time for only a fast look while eating breakfast, and hope the above helps.

Edited by JonathanGennick

Share this post


Link to post
  • 1

Hi Jonathan, are you able to help with the background color of a page under an index? i have tried:


<style>
#editions {background-color: #f3f2ed;}
</style> 

under the Index > Settings > Advanced > page header code injection. But still no luck

Edited by sanso

Share this post


Link to post
  • 0

wow I spent hours and nothing worked but this actually worked. I just bought your e-book now because you helped me. I was about to pull my hair out. I am hoping to learn from it. I got a feeling this will be a good investment. I also have a feeling I will be working with a few squarespace sites in the future. Thanks again.

Share this post


Link to post
  • 0

Hi Jonathan – this is almost exactly what I need also. I'm working with the OM template and this changes the Site Background – how do I change the Canvas Background? I will have a look at your eBook also! Many thanks, Alex

Edited by Pocamuffin

Share this post


Link to post
  • 0

Every template requires different CSS rules. Some problems are easier to solve in one template than in another. Please post a link to your site, and I will try and take a look.

Share this post


Link to post
  • 0

Maybe something like:


body {background-color: pink;}
div#canvas {background-color: pink;}

Put style tags around them and put them into the Page Header Code Injection field for the page you want to affect.

Share this post


Link to post
  • 0

THANK YOU! I was trying this out and adding the sitewrapper did the trick (colour underneath the gallery block.)

You're a true gentleman!

Many thanks,Matt


I'm a filmmaker. Ta da.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...