Improving Summary Blocks

In this tip I'm going to explain how to customise the appearance of Summary Blocks.

In June 2014, Squarespace added Summary Blocks, a feature that Squarespace users now take for granted, but they revolutionised the platform. They're a fantastic way to present your Blog, Gallery or Calendar Events in a visual way but Squarespace don't provide many options to customise them.

You can't add colour or overlays.

You can't place the title or the excerpt text on the image

You can't add animation.

At least you can't do any of these things with the Style Editor or Summary Block settings. However with a little CSS and some optional Javascript, we can.

Typical Summary Blocks

A typical application for a Summary Block is to display the content of a blog in a 'magazine layout'. That is, a series of image thumbnails with titles. For example, here's a default Summary Block:

Summary Block Before

With a little CSS, it could look like this:

Summary Block After CSS added

Here's another example of a basic Summary Block:

Summary Block Example

It takes up a lot of vertical space because the titles, excerpts and categories are displayed below the thumbnails. Wouldn't it be great if they were shown on the image? Perhaps like this:

Modified summary block

Here the titles and excerpts are shown at the bottom of the image, with a translucent background. The categories are placed in the top-right corner. This has all been achieved with CSS. Some Javascript (jQuery) has been added to colour-code the categories to make it easier for visitors to find the stories that interest them.

If you're interested in recreating this, read on!

The basics

Add a Summary Block to a page on your Squarespace site. Here are the settings that I've selected:

Layout tab
Display tab

When you've configured the Summary Block it's time to add the CSS. Save the page and open the Settings panel for the page.

In SettingsAdvanced > Page Header Code Injection, add the following:

<style>
.sqs-block-summary-v2 .summary-content {
  text-align: left;
  position: absolute;
  bottom: 0;
  padding: 5%;
  height: 40%;
  width: 100%;
  color: white; /* colour of the title and except text */
  background: rgba(127,188,123,0.8); /* colour of background behind the title and excerpt */
}
  
.sqs-block-summary-v2 .summary-block-setting-show-title .summary-thumbnail-container{
  margin-bottom: 0!important; /* fix to bottom of thumbnail */
  overflow: hidden; /* hide anything that doesn't fit */
}
  
.sqs-block-summary-v2 .summary-item{
  margin-bottom: 15px!important; 
}
  
.sqs-block-summary-v2 .summary-metadata-item a, .sqs-block-summary-v2 .summary-metadata-item a:link{
  color: #6cded4;
}
  
.sqs-block-summary-v2 .summary-title a:link{
  color: #fff; /* color of title */
}
 
/* Position the category or tag in top-right corner */
.sqs-block-summary-v2 .summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats,
.sqs-block-summary-v2 .summary-block-setting-primary-metadata-tags .summary-item-has-tags .summary-metadata--primary .summary-metadata-item--tags{
    position: absolute;
    right: 3%;
    top: -140%;
    opacity:0.9;
  }

.sqs-block-summary-v2 .summary-block-setting-primary-metadata-cats .summary-item-has-cats .summary-metadata--primary .summary-metadata-item--cats a,
.sqs-block-summary-v2 .summary-block-setting-primary-metadata-tags .summary-item-has-tags .summary-metadata--primary .summary-metadata-item--tags a {
  /* default category labels are White on Magenta */
  font-size: 12pt; /* Size of category text */
  padding: 4px 9px; /* Size of category label */
  background: #ff66cc; /* default category font background */
  color: #fff; /* default category font colour */
  }    

}
</style>

This is the CSS. You select different colours for the title and excerpt text and the background that appears behind them. 

If you have categories or tags, these will appear with a magenta label. 

Colour-coded categories

With some Javascript you can change the colour or each label according to the text that appears in it. The sample of script below assumes that the categories are called Experience, Sport and Announcement but I don't expect yours will be the same! You'll need to replace these categories in the code so that it works with your categories.

The code should be added to the same page header code injection area. This code relies on jQuery, so if you've not already added a line of code that gives the source of jQuery you'll need to add this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Add the following code and then customise it for the category names you are using and the colours you'd like to use.

<script>
$(document).ready(function(){
  //Announcements shown on purple background
  $("a[href$='Announcement']").css("background", "#cc00cc"); 
  
  //Experiences shown as black on yellow
  $("a[href$='Experience']").css({
    'background': '#ffca1c', 
    'color': '#000'
  });
  
  //Sport shown on green background
  $("a[href$='Sport']").css("background", "#009900"); 
  
});
</script>

For example, change 'Announcement' to the name of one of your categories. If you'd prefer something different to the purple background, change the colour from '#cc00cc' to something else.

The announcement option is pretty simple. It only changes the background colour. The font remains white.

The example below this - for the 'Experience' category - changes both the background and the font colour. This is because I chose a light background and I needed a darker font.

The example shows three categories, but you can add more. Just add another section before the final two lines. I've added gaps between the sections so that you can see them clearly.