How to Customize Sidebars in Squarespace 6 Using CSS

The Challenge of Using CSS in Squarespace 6

Running several blogs under one Squarespace 6 site allows for a lot of reuse; however there are some limitations such as tweaking the sidebar on a per-blog basis that are still challenging for developers to work through.

The Solution

A combination of ids and classes in the HTML allows some flexibility in customizing the output, providing you have some basic familiarity with cascading style sheets (CSS).

The simplest option is to add all the elements you need across multiple blogs into a single sidebar and then use the CSS display attribute to hide them by default. You can also selectively show these display attributes for the right blog using display: none and display: block respectively.

Identifying the correct classes can be a little tricky given the almost-random names that Squarespace assigns, but here are the steps to identify these and have them switch as you navigate between the blogs.

Locate the CSS Editor

  1. View one of your blogs.
  2. Find the menu bar at the bottom right
  3. Click on the paint brush for style mode
  4. A menu system will push out from the left; scroll to the bottom and click the button that says Custom CSS
  5. An alert will pop up asking if you're sure you want to edit; say yes because you're not overriding visual elements, you're just hiding and displaying certain ones at certain times.

Find and Document the Collection Ids

When you're in the Squarespace editor, select one of your blogs, and in the url, you'll see the Collection ID

Within the CSS editor in Square Space, note each Collection ID and label with comments. You'll reference these every time you show an element so best to take note now.

/*Sidebars are:
Blog A.collection-52e813a1e4b09717e21eaaaa
Blog B.collection-52e813a3e4b09717e21ebbbb
Blog C.collection-52e813a3e4b09717e21ecccc

Find the Block IDs

Make sure your sidebar has all the elements set up. Each blog should show all the elements for the other blogs. It may feel clunky. This is what we're out to fix.

Once all your elements are in place you'll locate the Block Id for each one:

  1. Highlight the first element
  2. Right click (on an Mac track pad, click with two fingers)
  3. Select Inspect Element
  4. Go up a few levels within the HTML until you find the div with ID Block
  5. Repeat for all elements you want to show or hide depending on the blog

Display: None is Your New Best Friend

Go back to your CSS editor and use the following code to hide all the RSS feeds for each blog.

* RSS sidebar *
#block-e6e370ea67acf3ad6513, /* Blog A RSS */
#block-7c894207de8f679f3ccb, /* Blog B RSS */
#block-5f9c12ebf5cd49212e99 /* Blog C RSS */ {
	display: none;

Display: Block is Where the Magic Happens

Remember those Collection IDs you took note of? You'll need those now.

You're simply going to say, when you're on blog A, show element for blog A.

.collection-52e813a3e4b09717e21eaaaa #block-e6e370ea67acf3ad6513,
.collection-52e813a1e4b09717e21ebbbb #block-7c894207de8f679f3ccb,
.collection-52e813a3e4b09717e21ecccc #block-5f9c12ebf5cd49212e99 {
	display: block;

Save and Review

Click save at the bottom of your CSS editor and go review each blog making sure each element is where it should be

I recommend opening an Incognito Window in Chrome (File -> New Incognito Window). This allows you to see your blogs as your readers will.

Back to blog