Andddd we’re back with another post in the Squarespace CSS series!

Just joining us?

Fab! I def recommend checking out the first few posts in the series before going too crazy with any of the copy-and-paste code below!

There’s some pretty important need-to-knows to make CSS magic happen, as well as a few little catch-22’s to think about when adding custom code to your site.

But if you’ve done your homework, and you’re just ready to get your hands on the goods, read on!

In this post, I’ve rounded up the best free CSS code snippets out there to help you totally transform your Squarespace site’s layout & backgrounds.

P.S If you have found any of the free snippets in this series useful for your own site, be sure to show our featured CSS linguists some love over on their own sites and social!

Top CSS tips for customizing your backgrounds & layouts in Squarespace

1. Overlap a block between two sections in Squarespace 7.0 using CSS

Method of CSS injection used: Universal

In Squarespace, your sections act like walls to contain all your content, so there’s no native (A.K.A built-in) way to make your content span across two sections.

But sometimes it feels good to be a rule breaker!

So Thirty Eight Visuals is here to help you break out of the box and float the block of your choosing between two index sections in 7.0!

Here’s where you can get your hands on that fancy little code snippet (as well as the step-by-step for how to get it done!)

Here’s my little screenshot to help you dream of all the possibilities!



2. Create custom layouts for gallery blocks in Squarespace 7.0 using CSS

Method of CSS injection used: Universal

Finding the perfectly symmetrical layout of your gallery blocks a little ho hum?

Chris Schwartz-Edmisten is helping you beat gallery block boredom with this handy tutorial vid.

Fair warning: it’s isn’t exactly copy-and-paste. But it’s well worth the watch if you’ve got a thing for custom layouts!

Oh, and I test-drove it for you! Here’s what my regular old gallery block ended up looking like…



3. How to add an angled background to your header & footer in Squarespace using CSS

Method of CSS injection used: Universal

Looking for a way to spice up your site-wide header and footer sections?

Minimist is bringing their CSS A-game with this tutorial!

Here’s a super simple example of an angled header (below).

Fun, right? Play around with the colors to make this little hack to make it feel soft, bold, chic, masculine, whatevs!



4. How to create a chevron background for your header or footer in Squarespace using CSS

Method of CSS injection used: Universal

Okie, so while I was messing around with the above tutorial from Minimist, I did what I always like to do when testing out a bit of CSS…

And that is to randomly start changing number values to see exactly what part of the design it affects.

(This is legit the easiest & best way to start to understand what the different lines in these copy and paste CSS snippets all mean!)

Which led me to this happy mistake…


A chevron background!

Here’s the code you’d need to make it happen:

