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.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
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

Turning the Gallery Block title into a colorful label (7.0, 7.1 CE & 7.1 FE)

If you’re using a Gallery Block as category thumbnails for your blog, to redirect to your different service packages, or anything else that works best with an identifying label, you’re gonna love today’s customization! We’ll be turning the Gallery Block slide titles…

Read More