Styling Summary Block items like Cards in Squarespace

Content Blocks

Mar 21

The summary block is one of my favorite features on Squarespace, but I started to get visually bored with it. I discovered that it had more impact if summary block items were styled to look like “cards” that popped off the page, with shadows, background colors, and hover effects. This works especially well if you use a summary block in a page or section with a background image.

Here is an example of my jazzed up carousel block:

Get This Style

Here is an example of my jazzed up grid block:

Get This Style

The things that I’ve done to transform these summary blocks into “cards” is add the following:

Background color
Shadow
Color and style text
Hover fade effect

The trickiest thing about these effects was working with the padding and margins for the shadow effect. If you don’t want the shadow, I don’t think you need any of the margin and padding CSS I’ve added.

Below is the CSS you need to add for each Summary Block style. If you only want it to affect a certain page or section, make sure to use the id for that page only.

Carousel Style Summary Block

Add the following to your Custom CSS by going to Design—>Custom CSS.

/*Carousel Style Summary Block*/
  .summary-title a{font-family:"Your Header Font"; padding-top:5px; color:#00CeC9 !important; font-size:22px !important;}
.summary-metadata-item {color:white !important;}
 .summary-excerpt {color:white !important;}
  .summary-item.sqs-gallery-design-carousel-slide .summary-content { background-color: rgba(0, 51, 102, 1) !important; padding:10px 15px 10px 10px !important; margin-top:-15px; box-shadow: 7px 7px 8px rgba(0, 0, 0, 0.2) !important;}
  .summary-item.sqs-gallery-design-carousel-slide {padding-bottom:20px !important;}
  .summary-item.sqs-gallery-design-carousel-slide {padding-right:18px !important;}
  .summary-item-list-container.sqs-gallery-container {padding-right:8px !important;}
.summary-item.sqs-gallery-design-carousel-slide:hover {opacity: 0.7; transition: ease-in-out 0.3s}

Grid Style Summary Block

Add the following to your Custom CSS by going to Design—>Custom CSS.

/*Grid Style Summary Block*/
.summary-title a{font-family:"Your Header Font"; padding-top:5px; color:#00CeC9 !important; font-size:22px !important;}
.summary-metadata-item {color:white !important;}
.summary-excerpt {color:white !important;}
.sqs-gallery-design-autogrid {
  .summary-item { background-color: rgba(0, 51, 102, 1) !important; box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.2) !important;}
  .sqs-gallery-meta-container {padding-left:7px; padding-right:7px}
  .summary-item:hover {opacity: 0.8; transition: ease-in-out 0.3s}
  }

Notes:

Substitute your own desired font (it has to be one already in use on your site) for {font-family: “Your Header Font”} under .summary-title.
Substitute your own desired font color for your title (.summary-title), metadata (.summary-metadata-item), and excerpt (.summary-excerpt).
Substitute your own “card” color {background-color} in .summary-item.sqs-gallery-design-carousel-slide .summary-content.
Substitute a different hover effect, such as a zoom or color change, for {opacity: 0.8;} under .summary-item.sqs-gallery-design-carousel-slide:hover.

Here’s a screenshot of what it will look like. You can see that I’ve added this CSS to a specific page id by adding the #item-number.