Squarespace Blog CSS — Every Customization You Need

Squarespace 7.1 gives you a solid blog engine, but the default styling leaves a lot on the table. This guide covers 13 copy-paste CSS customizations that transform your blog from template-standard to fully branded. Every snippet goes in Design → Custom CSS unless noted otherwise.

Each section targets a specific blog element — sidebars, titles, dates, categories, tags, pagination, images, and more. The selectors are current for Squarespace 7.1 as of 2026. If Squarespace changes a class name, the logic stays the same — just swap the selector.

1. Add a Blog Sidebar

Squarespace 7.1 removed the native blog sidebar that existed in 7.0. That doesn't mean you can't have one. The approach is to use CSS grid on the blog wrapper to split the layout into two columns — a main content area and a sidebar panel.

Add a section below your blog feed containing sidebar content like categories, recent posts, an about blurb, or a newsletter signup. Then use CSS to reposition that section beside the blog feed instead of below it. On mobile, the sidebar stacks underneath naturally.

The .blog-item-wrapper selector wraps the entire blog content area. Converting it to a CSS grid container with a fixed sidebar column gives you the classic two-column blog layout that readers expect.

/* Make the blog section a two-column grid */
.blog-item-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 40px !important;
  max-width: 1200px;
  margin: 0 auto;
}

/* Sidebar stacks below on mobile */
@media screen and (max-width: 767px) {
  .blog-item-wrapper {
    grid-template-columns: 1fr !important;
  }
}

Result: Your blog page displays a two-column layout with the main feed on the left and a 300px sidebar on the right. On screens narrower than 767px, the sidebar drops below the feed in a single column. Adjust the 300px value to make the sidebar wider or narrower.

2. Change Blog Post Title Size

Blog post titles use different selectors depending on where they appear. On the blog listing page (the index of all posts), titles live inside .blog-title. On an individual post page, the title uses h1.entry-title inside the .blog-item-content wrapper.

If you only target one selector, the other stays at the default size and you end up with an inconsistent blog. Target both. The clamp()function handles responsive sizing in a single line — no media queries needed. It sets a minimum, preferred, and maximum value so the title scales smoothly across screen sizes.

Set different sizes for listing vs. individual posts. Listing titles should be smaller since multiple appear on screen. The individual post title deserves more visual weight since it's the only one on the page.

