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, 7.1 CE, 7.1 FE, Carousel/slideshow controls Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Carousel/slideshow controls Beatriz Caraballo

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.

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

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.

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

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.

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

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.

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

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.

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

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.

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption, Fonts Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Title/Caption, Fonts Beatriz Caraballo

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!

Read More
All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Even height, Title/Caption Beatriz Caraballo All CSS tricks, 7.0, 7.1, 7.1 CE, 7.1 FE, Even height, Title/Caption Beatriz Caraballo

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.

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

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.

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