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.
Full width for bottom blocks (Brine 7.0) - Footer section
Looking to expand that block you have sitting inside the Bottom Footer area of your Brine 7.0 site? Then get your hands on this code snippet to make it happen right away!
Styling the arrows (round) (7.0, 7.1 CE & 7.1 FE) - Gallery Block Slideshow
Customize the arrows of your Slideshow Gallery Block with this code snippet. You’ll have the ability to adjust their background color, border style, roundness and size!
Styling the arrows (full height) (7.0, 7.1 CE & 7.1 FE) - Gallery Block Slideshow
Add a stylish look to your Gallery Slideshow with this code snippet! It’ll allow you to set up the native arrows on the sides of the slides, matching the height of the full carousel, and giving you control over the background color and border styles to better match your brand.
Styling the arrows (bottom corner) (7.0, 7.1 CE & 7.1 FE) - Gallery Block Slideshow
If you’re looking to add a cool customization to your Slideshow Galleries, this snippet can help! It’ll help you style the native control arrows in a completely different fashion, by placing them at the bottom of the slides and giving you full control over their alignment, background color and border styles.
Positioning thumbnails over slides (7.0, 7.1 CE & 7.1 FE) - Gallery Block Slideshow
If you like the style of Squarespace’s Gallery Slideshow but want to make it look less template-y, this snippet can help you out! It’ll allow you to move the native thumbnails over the slides, instead of keeping them underneath, and add either a solid or slightly transparent background to the area to change up the look of the block in a heartbeat.
Turning the thumbnails into indicators (7.0, 7.1 CE & 7.1 FE) - Gallery Block Slideshow
Swap the native thumbnails from your Slideshow Gallery for little dot indicators with this copy/paste snippet. You’ll be able to adjust their roundness, color and size in just a few minutes!
Styling the arrows (round) (7.0, 7.1 CE & 7.1 FE) - Gallery Block Carousel
Customize the arrows of your Carousel Gallery Block with this code snippet. You’ll have the ability to adjust their background color, border style, roundness and size!
Styling the arrows (full height) (7.0, 7.1 CE & 7.1 FE) - Gallery Block Carousel
Add a stylish look to your Gallery Carousels with this code snippet! It’ll allow you to set up the native arrows on the sides of the slides, matching the height of the full carousel, and giving you control over the background color and border styles to better match your brand.
Styling the arrows (bottom corner) (7.0, 7.1 CE & 7.1 FE) - Gallery Block Carousel
If you’re looking to add a cool customization to your Carousel Galleries, this snippet can help! It’ll help you style the native control arrows in a completely different fashion, by placing them at the bottom of the slides and giving you full control over their alignment, background color and border styles.
Adding gaps between slides (7.0, 7.1 CE & 7.1 FE) - Gallery Block Carousel
If you’re working with the Carousel Gallery Block and can’t find a way to add spaces between the slides or images, look no further! This copy/paste code snippet will take care of it for you, while giving you full control on the actual amount of space that should be present.
Styling the title font (7.0, 7.1 CE & 7.1 FE) - Gallery Block Grid
Use your own custom font on the Grid Gallery Block slide titles of your Squarespace site with the help of this snippet. You’ll get the ability to change the font family, color, size, weight, etc to match your brand and design in just a few mins!
Styling the title area (even height) (7.0, 7.1 CE & 7.1 FE) - Gallery Block Grid
Customize the title box under your Grid Gallery Block slides with this copy/paste code. You’ll be able to modify the background color, border style and padding of those little sections, to make them as prominent or subtle as you need to, in order to match your design’s vision. Plus! You’ll automatically get them to match in height with the rest of the slides on the row, to achieve that even look you’re going for.
Stopping long titles from getting cut off (7.0, 7.1 CE & 7.1 FE) - Gallery Block Grid
If you know, you know. This code snippet will help you fix this commonly frustrating issue for your Grid Gallery Blocks in Squarespace, so your slide titles no longer get cut-off at the edge of the image, but instead display fully.
Simple title rollover (7.0, 7.1 CE & 7.1 FE) - Gallery Block Grid
Add a quick and simple title rollover to your Grid Gallery Blocks in Squarespace. This snippet will allow you to work with the native Title of the slides, and you’ll get to control the background color, the border styles and even the padding, to make sure the spacing around the text fits your requirements.
Grayscale to color on hover (7.0, 7.1 CE & 7.1 FE) - Gallery Block Grid
Want to add a simple but eye-catching hover mode to your Grid Gallery Block? How about a grey-to-color effect? This short snippet will allow you to set it up in a cinch by simply copy/pasting the code into your site.
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.
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.