Jump to content

Can a block have its own background colour?

Go to solution Solved by foleyatwork,

Recommended Posts

Can each Block in the layout engine have its own background colour?

This would be a big way to customize the look of the templates.

This has been discussed various times on here but I don’t think I’ve seen a definitive simple answer – in particular there’s been a lot of discussion across various threads that block IDs YUI seem to change so targeting a block ID with color doesn’t seem to work permanently.

Colored blocks are pretty standard now on major websites as a way of structuring different types of content. See the examples below:


Edited by scoobie
Link to comment
  • Solution

Sure, it's not supported in most templates, but all it would take is a little Custom CSS. This is available on the consumer platform, but it will require a little bit of HTML/CSS knowledge.

Each Squarespace block has the following markup by default.

<div class="sqs-block-content" id="yui_3_5_0_1_1351742388720_92">...some block content...</div>

You want to target the ID as the selector to change the background color of one specific block. It would be something like this in the Custom CSS.

#yui_3_5_0_1_1351742388720_92 { background-color: #009999; }

NOTE: The ID will be unique for your own block. The one I put in here is just some code I pasted from one of my sites. You will have to located the ID you want to target for this to work. The best way to do this is by using the element inspector in Chrome, Safari, or Firefox.

UPDATE:I answered this a long time ago and it's a little inaccurate. The YUI IDs really shouldn't be styled, they are created dynamically and change on every page load.

Edited by foleyatwork

Developer Evangelist at Squarespace.

Link to comment
  • 5 months later...

I tried the above solution but the fui # seems to change! (and I seem to recall reading that on another post), so instead I used the block id to style a block. Find the specific block id as instructed above and try something like:

#block-7c37025ba385ca4d99a1 {background-color: #ededed; }

I did additional styling to the block - added a border and some padding etc.

#block-7c37025ba385ca4d99a1 {background-color: #ededed; border: 2px; border-style: solid; border-color: #999999;   margin-left: 10px; margin-top:-10px;padding: 15px;}

Link to comment
  • 4 months later...
  • 1 month later...
  • 5 months later...
  • 2 months later...

I have found that inserting a Markdown block allows you to insert divs with your own styling such as background colors. Note that if you put two Markdown blocks next to each other, Squarespace will automatically merge them for you into one Markdown block.

So here’s an example of two text blocks with custom (light gray via alpha) background color. One block is on top of the other with some space in between them (via margin-top), and some padding around the divs on top/bottom:

<div style="background-color:rgba(0, 0, 0, 0.0470588); text-align:center; vertical-align: middle; padding:40px 0;">
<a href="/donate">DONATE</a>

<div style="background-color:rgba(0, 0, 0, 0.0470588); text-align:center; vertical-align: middle; padding:40px 0; margin-top:30px">
<a href="/blog">VIEW THE BLOG</a>

Edited by jpeskin
Link to comment

If you’re looking to color an entire strip of a page, you can target a predictable ID by using the Bedford template with an Index Page. The sub-pages of an Index are contained in div boxes whose ID matches the sub-page name, so you can use what @foleyatwork suggested and do

#some-page { background-color: #009999; }

Edited by intbyparts
Link to comment
  • 2 months later...
  • 3 months later...

Okay so I'm not amazing with css but I think I may have solved this,

Firstly install Firebug forFirefox and then go to your page, right click on the block that you want to resize or change color of. You then need to find the Body ID, it will be somewhere near the top and will have the word 'Collection' followed by a series of numbers. i.e.....


You then need to find the .sqs widget code for your block, I am trying to change the background color of an audioblock so my .sqs widget code is.....


... but this may differ for photo galleries or whatever you are trying to change, but i think whatever it is you are looking for the word 'widget' within the code.

You then go to squarespace choose your page to edit, then go Design > Custom CSS and enter the following code...

#collection-54a9de84e4b040ef97e431ef #content div .sqs-widgets-audio-player-content {background-color: #ffffff; }

So as mentioned above you replace the 'collection' ID with your own from above, the .sqs-widgets with whatever your changing (audio block in this case) and the background color for whatever you want, in my case it is white (#ffffff)

Really hope this helps cause this was bugging me for ages. i sent an email to squarespace saying that I feel this is a setting that has been overlooked as you are able to custom color every other feature without using custom css.

Edited by chriscleary
Link to comment

This solution is good at narrowing the styling down to a specific page but there are a couple of shortcomings:

  • It applies to all blocks of that type on a page so every audio player will be restyled
  • Many blocks don't have a friendly class name like .sqs-widgets-audio-player-content so targeting one of many becomes tricky
  • Some blocks, especially html blocks will almost definitely appear many times (perhaps dozens of times) on a page so targeting a single instance is very tricky

(more to follow)

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment

Rolling your sleeves up, you can make your css rules much more specific. For instance:

ul.cf > li:nth-last-child(2) a ( styling goes here }

..says "look for uls with class cf and then, searching only in the top level of li elements (ignoring any nested ul/li) find the second last li and apply styles to the a inside it."

There is an inherent risk with this - if the structure of the page changes, then the rule may no longer apply, or may apply to different elements on the page. For instance, in my example above if an li is added or removed from the ul then the wrong item will be styled.

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment
  • 2 months later...
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.