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, Customization tips Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, 7.1 FE, Customization tips Beatriz Caraballo

Product item button - Summary block (7.0, 7.1CE & 7.1FE)

If you’re working with a Summary Block linked to a product/shop page and you’re wanting to display something like the native “Read More” button to lead to the item’s details, this is the snippet for you! You’ll have the ability to choose the text that gets displayed, the color of the button and the style of its font, to make sure everything matches the rest of your site.

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look Beatriz Caraballo

Minimal poster style (7.0, 7.1 CE & 7.1 FE) - Summary Block

Looking to create an Auto Layout-y style for your Grid Summary Blocks in Squarespace? Then get your hands on this poster-inspired code snippet to achieve a clean and minimal look for those blocks on your site. You’ll be able to tweak the title of the summary items to match your brand, adjust the background color of the slides and make the hover mode shadow and shift as subtle or bold as you like!

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look Beatriz Caraballo

Minimal rounded fields style (7.0, 7.1 CE & 7.1 FE) - Newsletter Block

Get a sleek one-line look for your Newsletter Block, with rounded fields, with this code snippet! You’ll be able to copy/paste your way into this minimal look in just a few minutes, and tweak the spacing, roundness and shadow of the fields with a couple of clicks.

Read More

Looping rotating words effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE)

Want to create a looping rotating effect for a heading on your client project? Then take a look at how you can easily achieve that with an awesome plugin!

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look, 12 Days of Christmas Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Cool look, 12 Days of Christmas Beatriz Caraballo

Creating collapsible form sections in Squarespace (7.0, 7.1 CE & 7.1 FE)

Today’s tutorial is a really useful one, especially if you have to deal with large-ish form blocks on a regular basis when building your client sites. We’ll be using a crafty little trick to HIDE parts of a form when the page loads, and then reveal those hidden fields on click, almost like an accordion block!

Read More

Changing the accordion block icon when a dropdown is open (7.0, 7.1 CE & 7.1 FE)

If you want to add a little fun customization to your client’s accordion block, then this tutorial is for you! We'll be looking at how to use two custom icons for the accordion block items in Squarespace: one when the dropdowns are open and a different one when they are closed. Spoiler alert: the customization is easier than you think!

Read More

Adding custom icons to the Accordion Block in Squarespace (7.0, 7.1 CE & 7.1 FE)

In today's tutorial, we'll be looking at how to change the arrow or plus sign inside the accordion block for a custom icon. We'll tackle how to use the same image for ALL accordion items, and how to use a DIFFERENT icon for each individual dropdown!

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

Long border illusion (7.0 & 7.1 CE) - Image Block Stack

Add a sleek look to your Stack Image Blocks in Squarespace with this copy/paste code snippet. It’ll create a lovely minimal border design, wrapping your content and underlapping the image, and give you full control over its styles in terms of color, thickness, and “narrowness”!

Read More

Add custom bullet points to text blocks and image blocks in Squarespace (7.0, 7.1 CE & 7.1 FE)

Want to create branded bullet points for your client’s site? Then take a look at this tutorial to learn how you can make that happen, only with CSS, for both text blocks and image blocks!

Read More