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.
Styling the caption font (7.1) - Gallery Section Slideshow Full
Not a fan of the native font look of the Slideshow Full slide captions in Squarespace 7.1? Then get your hands on this snippet and set up your own custom font family, size, color, etc in no time.
Styling the arrows (round) (7.1) - Slideshow Gallery Slideshow Full
Change up the style of the Slideshow Full layout arrows with this copy/paste code snippet! You’ll be able to modify the size, color, weight and roundness of these elements, to keep things consistent with your site’s design, in just a few steps.
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.
Styling the caption font (7.1) - Gallery Section Slideshow Reel
Not a fan of the native font look of the Slideshow Reel slide captions in Squarespace 7.1? Then get your hands on this snippet and set up your own custom font family, size, color, etc in no time.
Styling the arrows (round) (7.1) - Gallery Section Slideshow Reel
Change up the style of the Slideshow Reel arrows with this copy/paste code snippet! You’ll be able to modify the size, color, weight and roundness of these elements, to keep things consistent with your site’s design, in just a few steps.
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.
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.
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.
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.
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.
Custom burger button for mobile (7.1) - 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.1, 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.
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.
Alternative image on hover (7.0 & 7.1 CE) - Image Block Inline
Set up an alternative image on hover mode for Inline Image Blocks with this copy/paste code. The snippet will allow you to set any image you want just with its URL, and it’ll take care of the rest of the animation for you.
Fixed font size (7.0 & 7.1 CE) - Image Block Poster
Not a fan of the changing font size for the Poster Image Block content area? This copy/paste code snippet can help with that! You’ll be able to set a fixed font size for the title, subtitle AND button of all your poster blocks across Squarespace.
Custom font for title (7.0 & 7.1 CE) - Image Block Poster
Make the title of your Poster Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
Custom font for subtitle text (7.0 & 7.1 CE) - Image Block Poster
Make the subtitle text of your Poster Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!
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.
Alternative image on hover (7.0 & 7.1 CE) - Image Block Poster
Set up an alternative image on hover mode for Poster Image Blocks with this copy/paste code. The snippet will allow you to set any image you want just with its URL, and it’ll take care of the rest of the animation for you.
Corner button design (7.0 & 7.1 CE) - Image Block Poster
Create a unique look for your Poster Image Block with this code snippet. You’ll be able to set up the majority of the styles through your regular Site Styles panel, and then control the corner button styles through the code by modifying the existing CSS properties, removing some of them, or adding your own.
Keeping horizontal layout on mobile (7.0 & 7.1 CE) - Image Block Card
Depending on how you’re using Card Image Blocks, you may be looking into how to keep the content and the image in a horizontal layout at all times. If that’s the case, this code snippet is for you! With a quick copy/paste you’ll be able to maintain everything side-by-side even on smaller devices, and control the width each part should have.