Page-Specific Footers in the Squarespace Bedford

Would you like page-specific footers in your site design? Templates in Squarespace typically have one footer that is applied across all pages. Sometimes there is a pre-footer and a footer, and then both are applied across all pages. Page-specific footers are possible though. All it takes is a combination of creating thinking and CSS rules. 

Alternative Text Choices

Your work is sweet and easy if you're wanting to display alternative text passages in footers on different pages of your site. Place your text alternatives into a Code block, and choose between them using CSS rules that effectively function as switches. 

Figures 1 through 3 show an example of the technique. (Click any figure to embiggen it). Figure 1 presents the default footer on my site as I write this post. Figures 2 and 3 show blog-specific footers referring readers of one blog to my other. Readers of my Database and Tech blog see a link to my Outside the Box blog, and vice-versa. 

Figure 1. My default footer

Figure 2. Database and Tech blog

Figure 3. Outside the Box blog

(Please understand that I've created the example footers just to write this post, and that I will revert to a single footer design soon after going live. You likely won't see the page-specific footers from Figures 2 and 3 on my site when you are reading today, but they did exist at the time of writing, and the code that you are about to see is how I implemented them). 

The following Code block is the basis for the example in the figures. I implement the copyright line and the two RSS feed links in the normal way by dragging a text block and two RSS blocks into the footer. The magic is that everything below those items is implemented as a Code block having the following HTML markup. Skim the markup now, and the explanation after will help you make sense of it. 

<div id="my-footers">
<div id="footer-box-blog">
   <p>Visit my
     <a href="http://gennick.com/database/">Database and Tech</a>
     blog</p>
</div>
<div id="footer-tech-blog">
   <p>Visit my
     <a href="http://gennick.com/the-box/">Outside the Box</a>
     blog</p>
</div>
<div id="footer-always-show">
  <p>Congratulations! You've made it to the bottom.
     Well done.</p>
</div>
</div>

There's an outer div named my-footers. That's there just to keep things tidy and make it easier to write formatting rules. Nested inside are three more divs named footer-box-blog, footer-tech-blog, and footer-always-show. These div names are switches that I can throw via CSS.

For example, the following three rules in my Custom CSS Editor set the initial condition:

#footer-always-show {display: block;}
#footer-box-blog {display: none;}
#footer-tech-blog {display: none;}

The initial condition is that my footer-always-show line is enabled. This is the line that begins with "Congratulations!" The other two options are disabled by their respective, display: none rules. 

Tip: If you're new to working with CSS and Squarespace, my post on CSS and Squarespace: Getting Started may be helpful. There is also my book.

Next in my Custom CSS Editor come the following two rules to enable the blog-specific text:

#collection-524b8324e4b08c5ba070d6f2 #footer-tech-blog {display: block;}
#collection-525c7eb2e4b0e89bfe803d2d #footer-box-blog {display: block;}

The #collection values are identifier (ID) values from the respective blog page body tags. You can get the ID for any page by

  1. Opening the page in your browser.
  2. Viewing the source (by pressing CTRL-U in most PC browsers, and Command-Option-U in Mac browsers)
  3. Finding the body tag.
  4. And looking for the ID attribute, which is typically listed first inside the tag.

Targeting the specific pages via their collection identifiers allows me to switch on the blog-specific footer text when the respective blogs are viewed, and on any non-blog page that text remains switched off as specified by my initial condition rules. 

Some formatting touch-ups may be needed when using the technique. Following are some additional rules I needed to write. One specifies my link color to be the same hot-pink that I give in the Style Editor for other links on my pages. Another represents some fiddling with the bottom margin of the paragraph to get the vertical spacing just right. I looked at the page in my browser's inspector and worked through the math, but you can also just use trial and error until you're happy with the result. 

#my-footers {display: block;}
#my-footers a {color: #ff065a;}
#my-footers p {
  text-align: center; font-weight: 
  bold; margin-bottom: 17px;
}

One last comment about the technique is that it's hugely helpful to put all your alternatives into one code block, and to be sure that at least one alternative is always chosen. That's because the Code block will have padding and possibly margin associated with it, and that padding and margin will take up vertical space on the page even when all the footer alternatives are switched off. The result will not look good, and you can avoid the problem entirely by ensuring that at least one option is set to display at all times. Hence my footer-always-on text. 

Tip: If you're a Flatiron user, then be sure to read Styling the Squarespace Flatiron. There I show a technique for inhibiting the footer from the home view of a Flatiron index page.

Alternative Block Choices

It's also possible to choose between alternate Squarespace blocks, and even to disable them completely. This approach is more difficult, and more brittle too in the sense that you can easily break your design when making subsequent footer changes if you forget to check for and rewrite any related CSS rules. 

Warning! This section describes an advanced modification. Do not attempt it without a working knowledge of HTML and CSS. You must be able to on your own identify and target the needed div elements in the HTML that is generated by the Squarespace layout engine.

Figure 4 shows a footer specific to my About page. This footer replaces my RSS feed links with a Social Links block, for just the one page. It was a somewhat tricky modification to make.

Figure 4. About-page footer, with social icons

First, I had to recognize the need to work in terms of alternative rows. Figure 5 shows the design view of my footer after implementing the About-page alternative in Figure 4. There are two rows having redundant copyright lines on the left, but differing content on the right. The need for two rows goes to how the underlying HTML is mapped onto the 12-column grid on which Squarespace pages are built.

Figure 5. Design view of my footer showing the default and the About-page alternatives

I set the initial condition by writing the following CSS rule and placing it into my Custom CSS Editor. I viewed the source for my page, found the div enclosing the second footer row, and wrote a rule to inhibit the display of that row. This rule will vary by template, and I cannot even promise that what appears to be the second row in a footer will, in fact, be addressable by a selector such as nth-of-type(2)

#footerBlocks .row .col .row:nth-of-type(2) {
  display: none;
}

With the initial condition set, it's a pretty simple matter to write page-specific rules to flip the display status of the two footer rows. For example, the collection identifier in the following rules targets my About page, hiding the first footer row and showing the second, just on that one page.

#collection-52892383e4b0ff28fb88147b #footerBlocks
.row .col .row:nth-of-type(1) {display: none;} 
#collection-52892383e4b0ff28fb88147b #footerBlocks
.row .col .row:nth-of-type(2) {display: block;} 

Formatting tweaks are often needed when you monkey around like this. I found that I needed to remove some padding when I displayed the second row, leading to the following rule, which is also specific to the About page:

#collection-52892383e4b0ff28fb88147b #footerBlocks
.row .col .row:nth-of-type(2)
.sqs-block {padding-top: 0; padding-bottom: 0;}

This rule removes some padding that Squarespace adds to what the layout engine interprets as the second row in the footer, but really it is the first row. Removing the padding results in the social icons row displaying in the same vertical position within the footer as the alternative row with the RSS feed links. 

Keeping it Clean and Simple

Simpler is better; go with one footer design if you possibly can. I'll revert my own footer to a single design shortly after making this post for that very reason. 

Of the two solutions, I like the first one best. It's simple and robust, easy to understand and unlikely to be accidentally subverted by future edits.

There doesn't appear to me be one, universal "scaffolding" that works in all possible cases. The fundamental technique of setting an initial state followed by switching different elements on and off as needed seems sound. How you implement that technique, and how you design your footer in support of it, is going to vary depending upon how complex your footer is and what your goals are. And for anything but the first method, you're going to need good knowledge of HTML and CSS, or the patience and tenacity to learn fast and work things out. 


Learn CSS for Squarespace 7
9.99

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart