Changing a background for an area in your website seems like it should be a basic operation, but in Squarespace reality this maneuver takes a little bit of wrangling to make happen. After considerable effort, I was fortunate enough to figure out the process and would like to share it with other “non-coding” bozos like myself so you don’t have to pull out your wig like I did.
I’m using the “Hayden” template, but this process does work with other templates (although you might have to make adjustments to the design of your template).
Crank up the Dirt Nasty and follow this “easy-to-understand” technique:
First off, view my Squarespace website at xormedium.com as an model for this process. Notice how there are blocks of text and images with different backgrounds. This process is designed to show you how to do that and is intended for novice coders/Squarespace users.
Go to your Squarespace main panel. In the “Pages” section, click on the “+” next to the “Main Navigation.” This will open up the “Create New Page” dialogue box. Add an “Index” and name it. (*Note: not all templates offer an index option. If your template does not offer an index, then this technique will not work. You can either change your template to one that has an index or search the forum for another method.)
Under the index you just created, click on “+ Add Page”. This will open up the index specific “Create New Page” dialogue box. Add a “Page” to the index. Name the page and take note of the name. We’ll come back to this.
Click on the gear icon next to the index. Very important – make sure you click on the gear icon of the index, NOT the gear icon of the page under the index. This will open up the “Configure Index” dialogue box.
At the top right of the “Configure Index” dialogue box, click on “Advanced” – this will open up the “Page Header Code Injection” area.
Copy and paste this exact code into the “Page Header Code Injection” window:
Now make one change to the code you just pasted in the “Page Header Code Injection” area. Select “pagename” and replace it with the actual name of the page you created earlier. Remember I said to take note of the name for the page? Now is the time where you enter that name into the code. (You can always find this name under the URL Slug in the Configure Page of the page you are changing.) So, if the name of the page you created is “About”, then this is what the code will look like:
*Please note: the page name in the code MUST be lowercase. These things are really specific. It won’t work if you put in caps.
Click “Save” which closes the “Configure Index” dialogue box and returns you to the “Pages” section.
Go to the “Custom CSS” section. You get there from the “Pages” section by clicking “Home”, then “Design” then “Custom CSS.”
At the bottom of the “Custom CSS” section, click on “Manage Custom Files” and then click on “Add images or fonts.” This will open up a window dialogue box to your computer. Select the image file you have previously prepared – let’s say the file name is “pinkbg.” Click “Open.” This will upload the file and close the window dialogue box.
The file you selected will appear in the “Custom CSS” section directly below the “Add images or fonts” button. You may have to scroll down to see it. Once you find file, click on it. The location information of that file will then appear in the window that was previously empty. It will look something like this:
Select the entire file location and copy it. *Note – at the bottom of the window you may see a warning that says “Error Syntax on line 1.” I get that every time but it doesn’t seem to affect anything, so ignore it.
After you have selected and copied the file location from the window, hit delete on your keyboard so the location information is cleared from the window. Don’t worry, this only clears the information from view. The image file is still retained.
Click “Save” and then “Design.” This returns you back to the “Design” section. Now click on “Home” and then “Pages.”
Click on the gear icon next to the index. This will open up the “Configure Index” dialogue box again. Click on “Advanced” in the top right. In the “Page Header Code Injection” you will see the code you previously entered and modified which looks like this:
In the code, select “http://image.jpg” and replace with the file location information you previously copied. The modified code will now look like this:
Click “Save” on “Configure Index” dialogue box, which returns you to the “Pages” section. That’s it! The background will now appear live in the indexed page once you add text or images or something. IMPORTANT: you MUST add text or images or something (like a spacer) to the pages for the background to appear.
If for some reason the background doesn’t appear, check the code carefully. If a parenthesis or bracket is missing or page name is misspelled, those things will cause the background to not appear.
To get multiple blocks of text & images with different backgrounds, simply add more pages to the index and repeat the process. Just copy the code in the “Page Header Code Injection” of the index and paste it underneath the previous code. Then change the name of the page, upload more backgrounds and replace the image location in each code section. So, for multiple blocks in an index, your code might look something like this:
If you want to have multiple sections of your website that you can navigate to, then just add more indexes with pages underneath them and repeat the process for each index and page.
This may seem a little bit complicated, but follow each step exactly and after doing this two dozen times, it will become really easy. Good luck and keep tokin’.
-Peter Rox of The Future
watch DIGILIS on my Squarespace website at: digilis.com ...Prepare for The Unknown
also feel free to explore my other conceptual business ventures websites created on Squarespace:
p.s. I’d like to give a big shot out to advisor Dave L. at Squarespace customer care for helping me to understand how all this stuff works. You da man.