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!
Custom CSS
Copy and Paste the following custom CSS and don’t forget to Save!
width: 100%;
}
Content Editor
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.
Additional References:
- 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/
This was so helpful! Thanks for posting this how-to. Also, if I wanted to center the social media icons in the block they occupy, do you know how I might do that? I changed the float to “center” in the CSS code you provided, but that didn’t work. =)
Thanks again!
Your welcome Aldan- A combination of space blocks and the following custom css should work…
social-links {text-align: left;
}
It’s live on the example site for now.
Thanks very much!
awesome! Just what I needed.
Thank you this is wonderful! I was wondering if you could help me or at least guide me with another question I have with the Ishimoto template. I am trying to add a text block to the body, under the gallery, just to describe what the gallery is, etc. Is this possible? I’ve been searching for hours and can’t seem to find an answer. Thanks again!
Laurel- I emailed you directly. Let me know if you need further help
Hey Holly,
Thanks for your help,
I’m just asking, do you think it’s possible to add more than just picture with this template ?
Like text bloc and embed video ? I really appreciate this system template, but if it’s only limited to pictures, I feel trapped
Cheers !
This is probably too late for your needs, but the Ishimoto template only uses images right now. I always believe Where there’s a will there’s a way, but this would take some serious custom coding
What would the social class be for the plugin for Vimeo?
This is for the icon…not sure if that’s what you’re wanting though?: .social-vimeo However, you might need to take a look at the specific css here – http://cl.ly/text/3N0e073B3n16
How do you change the size of the icons? They are really small.
Some of the templates have options in the style editor- usually 16, 32, 64, etc. If not you would have to include custom css. Let me know if you need further help on a specific template.
How can we do the customize icon?
thanks!!
Hi, First of all, thanks so much for this info! I wanted to add a pinterest and google+ icon as well. Any ideas on how to do this? Thanks
You should be able to add these accounts now within settings. Official Help Article Link BE SURE to also add your google plus info to verify authorship (this gets your pic next to your articles in google search.) You do this within your profile from the frontend of your site. Official Help article on google authorship here