I’ve bolded the bits you need to change to increase or decrease the angle, and where to change the color from “inherit” to your color code (ie. #00000) to use a different color than the background color you set in site styles for your header or footer.

//Chevron Header//

.Header  {

  position: relative;

  z-index: 1;

  &:before,

  &:after {

    background: inherit;

    content: ”;

    display: block;

    height: 100%;

    left: 0;

    position: absolute;

    right: 0;

    z-index: -1;

  }

  &:before {

    top: 0;

    transform: skewY(6deg);

    transform-origin: 50% 0;

  }

  &:after {

    bottom: 0;

    transform: skewY(-6deg);

    transform-origin: 50%;

  }

}


//Chevron Footer//

.Footer  {

  position: relative;

  z-index: 1;

  &:before,

  &:after {

    background: inherit;

    content: ”;

    display: block;

    height: 100%;

    left: 0;

    position: absolute;

    right: 0;

    z-index: -1;

  }

  &:before {

    top: 0;

    transform: skewY(-6deg);

    transform-origin:50% 0;

  }

  &:after {

    bottom: 0;

    transform: skewY(6deg);

    transform-origin: 50%;

  }

}




5. How to move a block in front or behind other elements on the page in Squarespace using CSS

Method of CSS injection used: Universal

Finding your fancy new header angled/chevron header is overlapping your page content?

There’s fix for that!

Option 1: Add in a spacer block above the first bit of content to move it down the page a bit so it’s not competing with the new header style.

Option 1: Add in this simple one liner to bring that first content block on the page to the forefront of your design!

//Bring block to front//

#block-yui_3_17_2_1_1596736140176_4550 {z-index: 1}

//send block to back//

#block-yui_3_17_2_1_1596736140176_4550 {z-index: -1}

You’ll need to swap out the bolded bit for your actual block # for it to work, btw.

Not sure where to find that block ID?

Check out Squarespace CSS: how to target specific pages, sections, or blocks on your site 


6. Create a vertical line in Squarespace using CSS

Method of CSS injection used: Inline & Universal

Horizontal line?

No problem. Squarespace has a block for that.

Vertical line?

There isn’t one (yet).

Thankfully, Charlie from Palm Creatives has just the remedy you need! Here’s where you can find her tutorial.

And here’s my little sample of what it can do!



7. Create a split section layout in Squarespace 7.1 using CSS

Method of CSS injection used: Universal

The new version of Squarespace doesn’t have quiteee the extensive resource library that 7.0 does since it’s still fairly new!

But, that hasn’t stopped CSS guru Becca from Seven One from jumping in and getting her hands dirty!

The result? This awesome tutorial (and complimentary code snippet!)

This isn’t just some half-background-image magic illusion either!

This bit of CSS actually lets you edit the the right side of the screen independently from the left!

Got more content you need to fit in that section?

This code snippet lets your visitor scroll through your content on the right while your image on the left stays perfectly in place!

Magic! ‍♂️



8. Parallax Scrolling effect in Squarespace 7.1 using CSS

Method of CSS injection used: Inline & Universal

Speaking of 7.1, anyone else miss parallax scrolling?

Good news!

You can safely put away your pitchforks, because even though it’s not (yet) available in the new version of the platform, we have the brilliant minds of people like Will Myers to help us in our time of need.

Here’s a glimpse of what Will so generously brings to the table with this CSS snippet.

Heads up! I had trouble finding my unique section ID needed for this tutorial since my demo site was not yet live, so if you’re stuck too, you can grab this Squarespace ID finder chrome extension I ended up using!



9. Add background pattern to a section or page in Squarespace 7.0 using CSS

Method of CSS injection used: Page header

Got a cute little custom branded design element you want to incorporate as a background pattern somewhere on your site?

This one took a bit of digging, and honestly there are easier ways to achieve this than using CSS.

I teach how to get this exact result in my Square Secrets Course without having to use a single line of code!

(Along with a bunch of other custom background hacks you’ve been scratching your head trying to figure out how that designer made that happen in Squarespace!)

Anyhoo, when I finally found the CSS solution over at W3schools.com, it wasn’t quite “Squarespace friendly.”

So I took the main bit of code they used and adapted it to our favorite platform to get this…



Now obviously you can swap out the design and colors if you’re finding my example background a little too froo-froo!

Basically this CSS uses just one image, and repeats it horizontally and vertically to make a pattern.

So make sure to have that image properly sized for how big you want it to appear in your pattern, then uploaded it to another page somewhere in your unlinked section so that you can right click and find it’s URL.

Here’s that bit of code you’ll need:

I’ve bolded where you need to change the page URL slug (found in the settings of the index section you are trying to target), the background color, and the image URL.

//Patterned Background for an index page section//

<style>

.collection-type-index #page-slug-goes-here

{ background-color: #000000;

background-image: url(“https://url-goes-here“);

background-repeat: repeat; }

</style>

The above CSS is for index pages and it will need to be embedded in the page header code injector of the actual top/main index page.

Then just change the URL to whichever section on that page you are targeting.

If you want this same effect for a single page (one that doesn’t live under an index page) paste the below code into that page’s header code injection:

//Patterned Background for a regular page//

<style>

.Main

{ background-color: #000000;

background-image: url(“https://url-goes-here“);

background-repeat: repeat; }

</style>

10. Add a background image to a drop-down folder in Squarespace using CSS

Method of CSS injection used: Universal

Want a cute little backdrop for the links in your top navigation folders?

Use an image!

(Just be sure sure your text still stands out super clearly on whatever you use!)

How’s it done?

Our friends over at Ghost Plugins are showing you in this quick demo!



PSSST! Wanna know the secrets to customizing your site without the use of code?

My Square Secrets Course is for you!

It covers every important aspect of building sites that convert visitors into clients & customers, including both the Squarespace tech as well as the design best practices and website conversion strategy.

Square Secrets is the most advanced Squarespace course available online.

By the end of the course you’ll know all the creative hacks and secrets of the platform to build truly jaw-dropping sites (without having to learn to code!)



/

/

You’ll also love . . .

Squarespace CSS: 10 code snippets for customizing your site’s background & layout