Make your Squarespace Blog Page Layout Stand Out (CSS Snippet inside)

Squarespace Help

Jun 30

Make your blog page stand out

Are you limited by how your Squarespace blog page layout looks and feels? Yes, you can tweak text alignment, decide if you want to show meta like description or the “Read More” link and adjust many other things, but what if you wanted to hide images altogether? Or make the blog post grid on your Squarespace website look like a listing of stylish cards? Especially if you have several blogs and use one for something else than a straightforward blog - like a listing for featured works, upcoming shows, or masterclasses, or something else altogether.

In this short article, we’ll share code snippets that will turn your blog homepage layout into a stylish listing for anything you desire. The snippet is formatted in a way where it inherits as much of the website themes as possible, making it super easy to simply plug and play. Let’s get started!

Step one. Targeting the proper blog page

First, a few words about the blog layout. For best results we suggest you set it to Basic Grid Blog with 3 columns per row or as side by side, although this snippet works with any layout options.

If you have more than one blog page, it can be named something different than a “Blog” - just look for a page with a fountain pen icon next to it, like this one ✒️. If you have more than one blog page and want this style to apply to all of them, repeat the actions below for every blog page where you want this style to apply.

Add this code to the blog page:

Click the gear icon ⚙️ next to the blog page title.
Click Advanced and then select “Page Header Code Injection”.
Paste the following code there.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
  document.querySelector("body").classList.add("applet-blog-page-index");
}, false);
</script>

Step two. Adding the stylesheet

Add this CSS (LESS) code to your website. To do that, navigate to Pages -> Website Tools -> Custom CSS and add the below code:

// Custom layout for blog post items
// - turns them into more of a card layout
// - hides featured image
// - makes link text into a button
// - repositions meta text on top of the "card"
// - on mobile, button is stretched full width
// - all colors are inherited from the selected color theme

.applet-blog-page-index {
  @radius: 50px; // Cards have rounded corners, change this to adjust them

  article.blog-item {
    min-height: 400px !important;
    position: relative;
    background-color: ~"var(--tweak-text-block-background-color)";
    border-radius: 30px;

    .blog-meta-section {
      display: none;
    }

    .image-wrapper {
      img {
        transform: scale(0);
      }
    }

    .blog-article-spacer {
      display: none;
    }

    .blog-basic-grid--text {
      position: absolute;
      top: 4rem;
      right: 2rem;
      bottom: 2rem;
      left: 2rem;
      max-width: ~"calc(100% - 4rem)";

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;

      .blog-title {
        color: ~"var(--headingMediumColor)";
        font-size: ~"calc((var(--heading-3-size-value) - 1) * calc(.022 * min(100vh, 900px)) + 1rem)";
        line-height: ~"calc(var(--heading-font-line-height) * (1 + (1 - var(--heading-3-size-value))/25))";
        font-weight: ~"var(--heading-font-font-weight)";
        font-style: normal;
      }

      .blog-more-link {
        display: inline-block;
        padding: 1rem 2rem;
        color: ~"var(--primaryButtonTextColor)";
        background-color: ~"var(--primaryButtonBackgroundColor)";
        text-transform: uppercase;
        border-radius: @radius;

        @media only screen and (max-width: 767px) {
          text-align: center;
          width: ~"calc(100% - 4rem)";
        }

        @media only screen and (min-width: 1180px) {
          padding: 1rem 4rem;
        }

        &:after {
          display: none;
        }
      }
    }
  }

  section[data-section-theme="bright-inverse"],
  section[data-section-theme="bright"],
  section[data-section-theme="dark"],
  section[data-section-theme="dark-bold"],
  section[data-section-theme="black"],
  section[data-section-theme="black-bold"] {
    article.blog-item {
      background-color: transparent;
      border: solid 2px ~"var(--tweak-text-block-background-color)"; 
    }  
  }
}

Feel free to tweak it however you like to get different colors, fonts, etc. If you know nothing or very little about CSS, get started by downloading our free Squarespace CSS cheat sheet here. At the very top of the CSS code we declare a @radius variable to make it easier for you to adjust the radius of the cards’ rounded corners.

If you want to learn more about using CSS in Squarespace to build websites that really break out of any Squarespace design limitations, check out our Squarespace CSS Mastery class where we teach you everything you need to know to start designing more freely with Squarespace.

Cheers!