The Codebase

Browse all Resources!

Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.

All CSS tricks, 7.1, Title/Caption, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Title/Caption, Hover/overlay Beatriz Caraballo

Simple caption rollover (image resize) (7.1) - Gallery Section Slideshow Simple

Add a quick and simple caption overlay to your Slideshow Simple in Squarespace 7.1. This snippet will allow you to work with the native Caption option, and you’ll get to control the background color, the border styles and even the padding, to keep those longer titles in check at all times.

Read More
All CSS tricks, 7.1, Carousel/slideshow controls Beatriz Caraballo All CSS tricks, 7.1, Carousel/slideshow controls Beatriz Caraballo

Displaying slide numbers instead of image thumbnails (7.1) - Gallery Section Slideshow Simple

Instantly create a clean and minimal look for your Slideshow Simple Gallery Sections in Squarespace 7.1 by swapping the native thumbnails with number indicators. This code snippet will also give you the ability to change the numbers’ family, weight, size, and color, as well as decide whether they should show up on mobile devices or not!

Read More
All CSS tricks, 7.1, Title/Caption, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Title/Caption, Hover/overlay Beatriz Caraballo

Simple caption rollover (7.1) - Gallery Section Slideshow Full

Add a quick and simple caption overlay to your Slideshow Full sections in Squarespace 7.1. This snippet will allow you to work with the native Caption option, and you’ll get to control the background color, the border styles and even the padding, to keep those longer titles in check at all times.

Read More
All CSS tricks, 7.1, Title/Caption, Hover/overlay Beatriz Caraballo All CSS tricks, 7.1, Title/Caption, Hover/overlay Beatriz Caraballo

Simple caption rollover (7.1) - Gallery Section Slideshow Reel

Add a quick and simple caption overlay to your Slideshow Reels in Squarespace 7.1. This snippet will allow you to work with the native Caption option, and you’ll get to control the background color, the border styles and even the padding, to keep those longer titles in check at all times.

Read More
All CSS tricks, Mobile design, 7.0 Beatriz Caraballo All CSS tricks, Mobile design, 7.0 Beatriz Caraballo

Custom burger button for mobile (Brine 7.0) - Header nav

If you’re looking to go the extra mile with your site’s customization and be able to use your own custom burger button in Squarespace 7.0 (Brine family), this is the snippet for you! You’ll be able to replace the native lines in no time and showcase your branded version by simply using the image’s URL.

Read More
All CSS tricks, 7.0, Tagline Beatriz Caraballo All CSS tricks, 7.0, Tagline Beatriz Caraballo

Stacked tagline under logo (Brine 7.0) - Header nav

Reorganize the way the logo and tagline display on your Squarespace 7.0 (Brine family) project with this short code. Regardless of the position of your logo + tagline within the header area, you’ll be able to adapt the snippet to make it work for your specific situation, and have the two elements stack in just a few minutes.

Read More
All CSS tricks, Background, 7.0 Beatriz Caraballo All CSS tricks, Background, 7.0 Beatriz Caraballo

Background color for top header on one page (Brine 7.0) - Header nav

If you want to add a background color to the Top Header of some pages inside your Squarespace 7.0 site (Brine family), this copy/paste code is for you. You can set any kind of color code you want for the specified pages, and have your nav stay transparent (or use a different color) on all other pages.

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

Sliding lines on hover for nav links (Brine 7.0) - Header nav

Looking to add a little something to your navigation links in Squarespace (Brine 7.0)? Then grab this quick code snippet to add a simple yet interesting-looking hover effect! You’ll get two sliding lines, of the color and thickness of your choice, marking the link your user is hovering over while on desktop devices.

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

Sliding lines on hover for nav links (7.1) - Header nav

Looking to add a little something to your navigation links in Squarespace? Then grab this quick code snippet to add a simple yet interesting-looking hover effect! You’ll get two sliding lines, of the color and thickness of your choice, marking the link your user is hovering over while on desktop devices.

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, Overflow issue, Title/Caption Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, Overflow issue, Title/Caption Beatriz Caraballo

Stop text from overflowing (7.0 & 7.1 CE) - Image Block Poster

Annoyed at the content of those Poster Image Blocks shooting out of the image on smaller screens? Then this snippet is for you. Copy/paste this quick fix to keep long text in line (no pun intended) and get rid of this frustrating overflow issue across your Squarespace site.

Read More