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, Overlap stuff, Title/Caption Beatriz Caraballo All CSS tricks, 7.0, 7.1 CE, Overlap stuff, Title/Caption Beatriz Caraballo

Adding an extra title and overlapping the button of an overlap image block (7.0 & 7.1 CE)

If you’re into overlapping stuff in your client sites, I know you’re going to really enjoy today’s fun tutorial. It’s all about taking the overlap image block design one step further, with very little code, to create a look I’m 90% sure you’ve seen before while perusing Pinterest: an image with an overlapping title, a secondary title, text and an overlapping button.

Read More

How to align footer text to the center in mobile screens (Brine 7.0)

Have you ever wanted to center-align text inside your footer in smaller screens while keeping it left or right-aligned in tablets and desktop? The process and code are quite simple BUT, particularly when you originally have text aligned to the right there are additional steps required to have full control over the mobile result.

Read More
All CSS tricks, Customization tips, 7.0, Color change, Background Beatriz Caraballo All CSS tricks, Customization tips, 7.0, Color change, Background Beatriz Caraballo

Changing the background color of the bottom header on just one page in Brine (7.0)

When you’re working with the Brine template, and you’re using the bottom header, the navigation can overlap nicely over banner images, but that means you have to settle for a “backgroundless” header in all of the non-banner pages… or do you?

Read More
Mobile design, All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo Mobile design, All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo

Controlling gallery block grid images per row in mobile (7.0, 7.1 CE & 7.1 FE)

I want to walk you through a nifty little CSS trick that you can use to rearrange your gallery block grid images in smaller devices, so you can choose how many thumbnails or slides to display per row!

Read More
All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE, 7.1 FE, Fonts, Spacing Beatriz Caraballo All CSS tricks, Customization tips, 7.0, 7.1, 7.1 CE, 7.1 FE, Fonts, Spacing Beatriz Caraballo

How to create a multi-column text block in Squarespace, without using separate blocks (7.0, 7.1 CE & 7.1 FE)

This depends on the font you’re using and the styles you’ve set for it, but most often than not, you feel you need just a bit more space between both columns. The problem is if you shove a spacer in there, the gap looks more like an airport runway than anything else.

Read More

Creating a bold Index Gallery slideshow (Brine 7.0)

In a previous tutorial we saw how we can customize the Index Gallery slideshow in Squarespace to add fancy new arrows and subtly switching up the layout of the description portion. In today’s tutorial, we’re going to take a similar approach…

Read More

How to target entire blog pages vs individual blog posts (7.0 & 7.1)

If you’re using blog pages on your client site for different purposes, you may want to be able to customize the content (posts) of just ONE of those blog pages and not the other. A very common situation is when you have a blog page as an actual blog, and another blog page as a portfolio to showcase previous work.

Read More
#22daysofcustomization, All CSS tricks, 7.0, 7.1, Sticky element Beatriz Caraballo #22daysofcustomization, All CSS tricks, 7.0, 7.1, Sticky element Beatriz Caraballo

Add a floating 'Book Now' button to Squarespace (7.0 & 7.1)

If you’re running or working on a business website, you’ll surely find today’s customization pretty handy! Besides back to top buttons, an extra menu header, and a custom social icons header, there are other types of floating elements you can add to your…

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

Grayscale to color hover mode for image blocks (7.0 & 7.1 CE & 7.1 FE)

Adding a hover effect to image blocks can be a fun way to spice up your client’s design without too much hassle. So today, we’re going to be looking at how we can give a really cool grayscale to color + rotating + scaling effect to any images of your site on hover!

Read More

Create a "boxed-in" header in Squarespace (Brine 7.0)

It seems like there’s not enough creativity in the world to come up with a unique way to set up your nav bar… especially in Squarespace, and particularly if you’re using the Brine template. Which seems silly, since all of the templates from the Brine…

Read More
#22daysofcustomization, All CSS tricks, Fields, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo #22daysofcustomization, All CSS tricks, Fields, 7.0, 7.1, 7.1 CE, 7.1 FE Beatriz Caraballo

Customize Squarespace forms (7.0, 7.1 CE & 7.1 FE)

If you’re using Squarespace forms on your site – instead of or along with other information collection methods like Dubsado – then today’s tutorial is for you! Because if you’re looking to make your site more on-brand or unique, customizing your Squarespace forms…

Read More

Creating big category thumbnails with a rollover effect (Brine 7.0)

Today we’re going to be taking advantage of the grid layout of an Index Gallery to create big and bold category thumbnails that you can use to showcase your different service packages, blog categories, photo galleries, or pretty much anything else you want!

Read More

Add custom 'Read More' links to your Summary Blocks (7.0, 7.1 CE & 7.1 FE)

Have you ever wished you could replace the ‘Read More‘ link from your Summary Blocks for something else? Not just change its color and turn it into a button, but actually change what it says and… why not, change it for a custom image?!

Read More