Style summaries

Styling summaries in Squarespace isn't that hard with some custom CSS. Add a background color, change the font or put on some rounded corners.

But what if you want to have different styles for different summaries? Or even have different design for different summary items? It can be done, and actually there's quite a few ways to take control over the Squarespace summaries.

The most useful method uses the ability to select different summary text sizes. You can chose between small, medium, large and extralarge in the summary layout panel text-size dropdown. 

static1.squarespace.png
 

So if you want to style all the summaries on your site that has text size Medium you can use the CSS skeleton below. Note that all the selectors are nested within the class .summary-block-setting-text-size-medium, affecting only the summaries with text size Medium.

To apply the design to summaries with another text size, change medium in  .summary-block-setting-text-size-medium to smalllarge or extralarge.  

/* SUMMARY MEDIUM SETTINGS
-------------------------- */
.summary-block-setting-text-size-medium {
 
// DIV  
.summary-content {
  background: #999;
  padding: 10px;
}

// EXCERPT - text
.summary-excerpt p {
  font-size: 1.5em;
  color: #000;
}
  
// EXCERPT - text link
.summary-excerpt p a {
  color: red;
  opacity: 1;
}

// EXCERPT - text link - hover
.summary-excerpt p a:hover {
  opacity: 0.7;
}

// TITLE
.summary-title {
  font-size: 2em!important;
  color: #666;
}

// METADATA  
.summary-metadata-item {
  color: #000;
  text-transform: uppercase;
}

// IMG
.summary-thumbnail-container {
  opacity: 1;
}
  
// IMG - hover
.summary-thumbnail-container:hover {
  opacity: .7;
}
}