Blog Posts

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

Select a Squarespace Element to Examine CSS Selectors: 

Squarespace Element Description
Block Listing Page Refers to elements that appear on the main listing view of blog collection pages
Block Post Individual Listings Refers to elements that appear on individual blog post pages

 CSS Code Snippets for Customizing Blog Posts

Hide pagination on blog posts

To hide pagination on all collection pages, you can remove the “[data-collection-type*="blog"]” attribute from the selector.

//Start: Hide pagination on blog posts
.item-pagination[data-collection-type*="blog"] {
  display: none;
}
//End: Hide pagination on blog posts

Change color and font size of blog titles

//Start: Change color and font size of blog title headers
.blog-item-wrapper .blog-item-title h1.entry-title {
    color: coral;
    font-size: 4em;
}
//End: Change color and font size of blog title headers

Hide an element(s) only on blog collection pages, including the listing page and the individual blog posts

//Start: Hide element(s) only on blog collection pages
body[class*="collection-type-blog"] {
  PUT_SELECTORS_HERE {
    display: none !important;
  }
}
//End: Hide element(s) only on blog collection pages

Hide an element(s) only on blog listing pages

//Start: Hide element(s) only on blog listing pages
body[class*="collection-type-blog"].view-list {
  PUT_SELECTORS_HERE {
    display: none !important;
  }
}
//End: Hide element(s) only on blog listing pages

Hide an element(s) only on blog post pages

//Start: Hide element(s) only on blog post pages
body[class*="collection-type-blog"].view-item {
  PUT_SELECTORS_HERE {
    display: none !important;
  }
}
//End: Hide element(s) only on blog post pages

Center author signature and make author image larger

//Start: Author Signature
.blog-item-wrapper .author-avatar, .blog-item-wrapper .author-avatar-image{
  width:200px;
  height:200px
}
.author-name{
  font-size:2rem !important;
  font-weight:bold !important
}
.blog-item-author-profile-wrapper>a{
  text-align:center;
  margin:auto
}
//End: Author Signature

Make blog post listings & summary block blog collections look like cards using border stylings, and a background color (i.e. recipe cards)

//Start: Summary block and blog list card layout
.summary-block-collection-type-blog-basic-grid, .blog-basic-grid {
  .summary-item, .blog-item {
    background: #ebebeb;
    border: 1px solid gray;
    border-radius: 6px;
  }
  .summary-thumbnail, .image-wrapper {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .summary-content, .blog-basic-grid--text {
    padding: 10px;
    box-sizing: border-box;
  }
  .summary-read-more-link:after, .blog-more-link:before {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
  }
}
//End: Summary block and blog list card layout
Previous

Block IDs
Next

Portfolio Pages