“Podcastifying” Squarespace’s Summary Block

Podcasts are pretty much THE THING right now.

So, if you or your client has a podcast that wants to promote on their site, what better way to do that than customizing one of Squarespace’s block to neatly display them?

This customization is perfect for when you’re using blog posts inside a blog page for each of your episode, since we’ll be customizing the Summary Block to make it look more… “podcast-y”.

Keep in mind this customization is a bit more advanced than others you’ve seen on this blog, but fret not because it’s still broken down in step-by-step so you can understand what’s going on!

Let’s do this!

Creating a podcast-style Summary Block

We’re going to start off by creating a Summary Block List that’s linked to our podcast blog page.

I set mine to showcase title, excerpt and thumbnail and made the thumbnail square and 21%.

You can use any settings you like!

1. Using the Summary Block List.png

The first thing I want to do is give these episodes some color, so I’m going to look through my Inspect Element window to see what each item or row is called so I can apply a nice background.

2. Selecting list row in summary block.png

On the right side, I can see the exact sections I want to modify have already been targeted and some styles have been applied, so I’ll just reuse the selectors from there instead of building my own.

3. Selecting classes for row in summary block.png
4. Inspect element summary block.png

I’ll paste that selector into my Custom CSS window and add a random background color to see what it looks like.

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
  background: #ebebeb;
}
5. Adding background color summary block list.png

Good, but I want to get rid of that bit of spacing in between rows.

Checking with Inspect Element again I can see there’s a padding and a margin…

6. Targeting padding and margin.png

…so I’ll set both to 0 inside the same snippet from before.

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
  background: #ebebeb;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
8. Removing margin.png

Perfect!

Now, since I’m going to have these rows stuck together, I think it’s going to look much better if I add an alternating background color (and also, not grey).

To make this semi-automatic, I’m going to be using a pseudo-class (like :hover) called :nth-child() and I’m going to be using it to select all the ODD or EVEN children/items/rows in the block.

This way, as more episodes load in the summary block, they will be automatically colored depending on if they’re odd or even.

I already know what each row is called because it’s the same selector we used to set the same background (the #ebebeb) to all of them and to remove the margin and padding, so this is what my snippet will look like:

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(odd) {

}

And once I give that a background color, this will be the result:

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(odd) {
  background: #CCD1C9;
}
10. Alternated background summary block list.png

Alright, we’ll do the same thing for the even rows, we just need to switch odd for even in our selector and choose a different color.

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(even) {
  background: #DADED1;
}
11. Alternated background color summary block list.png

Ok!

How about we add some padding to the content portion? It looks too close to the edge right now.

Looking through Inspect Element I can see the content has already been targeted and styles set for it, so I’m going to use that one instead of creating my own.

12. Selecting meta container.png

And I’ll give it about 20px of padding on all sides.

.sqs-gallery-design-list .sqs-gallery-meta-container {
  padding: 20px;
}
13. Adding padding to container.png

Nice!

Now, I feel the whole block is way too wide, so I could use spacers to shrink it down but I rather set a max-width so it adapts nicely to smaller screens without getting TOO narrow.

Let’s check what the entire container is called:

14. Selecting summary block list.png

It has a bunch of classes but we don’t need them all so I’m going to use that last one .sqs-gallery-design-list and give it a max-width of 600px.

.sqs-gallery-design-list {
  max-width: 600px;
}
16. Max width for summary block list.png

And to center it, I’m going to use margin: 0 auto;.

.sqs-gallery-design-list {
  max-width: 600px;
  margin: 0 auto;
}
17. Centering summary block list.png

This is looking great already!

Let’s separate the images a bit from the borders. I’m going to give them an all around margin of 10px.

Through Inspect Element we can see there’s already a selector group we can use to target the thumbnail.

18. Selecting image container summary.png

So let’s put that into our CSS window!

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
  margin: 10px;
}
19. Adding margin.png

As you can see, adding that extra spacing made the content stack below the thumbnail.

To put it back in place, instead of adding a fixed width to it I’m going to be making the container holding both the thumbnail and the meta content flex.

This will make both elements sit nicely next to each other, and still let us adjust the size of the thumbnail through the block settings!

We already know what that container is called since we gave it the background color, so I’m going to go back into that snippet from before and set it to flex:

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
}
21. Using flex.png

Cool, right? However we have a slight issue on smaller screens…

22. Summary block mobile.png

It’s not that big of a deal but I prefer to have the image and text center aligned horizontally, so I’ll go back to my flex container and make that happen through align-items:

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
}
23. Aligning content and image.png

Yes, muuuuch better!

So you can leave the customization here, since you already have a nice looking list block, however I will be moving on to adding a couple more details that will make this list block look unrecognizable!

Adding a fake play button

Since this block is being customized for podcasts, its only logical to add some sort of button that has a play arrow or literally says play.

I’ll be creating the latter and placing it over the thumbnail.

I already know what the thumbnail is called since we added a margin around it, so I’ll be adding the extra play button to it through an ::after pseudo-element.

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {

}

As for the content I’ll make it say PLAY, set the font to bold, white, 14px in size, and also add a thin white border, a slightly transparent white background and make it round.

This is what that translates to:

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {
  content: 'PLAY';
  font-weight: bold;
  color: #fff;
  font-size: 14px !important;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
25. Creating play button.png

I’ll be making it display block and changing its position to absolute to be able to move it on top of the image.

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {
  content: 'PLAY';
  font-weight: bold;
  color: #fff;
  font-size: 14px !important;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: block;
  position: absolute;
}
26. Positioning play button.png

Perfect, now we can move it.

We can set the left and top offset as 50%.

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {
  content: 'PLAY';
  font-weight: bold;
  color: #fff;
  font-size: 14px !important;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
}
27. Centering play button.png

And now let’s use transform to pull it both a bit upwards and to the left from where it is right now.

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {
  content: 'PLAY';
  font-weight: bold;
  color: #fff;
  font-size: 14px !important;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
28. Using transform.png

Ok, let’s make it bigger by adding a fixed height, some padding and editing the line height.

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {
  content: 'PLAY';
  font-weight: bold;
  color: #fff;
  font-size: 14px !important;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  height: 33px;
  line-height: 2.2em;
}
29. Editing button.png

Ok. There seems to be something going on, since the play button is not quite in the center of the image yet.

Looking through the backbone we can see there’s some padding to the right of the thumbnail so let’s get rid of it.

30. Looking through Inspect Element.png

I’ll use the selector that we already have ready to use on the right side of the window.

.sqs-gallery-design-list .sqs-gallery-image-container {
  padding-right: 0;
}
31. Removing padding.png

Nice!

Lastly, I want to add pointer-events none to the button, since I don’t want it to be on the way of the clickable thumbnail.

So our fake play button snippet will now look like this:

.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {
  content: 'PLAY';
  font-weight: bold;
  color: #fff;
  font-size: 14px !important;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  height: 33px;
  line-height: 2.2em;
  pointer-events: none;
}

Beautiful!

Adding a heading or label to the summary block

To take this customization to the next level, I want to add a heading or a label to the top of the entire summary block to add the name of the podcast!

To do this, I’ll target one of the wrappers holding the episodes.

33. Inspect element.png

And I’ll create a pseudo-element for it that sits before the content of the block.

.summary-item-list-container.sqs-gallery-container::before {
  
}

As for the content, I’ll give it some text.

.summary-item-list-container.sqs-gallery-container::before {
  content: 'FULL BLOOM PODCAST';
}
35. Content for pseudo element.png

Next, I’ll give it a background (the same as for the even rows) and some padding.

.summary-item-list-container.sqs-gallery-container::before {
  content: 'FULL BLOOM PODCAST';
  background: #DADED1;
  padding: 20px;
}
36. Style for pseudo element.png

Depending on the style you’re after you can then set it as display: block; if you want it to span the full width of the block…

.summary-item-list-container.sqs-gallery-container::before {
  content: 'FULL BLOOM PODCAST';
  background: #DADED1;
  padding: 20px;
  display: block;
}
37. Style option for pseudo element.png

…or inline-block if you want it to look more like a tab.

.summary-item-list-container.sqs-gallery-container::before {
  content: 'FULL BLOOM PODCAST';
  background: #DADED1;
  padding: 20px;
  display: inline-block;
}
38. Second style option for pseudo element.png

And finally, I’ll make the font bolder!

.summary-item-list-container.sqs-gallery-container::before {
  content: 'FULL BLOOM PODCAST';
  background: #DADED1;
  padding: 20px;
  display: block;
  font-weight: bold;
}
39. Styling font.png

And here’s the final result!

40. Final result desktop.png
41. Final result tablet.png
42. Final result phone.png

Phew! That was a very long customization but oh so worth it!

Congratulations on making it ‘til the end, you rock!!

Until next time,

B.

 

Full code

/*LAYOUT & BACKGROUND COLOR*/
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(odd) {
  background: #CCD1C9;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item:nth-child(even) {
  background: #DADED1;
}
.sqs-gallery-design-list .sqs-gallery-meta-container {
  padding: 20px;
}
.sqs-gallery-design-list {
  max-width: 600px;
  margin: 0 auto;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
  margin: 10px;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
}
.sqs-gallery-design-list .sqs-gallery-image-container {
  padding-right: 0;
}

/*FAKE PLAY BUTTON*/
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item.summary-item-record-type-video .summary-thumbnail-container::after,
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container::after {
  content: 'PLAY';
  font-weight: bold;
  color: #fff;
  font-size: 14px !important;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  height: 33px;
  line-height: 2.2em;
  pointer-events: none;
}

/*TOP LABEL*/
.summary-item-list-container.sqs-gallery-container::before {
  content: 'FULL BLOOM PODCAST';
  background: #DADED1;
  padding: 20px;
  display: inline-block;
  font-weight: bold;
}