Ishimoto Template: Full width Footer with Custom Social Media Icon Links

your-site-title

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

 Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo

Open Custom CSS Window

From the bottom of the style editor popout, open up the Custom CSS window by clicking, well… CSS!

 Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo

Custom CSS

Copy and Paste the following custom CSS and don’t forget to Save!

#footer #footerBlocks-1 {
width: 100%;
}


 Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo

Content Editor

Your Footer is now ready to add content. But first, choose the Content Editor

 Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo

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.

 Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo

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.

 Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo

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.


 Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo

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.


 Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo

Additional References:

ss5 ad Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo

ss6 ad 2 Ishimoto Template: Full width Footer with Custom Social Media Icon Links photo



If you would like to receive other tips and tutorials,  follow Squarespace Plugins via RSS or sign-up for the SSP Monthly Newsletter which will include all the tutorials for the month as well as the latest Squarespace happenings around the net. (Your info will not be shared or sold to anyone)

Squarespace user since 2009. Traveling throughout North America with my first husband and three kids. You can follow our journey at FoggyPhils. (http://www.foggyphils.com)

19 Comments on "Ishimoto Template: Full width Footer with Custom Social Media Icon Links"

  1. Aldan says:

    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!

  2. Tor Ivan says:

    awesome! Just what I needed.

  3. Laurel Bancroft says:

    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!

  4. Arnahud says:

    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 !

    • Holly says:

      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 ;)

  5. MCP says:

    What would the social class be for the plugin for Vimeo?

  6. MCP says:

    How do you change the size of the icons? They are really small.

  7. Troy says:

    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

  8. devin says:

    I can’t for the life of me get the footer to format into two side by side columns. It just keeps putting one block below the other. Any tips?

  9. jj says:

    Similarly to the above post, does anyone have some ideas for html or css that will allow for adjustable text blocks in the ishimoto footer? I expanded the footer with the above hint, but there is no way to adjust the width of added items. (there are no “handles” on the boxes)
    Or, better yet, is there a way to add text blocks into the body of ishimoto? Thanks- jj

  10. James W says:

    Hi!

    Not sure if this thread is still checked or not, but….

    I use Ishimoto a fair amount, but one thing that bugs me is the lack of being able to get the FP slideshow to link to a URL. I don’t need spearate links for each of the images, I’d settle for being able to get a click on any image to link through to another page.

    Is there any way to do this with code injection and/or CSS? It’s driving me nuts!! ;-)

Trackbacks for this post

  1. How to Direct a Squarespace 6 Social Link to your Facebook Fan Page - Squarespace Plugins

Got something to say? Go for it!

 
Loading...
Join over 100 folks and get our free monthly SSP Newsletter.
No-Spam Guarantee. Ever.