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.

All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Metadata, Fonts Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Metadata, Fonts Beatriz Caraballo

Styling the primary metadata (7.0, 7.1 CE & 7.1 FE) - Summary Block List

Want to add some life to the categories, tags, author or any other primary metadata you have showing up in your existing List 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!

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Even height Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Even height Beatriz Caraballo

Styling the content area (even height) (7.0, 7.1 CE & 7.1 FE) - Summary Block List

If you want to add something like a background color or a border to the content side of your List Summary Block items, AND make sure that the image thumbnail has the same height, this snippet is for you. Copy/paste the code into your site and you’ll be able to pull off the even height look across all of this kind of block across your site!

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Read more links, Fonts Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Read more links, Fonts Beatriz Caraballo

Bottom-aligning 'Read More' links (7.0, 7.1 CE & 7.1 FE) - Summary Block List

So, you’re working with the List Summary Block but your text is fairly short (compared to the height of your image) and you’re wanting to balance things out by aligning the ‘Read More’ link to the bottom of the thumbnail? I gotchu! Use this little snippet to make that happen.

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Title/Caption, Fonts Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Title/Caption, Fonts Beatriz Caraballo

Styling the title font (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall

With this short code you’ll be able to style the title of the Wall Summary Block in a heartbeat! Switch up the color, the font size, the font family and apply any other font styles you want by simply copy/pasting the snippet and adjusting the properties to your needs.

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Title/Caption, Fonts Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Title/Caption, Fonts Beatriz Caraballo

Styling the excerpt text (7.0, 7.1 CE & 7.1 FE) - Summary Block Wall

Need to change up the look of the excerpt text for Wall Summary Blocks? Then look no further. This code snippet will allow you to style the font however you want by changing its color, size, weight and any other font property in just a few minutes!

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Read more links, Fonts Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Read more links, Fonts Beatriz Caraballo

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!

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Metadata, Fonts Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Metadata, Fonts Beatriz Caraballo

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!

Read More
All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Borders and shadows Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Borders and shadows Beatriz Caraballo

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.

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Hover/overlay Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Hover/overlay Beatriz Caraballo

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!

Read More
All CSS tricks, Customization tips, 7.0, 7.1, Learn code Beatriz Caraballo All CSS tricks, Customization tips, 7.0, 7.1, Learn code Beatriz Caraballo

5 tips to troubleshoot your Squarespace code

In today’s video, I want to share with you 5 different things you can look for when the code you added to your client’s Squarespace site isn’t working. These troubleshooting tips cover a vast majority of the issues you’ll encounter when using code in Squarespace or any other platform, so let’s jump right in!

Read More