Wondering if there’s a way to make Squarespace’s scrolling block background match the wavy pattern you’re using? Wonder no more! Find out how to make it happen.

Add an awesome custom look to the Footer area of your 7.0 (Brine) site with this short code! The snippet will allow you to set up any background image you like, and decide how much it should stretch to cover the space behind your content.

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.

Have you ever wanted to add something extra to Squarespace buttons to make them look a bit more custom with very little effort? If so, today’s CSS trick is for you!

To celebrate the beginning of summer, I thought I’d share with you a quick customization that you can adapt for your client’s design to give its nav a really awesome, “melted”, look!

In a previous post, we saw how we could tweak the collage block with veeeery little code to give the content side a nice border. But, today, I want to show you how we can take that tweak to the next level with the help of our friend: the pseudo-element.

Have you ever seen those gorgeous site examples where everything seems to just float on top of the background image while scrolling? Well, if you’ve been inspired by them at some point and would like to implement the look in your client’s design, today’s tutorial is for you!

For today’s CSS trick, we’ll go through how you can add an image as a background to headings on your site, so you can create a more custom design without having to sacrifice the benefits of using real text!

I know you’re here to find out how to FINALLY achieve this customization because although you may have found a way to add a background color to your blog page items, it’s been tricky trying to make them have the same height, without manually setting one that only works if you don’t reduce your screen size.

When you’re working with the Brine template, and you’re using the bottom header, the navigation can overlap nicely over banner images, but that means you have to settle for a “backgroundless” header in all of the non-banner pages… or do you?

In today’s tutorial, we’ll be looking at how to add a background color to those Summary Blocks with summary excerpts you have hanging around your site… AND how to make sure the colored portions have THE SAME HEIGHT. Oooh, intriguing right?

You know when you’re loading your site and you see a flashing or fade-in background color before the content on your page fully loads? This may not be happening on all of your pages – or even if you’re using a template outside the Brine family – but…

If you’re using one of Brine templates, or pretty much any other template in Squarespace, you’re most likely wanting to make the best out of their banner sections. These can be used in many creative ways to add an extra touch of “huh… I wonder how they did that?“ …