/* Blog listing page titles */
.blog-title,
.blog-collection .blog-title a {
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Individual blog post title */
.blog-item-content h1.entry-title {
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

Result:Blog listing titles render between 24px and 36px depending on viewport width, while individual post titles range from 32px to 48px. Both scale fluidly without breakpoints. Adjust the min/max values to match your brand's typography.

3. Hide Blog Post Date

Not every blog needs visible publish dates. Evergreen content, resource libraries, and portfolio-style blogs often look cleaner without them. Dates can also make older content feel stale even when it's still relevant.

Squarespace 7.1 places the date inside a .blog-meta-item--dateelement. You can hide it everywhere with one rule, or target the listing page and individual post pages separately. This gives you control — show dates on individual posts but hide them on the listing, or vice versa.

Hiding the date with CSS (display: none) removes it visually but keeps it in the source HTML. Search engines can still read the publish date from structured data, so your SEO isn't affected. Squarespace injects datePublished in JSON-LD regardless of the CSS.

/* Hide date everywhere */
.blog-meta-item--date {
  display: none !important;
}

/* Or hide only on listing page */
.blog-collection .blog-meta-item--date {
  display: none !important;
}

/* Or hide only on individual post page */
.blog-item-content .blog-meta-item--date {
  display: none !important;
}

Result:Blog post dates disappear from whichever context you target. Use one rule or combine them. The date remains in the page source and structured data for SEO purposes — only the visual display is affected.

4. Style Blog Category Tags

Blog categories in Squarespace 7.1 render as plain text links with no visual distinction from regular body text. Visitors often miss them entirely. Transforming them into pill-shaped badges with background colors and rounded corners makes them visually distinct and clickable.

The category links live inside .blog-categories-list a on the listing page and .blog-meta-item--categories a on individual posts. Target both selectors to keep the styling consistent across every view.

A subtle gray background with dark text and a color-shift hover state is the classic approach. Uppercase text with tight letter-spacing gives categories a label-like appearance that separates them from body copy. Swap the hover color to your brand accent for a cohesive look.

.blog-categories-list a,
.blog-meta-item--categories a {
  background-color: #f0f0f0;
  color: #333 !important;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px !important;
  font-weight: 500;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.blog-categories-list a:hover,
.blog-meta-item--categories a:hover {
  background-color: #e63946;
  color: #ffffff !important;
}

Result: Blog categories display as rounded pill badges with a light gray background. On hover, they shift to a red background with white text. Change #e63946to your brand's accent color to match your site.

5. Style the Read More Link

The Read More link on blog listing pages is one of the most important conversion points on your blog. It's the bridge between the excerpt and the full post. By default, Squarespace renders it as a plain text link that blends into the body copy and gets overlooked.

The selector is .blog-more-link. Converting it from a text link to a button-style element with a dark background, uppercase text, and letter-spacing makes it unmistakably clickable. The hover state provides visual feedback that confirms the element is interactive.

If a button feels too heavy for your design, you can go the other direction — remove the background and add an animated underline instead. The key is making it visually distinct from the surrounding text so readers know exactly where to click.

/* Button-style Read More */
.blog-more-link {
  display: inline-block;
  background-color: #1a1a2e;
  color: #ffffff !important;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 13px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none !important;
  transition: background-color 0.3s ease;
}

.blog-more-link:hover {
  background-color: #e63946;
  color: #ffffff !important;
}

Result: The Read More link becomes a dark button with white uppercase text. On hover, it shifts to red. This makes the call to action impossible to miss on the blog listing page. Use our Button Generator to create a custom style that matches your brand.

6. Blog Grid/List Toggle

Some readers prefer scanning a compact list of titles. Others want a visual grid with thumbnails. Squarespace 7.1 doesn't include a built-in toggle, but you can add one with a small piece of JavaScript and CSS class toggling.

The approach injects a toggle button via Code Injection that adds or removes a CSS class on the blog list wrapper. The CSS then defines two distinct layouts — a multi-column grid view with card-style items and a single-column list view with inline thumbnails. Visitors click the button to switch between them.

The grid view uses inline-block with 48% width to create a two-column card layout. The list view switches to flex with a fixed-width thumbnail and text flowing beside it. Both degrade gracefully on mobile since the grid items stack at narrow widths anyway.

/* Add toggle button via Code Injection > Footer */
/* <button id="view-toggle" class="view-toggle">Grid View</button> */

.blog-list--grid .summary-item {
  display: inline-block;
  width: 48%;
  vertical-align: top;
  margin-bottom: 30px;
}
.blog-list--list .summary-item {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.blog-list--list .summary-thumbnail {
  width: 200px;
  flex-shrink: 0;
}

Result: A toggle button lets visitors switch between a card grid and a compact list. The grid shows two columns of post cards. The list shows a horizontal layout with a 200px thumbnail on the left and post details on the right.

7. Blog Sharing Buttons

Squarespace 7.1 blog posts include built-in social sharing buttons, but they're often understyled and blend into the page. The share buttons live inside the .sqs-share-buttons wrapper, with each platform button using the .ss-social-button class.

The default buttons are typically small and text-based. Restyling them as circular icons with a dark background and white icon color makes them visually consistent and immediately recognizable. The buttons use inline SVGs that inherit the color property, so changing the text color changes the icon color.

A top border with some padding creates a visual separation between the post content and the sharing section. The hover opacity effect gives subtle feedback without requiring separate hover colors for each platform.

.sqs-share-buttons {
  display: flex;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid #eee;
  margin-top: 30px;
}
.sqs-share-buttons .ss-social-button {
  background: #111;
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.sqs-share-buttons .ss-social-button:hover {
  opacity: 0.7;
}

Result: Social share buttons display as dark circular icons in a horizontal row, separated from the post content by a thin border. On hover, they fade slightly to indicate interactivity. The uniform circular style works regardless of which platforms you have enabled.

8. Blog Tag Styling

Blog tags are distinct from categories in Squarespace. Tags appear inside .blog-item-tags or .post-tagswrappers and render as plain unstyled links by default. Most visitors don't even notice them because they look identical to body text.

Converting tags into pill-shaped badges with a light background, padding, and rounded corners makes them scannable and clickable. Tags serve as a secondary navigation mechanism — readers should be able to spot them instantly and click through to find related content.

The hover state inverts the colors (dark background, white text) to give clear visual feedback. The margin on each tag handles spacing when tags wrap to multiple lines, preventing them from crowding together.

.blog-item-tags a,
.post-tags a {
  display: inline-block;
  background: #f0f0f0;
  color: #333;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  margin: 0 6px 8px 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.blog-item-tags a:hover,
.post-tags a:hover {
  background: #111;
  color: #fff;
}

Result: Blog tags display as light gray pill badges with dark text. On hover, they invert to a dark background with white text. Tags wrap naturally across multiple lines with consistent spacing between each badge.

9. Blog Author Info Section

The author byline on Squarespace 7.1 blog posts uses the .Blog-meta-item--author class. If you have author profiles enabled, a more detailed section appears with an avatar and bio text using .author-avatar and .author-bio selectors.

A well-styled author card builds trust and gives your blog an editorial feel. Readers are more likely to engage with content when they can see who wrote it. The card layout places the avatar beside the bio text in a horizontal flex arrangement with a subtle background to separate it from the post content.

The circular avatar is achieved with border-radius: 50% and object-fit: cover to handle non-square source images. The background and padding on the bio wrapper create a card-like container that frames the author information.

.Blog-meta-item--author {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}
.author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 16px;
}
.author-bio {
  display: flex;
  align-items: center;
  background: #f9f9f9;
  padding: 24px;
  border-radius: 8px;
  margin-top: 40px;
}
.author-bio p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

Result: The author byline displays in bold 14px text. Below the post, the author bio section appears as a rounded card with a light gray background containing a circular avatar on the left and bio text on the right. This gives your blog a professional editorial layout.

10. Blog Pagination Styling

Squarespace 7.1 uses .BlogList-pagination for the older/newer post navigation at the bottom of the blog listing. The default links are minimal and easy to overlook, which means readers may not realize there are more posts to browse.

Styled pagination links with visible borders, uppercase text, and clear hover states turn a passive element into an active navigation component. Centering the links with flexbox and adding generous padding creates breathing room that draws the eye.

The hover effect inverts the colors (dark fill, white text) to give decisive feedback. The top border separates the pagination from the last blog post, creating a clear visual boundary that signals the end of the content and the start of navigation.

.BlogList-pagination {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 40px 0;
  border-top: 1px solid #eee;
}
.BlogList-pagination-link {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid #111;
  color: #111;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background 0.2s ease, color 0.2s ease;
}
.BlogList-pagination-link:hover {
  background: #111;
  color: #fff;
}

Result: Pagination links display as outlined buttons centered below the blog feed, separated by a thin top border. On hover, the buttons fill with a dark background and white text. The uppercase styling and letter-spacing give them a polished, intentional appearance.

11. Featured Image Size Control

Blog featured images in Squarespace 7.1 can be unpredictably tall depending on the uploaded image dimensions. A portrait-oriented photo can push the entire post title below the fold, while a landscape image might look fine. Controlling the height ensures a consistent experience regardless of source images.

The featured image container lives inside .blog-item-top-wrapper .header-image. Setting a max-height with overflow: hidden crops the image at a fixed height. The object-fit: cover on the image itself ensures it scales proportionally without distortion, cropping from the center.

A mobile media query reduces the height for smaller screens. A 500px hero image looks cinematic on desktop but dominates a phone screen. Dropping to 300px on mobile keeps the image impactful without burying the content.

.blog-item-top-wrapper .header-image {
  max-height: 500px;
  overflow: hidden;
}
.blog-item-top-wrapper .header-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 767px) {
  .blog-item-top-wrapper .header-image,
  .blog-item-top-wrapper .header-image img {
    max-height: 300px;
    height: 300px;
  }
}

Result: Featured images display at a consistent 500px height on desktop and 300px on mobile, regardless of the original image dimensions. Images scale and crop from the center to fill the container without distortion. Every post looks uniform in the feed.

12. Post Navigation (Prev/Next)

The previous/next post links at the bottom of individual Squarespace 7.1 blog posts use the .BlogItem-paginationclass. These links are critical for keeping readers on your site — when someone finishes an article, the next click should be effortless.

A full-width split layout with previous on the left and next on the right mirrors the natural reading direction. Adding arrow characters via CSS ::before and ::after pseudo-elements creates directional cues without injecting extra HTML.

The flex layout with justify-content: space-between pushes the links to opposite edges. A top border and generous margin-top create separation from the post content. The hover color shift provides feedback while keeping the design minimal.

.BlogItem-pagination {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding: 30px 0;
  margin-top: 40px;
}
.BlogItem-pagination-link {
  text-decoration: none;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}
.BlogItem-pagination-link:hover {
  color: #666;
}
.BlogItem-pagination-link--prev::before {
  content: "\2190";
}
.BlogItem-pagination-link--next::after {
  content: "\2192";
}

Result: Previous and next post links display at opposite ends of a full-width row with arrow characters pointing in the navigation direction. The links are bold and prominent with a subtle hover fade. This reduces bounce rate by guiding readers directly to the next article.

13. Blog Search Styling

The Squarespace 7.1 search block uses .sqs-search-page-input for the search field and .sqs-search-page-resultsfor the results list. The default search bar is thin, borderless, and easy to overlook — especially on blog-heavy sites where search is a primary navigation tool.

A more prominent search input with a visible border, generous padding, and focus state makes the search bar feel like a first-class feature. The focus state darkens the border to confirm that the input is active. Custom placeholder styling in italic with a muted color tells visitors what to type without cluttering the field.

Search results get individual bottom borders and padding to create clear visual separation between entries. Without this, results run together and become difficult to scan. The search icon is an SVG inside the submit button that responds to fill color changes if you want to restyle it.

.sqs-search-page-input input {
  border: 2px solid #ddd !important;
  border-radius: 4px;
  padding: 14px 20px;
  font-size: 16px;
  width: 100%;
  transition: border-color 0.2s ease;
}
.sqs-search-page-input input:focus {
  border-color: #111 !important;
  outline: none;
}
.sqs-search-page-input input::placeholder {
  color: #aaa;
  font-style: italic;
}
.sqs-search-page-results .search-result {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

Result: The search input displays with a visible gray border that darkens to black on focus. Placeholder text appears in italic gray. Each search result is separated by a thin bottom border with 20px vertical padding, making results easy to scan and click.

Related Tools