How to add a Full Width Footer to Ishimoto Template
This tutorial will take you step by step through adding a full width footer to the Ishimoto template. This may come in handy if you need custom social icons (eg change the facebook link to a fan page instead of a personal account). However, you can actually add any other type of block as well. You can view the example website for the next two weeks until the trial expires- http://h-hitt.squarespace.com/new-gallery/ .
First, we will be doing all the following steps from the frontend of your site. To get out of the backend site management, use the esc key or click the Squarespace eye icon.
Style Editor Menu
Choose the Style editor / Paintbrush Option
Open Custom CSS Window
From the bottom of the style editor popout, open up the Custom CSS window by clicking, well… CSS!
Copy and Paste the following custom CSS and don’t forget to Save!
Your Footer is now ready to add content. But first, choose the Content Editor
Add Blocks to Footer
You can now add a Content, Social, or Structure Block. It’s a bit hard to see in this screenshot, but you should see an addition/ plus sign icon in the bottom right corner ot the footer. ( try hovering over the area if you don’t see it). Click this icon to add your blocks.
Custom Social Icons Example
For the purpose of sticking with the original style of the Ishimoto template and just needing to use alternative social links, you will need to include two Code Blocks in side by side columns.
Code Block HTML – Social Links
Customize the following code if you want to use the default icons, but need to customize where they link. Currently, redirecting the Facebook link is the primary reason for most people needing this feature. My example uses Facebook, Twitter, and LinkedIn so you will need to edit these lines. However, the initial div needs to be included.
Code Block HTML – Align Right
If you would like to right align a text for the other column, the following code example should get you started.
- Full Code Example: http://cl.ly/text/0D2C1J1x382c
- Squarespace 6 to Facebook Fan Page: http://www.squarespaceplugins.com/how-to-direct-squarespace-6-social-link-facebook-fan-page/
- Ishimoto Template: http://www.squarespaceplugins.com/go/ishimoto-demo/
- Ishimoto Readme Page:http://www.squarespaceplugins.com/go/ishimoto-readme/