Squarespace Tutorial: CSS Blog Post Summaries → Card Style Design

 

Squarespace can be a might-fiiiiiine tool for building your web presence for your small business (see my web portfolio here), but, many designers criticize the platform for not giving enough tools for customization. I found myself in a similar struggle when designing websites for some of my clients who needed that extra little touch of branding beyond the template that Squarespace provided.

This is when I started dipping my toe in CSS. CSS or “Cascading Style Sheets” is a computer language that builds websites. In my experience, you kind of have to jump in and start tinkering with this stuff to get it to work the way that you want it to. The learning curve is steep, but so rewarding once you figure it out!

By the end of this tutorial, you’ll get beautiful ‘Card Style’ Summary blocks like these:

BEFORE:

Screen Shot 2019-06-11 at 4.12.35 PM.png

AFTER:

Screen Shot 2019-06-11 at 2.08.37 PM.png

tutorial starts here:

STEP 1: Add your Summary Block to your Desired Page

It is important to have a basic understanding of Squarespace before we jump too far into adding the CSS. When building out your pages, you’ll see that you can add what is called a summary block. For this tutorial, I am showing you how to style specific to the design-carousel, so all of the CSS code will be specific to the carousel option.

Go to the page of your choice, add a content block like you normally would and connect it to blog block.

a) Add Summary Block to Page

Screen Shot 2019-06-11 at 2.22.10 PM.png

b) Style Summary Block Layout

Screen Shot 2019-06-11 at 2.27.21 PM.png

c) Style Summary Block Display

Screen Shot 2019-06-11 at 2.30.19 PM.png

STEP 2: Locate your CSS Code Injection Dialogue Box

To get the Dialogue box where you will copy and paste the code into, you’ll go:

>> Design

>> Custom CSS

This is where we will be adding in all of the CSS code that will make the changes to the style of the summary blocks. You can also use this area to add custom code for things like changing the background color of a quote block, making your instagram banner go full width across your website, etc.

***I actually saved a folder of all my favorite Squarespace CSS Hacks with BublUp. Creating CSS Hacks like this help me create truly customized websites for my clients, and I am happy to share the other blogs, resources and videos along with you! Simply input your email here and I can add you to the folder!

 

STEP 3: Add a Background Color to your Summary Content

In order to add the background block to the title and summary content, copy and paste the below code into the CSS Editor. Here are the bits you can customize:

  • Background Color: Use any Hex Code to change the color

  • Padding: Change the spacing on the sides, top and bottom by adjusting the pixel size

  • To shore up the spacing between the image and the card background, we need to keep the top: -20px

/*add background to title*/
.summary-block-setting-design-carousel {
.summary-content {
background-color: #f9f5f2;
padding-top: 30px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
position: relative;
z-index: 1;
top: -20px;
/*add border to bottom of card*/
border-bottom: 6px solid #f2eee4}}
/*send background to back of page*/
.summary-thumbnail-outer-container {z-index: 10;}
Screen Shot 2019-06-11 at 3.03.40 PM.png

STEP 4: Add a Color Border to Thumbnail Image

To take it one step further and really make it look like the image is part of the summary block card, I added a colored border to the thumbnail in the same color as the bottom border. These are really subtle details, but they visually help to bring the whole design together and frame out the image.

In this code, you can customize:

  • Border Thickness: Right now it is set to 6px, but you can change to anything you like

  • Border Color: Using your hex codes, you can change the colors on these as well (anything after the #).

/*add border to image*/
.sqs-block-summary-v2 
.img-wrapper, 
.sqs-block-summary-v2 
.sqs-video-wrapper {border: 6px solid #f2ece5;}
Screen Shot 2019-06-11 at 3.05.45 PM.png

Screen Shot 2019-06-11 at 3.10.55 PM.png

STEP 5: Add “Read More” Floating Text Box

Lastly, and definitely not least, I added the text “read more” over top of the image and above the title to give a more custom look and feel to the block while also enticing the reader to click through. This isn’t hyperlinked, but the whole thumbnail is, so if they click read more, it will take them through to the corresponding post. Again, you can customize the colors, background, font size, and position of this block with this snippet of code.

/*add read more overlap*/
.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after 
{content: '· read more ·';
font-style: italic;
font-size: 14px;
color: #1d3451;
position: absolute;
top: 92%;
bottom: 0%;
left: 20%;
right: 20%;
background: #f2ece5;
opacity: 1;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;box-sizing: border-box;
text-align: center;}

STEP 6: Styling the Summary Content Fonts

At the very end, I decided that I didn’t much care for the styling options provided to me in the design panel of squarespace for the summary blocks so I used an adapted version of Big Cat Creative’s code for Styling Summary Block Fonts to adjust the title font and the metadata (category font) like so:

/*summary block title font styling*/
.sqs-block-summary-v2 {.summary-title, .summary-heading {
font-family: Baskerville;
font-weight: 400;
font-size: 22px !important;
color: #1d3451;
line-height: 26px;
padding: 8px;
text-transform: none;
font-style: none;} 
/*summary block meta data font styling*/
.summary-metadata-item {
font-family: quicksand;
font-weight: 600;
text-transform: uppercase;
font-size: 12px !important;}}
Screen Shot 2019-06-11 at 3.15.19 PM.png

et voilà!

That’s all folks! If you’re looking for an easier way to get all that styling right over to your site, simply copy and paste all this lovely code you see below into your CSS editor and start playing around! You’ll be surprised how much fun it is to mess with the design elements, and create something entirely unique to your branding and your website!

↓ ↓ COPY/PASTE ALL dis CODE ↓ ↓ 

/*add background to title*/
.summary-block-setting-design-carousel {.summary-content {
background-color: #f9f5f2;
padding-top: 30px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
position: relative;
z-index: 1;
top: -20px;

/*add border to bottom of card*/
border-bottom: 6px solid #f2eee4}}
/*send background to back of page*/
.summary-thumbnail-outer-container {z-index: 10;}
/*add border to image*/
.sqs-block-summary-v2.img-wrapper, .sqs-block-summary-v2, .sqs-video-wrapper {border: 6px solid #f2ece5;}
/*add read more overlap*/
.sqs-gallery-design-carousel-slide .summary-thumbnail-container::after 
{content: '· read more ·';
font-style: italic;
font-size: 14px;
color: #1d3451;
position: absolute;
top: 92%;
bottom: 0%;
left: 20%;
right: 20%;
background: #f2ece5;
opacity: 1;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;box-sizing: border-box;
text-align: center;}
/*summary block title font styling*/ .sqs-block-summary-v2 {.summary-title, .summary-heading {
font-family: Baskerville;
font-weight: 400;
font-size: 22px !important;
color: #1d3451;
line-height: 26px;
padding: 8px;
text-transform: none;
font-style: none;} 
/*summary block meta data font styling*/
.summary-metadata-item {
font-family: quicksand;
font-weight: 600;
text-transform: uppercase;
font-size: 12px !important;}}