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.1, Title/Caption Beatriz Caraballo All CSS tricks, 7.1, Title/Caption Beatriz Caraballo

Adding a description (7.1) - Portfolio Page Grid Overlay

Get your hands on this code snippet to add a little description under the title of your Portfolio Page items, when set to the Grid: Overlay layout! Include any text you like, and modify, add or remove CSS properties from the code to style the color, font size, font family and any other font styles you want.

Read More
All CSS tricks, Social icons, 7.0, 7.1, Vertical stuff Beatriz Caraballo All CSS tricks, Social icons, 7.0, 7.1, Vertical stuff Beatriz Caraballo

Vertical floating icons with line (7.0 & 7.1) - Social Links Block

Set your Social Links Block as a vertical floating stylish element on your Squarespace site with this copy/paste code snippet! You’ll be able to alter the look of the vertical line, as well as adjust the position of the whole floating element to make it match the look you’re going for.

Read More

Custom color regular style (7.0, 7.1 CE & 7.1 FE) - Social Links Block

Looking to have full control over the colors of your Regular-style Social Links icons? Then snag this snippet and copy/paste it on your site! You’ll be able to set up the colors for the icons for every state of the hover mode to make sure your block looks completely on brand.

Read More

Custom color outline style (circle, square & rounded) (7.0, 7.1 CE & 7.1 FE) - Social Links Block

Get your hands on this code snippet and take full control of the colors of your Outline-style Social Links icons! Choose the border color, the background color on hover and and the color of the icons in the different states of the hover mode.

Read More

Custom color knockout style (circle, square & rounded) (7.0, 7.1 CE & 7.1 FE) - Social Links Block

Looking for a way to change up the different colors used for the Knockout-style Social Links on your site? Then this code snippet is for you! You’ll be able to choose the background color as well as the color of the icons in all instances of the hover animation.

Read More

Custom color solid style (circle, square & rounded) (7.0, 7.1 CE & 7.1 FE) - Social Links Block

Want to fully customize the different color changes of the Social Links Block on your site? With this code snippet you’ll be able to make that happen! You’ll be able to choose the background color as well as the color of the icons in all instances of the hover animation.

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

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

Use this short code to style the title of the Grid Summary Blocks on your site! Change 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, 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