arising Posted September 11, 2014 Share Posted September 11, 2014 (edited) How can I change the site background and cavas color for my information page without changing the color of my other pages? Edited April 16, 2015 by arising Questionify, fix title Rosin355 1 Link to comment
Solution jgennick Posted September 11, 2014 Solution Share Posted September 11, 2014 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 Link to comment
DougNapa Posted January 19, 2015 Share Posted January 19, 2015 This worked great with the Montauk template as well. Link to comment
QBerry Posted February 3, 2015 Share Posted February 3, 2015 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. Link to comment
Pocamuffin Posted April 16, 2015 Share Posted April 16, 2015 (edited) 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 April 16, 2015 by Pocamuffin Link to comment
jgennick Posted April 16, 2015 Share Posted April 16, 2015 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. Link to comment
jgennick Posted April 17, 2015 Share Posted April 17, 2015 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. Link to comment
jolt_trevor Posted May 7, 2015 Share Posted May 7, 2015 I'm using the Fulton template and that didn't seem to change the page background for me even after adding "!important;" . :( Link to comment
jgennick Posted May 11, 2015 Share Posted May 11, 2015 (edited) 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 May 11, 2015 by JonathanGennick Link to comment
apocalynds Posted August 21, 2016 Share Posted August 21, 2016 Just wanted to say that this works like a charm with the Momentum template. Spent a couple hours and nothing else did (CSS noob here). Thanks a bunch! Link to comment
ThatMattyH Posted December 1, 2016 Share Posted December 1, 2016 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. Link to comment
Guest Posted December 23, 2016 Share Posted December 23, 2016 (edited) 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 December 23, 2016 by Guest Link to comment
rileyravis Posted February 28, 2017 Share Posted February 28, 2017 Anyone know how can you do this on the York template? :) Link to comment
AdeleM Posted June 14, 2021 Share Posted June 14, 2021 Hello, I have tried the first rule and it worked for my individual product pages well - thank you. I am trying to do the same for my entire product catalogue page in just one shop only (rather than both of my shops). So rather than white in the background ( as per image attached), I want to use #FAE8D7. I was also hoping to change the background from grey to #FAE8D7 in the individual product page (in the second image) Can anyone help please? I am using Version 7.0– Supply family (Supply template). thanks for any help you can offer. Adele Link to comment
tuanphan Posted June 14, 2021 Share Posted June 14, 2021 5 hours ago, AdeleM said: Hello, I have tried the first rule and it worked for my individual product pages well - thank you. I am trying to do the same for my entire product catalogue page in just one shop only (rather than both of my shops). So rather than white in the background ( as per image attached), I want to use #FAE8D7. I was also hoping to change the background from grey to #FAE8D7 in the individual product page (in the second image) Can anyone help please? I am using Version 7.0– Supply family (Supply template). thanks for any help you can offer. Adele Can you share link to your site? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AdeleM Posted June 17, 2021 Share Posted June 17, 2021 Thanks for your reply - I really appreciate it. https://www.adelemacerceramics.com/wholesale-order its password protected as it is for my wholesale orderers only. password is fortheloveofpots thanks for your help 🙂 Link to comment
tuanphan Posted June 17, 2021 Share Posted June 17, 2021 9 hours ago, AdeleM said: Thanks for your reply - I really appreciate it. https://www.adelemacerceramics.com/wholesale-order its password protected as it is for my wholesale orderers only. password is fortheloveofpots thanks for your help 🙂 Add to Design > Custom CSS /* Wholesale orders background */ body#collection-609bb406dcee8d48c74585d0 main#main { background: Green !important; } AdeleM 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AdeleM Posted June 20, 2021 Share Posted June 20, 2021 OMG! thank you - it worked a treat... what about this page... the grey that sits behind the image and text? https://www.adelemacerceramics.com/wholesale-order/winter-speckletableware-drntt Link to comment
AdeleM Posted June 20, 2021 Share Posted June 20, 2021 On 6/17/2021 at 7:35 PM, tuanphan said: Add to Design > Custom CSS /* Wholesale orders background */ body#collection-609bb406dcee8d48c74585d0 main#main { background: Green !important; } Thank you so much for your help... I posted about another section below as well please... Link to comment
tuanphan Posted June 21, 2021 Share Posted June 21, 2021 20 hours ago, AdeleM said: OMG! thank you - it worked a treat... what about this page... the grey that sits behind the image and text? https://www.adelemacerceramics.com/wholesale-order/winter-speckletableware-drntt Use this code body#item-609bb6f7e0872d5d0407e4c0 main#main { background: green; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AdeleM Posted June 30, 2021 Share Posted June 30, 2021 On 6/21/2021 at 5:09 PM, tuanphan said: Use this code body#item-609bb6f7e0872d5d0407e4c0 main#main { background: green; } Hmm, that didn't work Link to comment
AdeleM Posted July 2, 2021 Share Posted July 2, 2021 thanks again for your reply but I count get that code to work...hmm... Link to comment
tuanphan Posted July 3, 2021 Share Posted July 3, 2021 Just tested & it works here. Can you add & keep the code? We can check it again easier? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dovely Posted October 27, 2021 Share Posted October 27, 2021 Hi @tuanphan we are running into a similar issue with our site where we are trying to add a color to the top part of the landing page with the logo and navigation. The link is below as well as the password. Any advice you have would be greatly appreciated. Thank you! https://carillon-vibraphone-7w3k.squarespace.com/ Password: 3m!ily2021 Link to comment
tuanphan Posted October 29, 2021 Share Posted October 29, 2021 On 10/28/2021 at 12:05 AM, dovely said: Hi @tuanphan we are running into a similar issue with our site where we are trying to add a color to the top part of the landing page with the logo and navigation. The link is below as well as the password. Any advice you have would be greatly appreciated. Thank you! https://carillon-vibraphone-7w3k.squarespace.com/ Password: 3m!ily2021 You mean add background color for profile, contact...bar? Something like this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment