The Codebase
Filter through all the code
Find the Squarespace tutorial, plugin or snippet that’s going to help you fix or customize your client’s site in a heartbeat.
Styling the read more link (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall
Ah yes, the “Read More” links. If you’re looking to change the ones inside your Wall Summary Block and turn them into a button, this snippet is for you! Just copy/paste the code and you’ll be able to alter the colors, border, border-radius and anything else you want to make them as prominent as you need them to be!
Styling the primary metadata (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall
Want to add some life to the categories, tags, author or any other primary metadata you have showing up in your existing Wall Summary Block? Then grab this snippet to help you target that text and set up your own color, font family, font size or anything else you want!
Styling the secondary metadata (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall
Style the secondary metadata of your Wall Summary Blocks with this copy/paste code. Change up the color, the font family, the font size, its weight or anything else you need by simply adding and/or removing properties from the snippet.
Styling the thumbnail (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall
Looking to style the thumbnail of Wall Summary Blocks on your Squarespace site? Then look no further! This code snippet will allow you to target that specific area of your summary items so you can apply a border, a drop shadow, round the corners, or implement any other style you need to match your site’s design.
Styling the content area (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall
Need to style the content area of your Wall Summary Block? Then snag this code snippet to help you out! You’ll be able to give it a background color, set up a border, or apply any other style you want to those specific parts of your summary items.
Adding an icon to the content area (7.0 & 7.1 CE) - Image Block Poster
Spruce up your Poster Blocks with this copy/paste snippet that’ll allow you to add a simple hover mode overlay, as well as a custom icon right above the text.
One-way sliding underline on hover for button blocks (7.0, 7.1 CE & 7.1 FE)
We haven’t really covered a lot of button customizations on the blog, so I thought I’d share one with you today! The final effect makes it seem like the underline loops around the button, so it’s a pretty cool effect. The code isn’t too complicated AND is flexible enough to allow you to target one particular button size or all at the same time. So, let’s get started!
How to create a simple timeline in Squarespace (7.0, 7.1 CE & 7.1 FE)
In today’s tutorial, we’ll be going through how to build a simple timeline in Squarespace, that’ll be incredibly easy for you and your clients to update.
Creating cool text effects in Squarespace with CSS (7.0, 7.1 CE & 7.1 FE)
This is a fun one! Today we’ll be looking at how we can create 3 awesome text effects in Squarespace, with just a little bit of CSS.
Fixing uneven spacing inside a narrow Squarespace section with one block (7.0 & 7.1 CE)
In today’s post, we’ll be tackling a quick fix to help you even out the misalignment on those thinner index/page sections, where there’s only one block involved.
Changing the placeholder text color of form and newsletter blocks (7.0, 7.1 CE & 7.1 FE)
A few members inside the Club recently asked about how the placeholder text color of form and newsletter blocks could be altered via CSS so, in case you’ve been wondering the same thing, today I wanted to share with you how to achieve that for your own client projects!
Adding a fun twist to poster blocks (7.0 & 7.1 CE)
Recently, I was testing a couple of customizations in 7.1 and ended up with a pretty cool one that I’d like to share with you today!
How to adjust your page/index section height on mobile (7.0 & 7.1 CE)
If you like creating really immersive designs for your clients, chances are you love setting your index sections (7.0) or page sections (7.1) to the full height of your screen. The effect looks amazing on desktop but, on smaller screens, that extra space can be a little bit too much…
How to create responsive equal height columns in Squarespace (7.0 & 7.1 CE)
Spacers, image blocks, fixed height, and min-height values. Those are just a couple of workarounds that help a little bit when trying to create 3 equal-height columns inside a client’s site. However, there’s a better way…
Simple pricing tables without HTML (7.0 & 7.1 CE)
So, you’re working on a client site and are looking to showcase their different service/product packages via pricing tables, but don’t want to use HTML? Then take a look at a simple alternative!
Turning a header into outline text in Squarespace (7.0, 7.1 cE & 7.1 FE)
Today’s tutorial is a fun little trick inspired by a question asked by a member inside the Club. We’ll be looking at how you can turn any heading on your client’s site into outline text! This will be a quick one, so let’s dive right into it!
Adding an image to buttons in Squarespace (7.0, 7.1 CE & 7.1 FE)
Have you ever wanted to add something extra to Squarespace buttons to make them look a bit more custom with very little effort? If so, today’s CSS trick is for you!
Creating an off-center animated background for collage blocks (7.0 & 7.1 CE)
In a previous post, we saw how we could tweak the collage block with veeeery little code to give the content side a nice border. But, today, I want to show you how we can take that tweak to the next level with the help of our friend: the pseudo-element.
Adding an image behind a heading in Squarespace (7.0, 7.1 CE & 7.1 FE)
For today’s CSS trick, we’ll go through how you can add an image as a background to headings on your site, so you can create a more custom design without having to sacrifice the benefits of using real text!
Creating an editorial look with overlap image blocks (7.0 & 7.1 CE)
Let’s take a look at another cool way you can use code in your client designs to make things look more, for a lack of a better word, “editorial” using the Overlap Image Block.