Can a block have its own background colour?

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:

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.

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;}

Thanks Libby. I had the same experience. The #yui does not seem to work in targeting. Too bad, because that is a div that typically encapsulates several sub divs and would be nice to target.

Hi. You mentioned a previous solution that explained how to a specific block's id. Can you please tell me where you saw this?

Thank you,Greg

Thanks for the update @foleyatwork - It's a shame they can't be targeted (I was trying and failing to do just that, earlier today) but at least I now know it can't be used in that way.

There may be other ways. Can you share a link and let me know which block you want to target?

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>

<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>
</div>

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; }

The issue of finding an alternative to targeting a YUI for a block is discussed herehttps://answers.squarespace.com/questions/40316/is-something-strange-happening-to-the-way-yuixxxx-are-being-generated

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

body='collection-54a9de84e3b040ef87e421ef'

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

sqs-widgets-audio-player-content

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

Thanks.

Agree its a setting that has been overlooked by Squarespace.

This is a very confusing topic I find, would be good to see some other views on whether your solution is the most effective.

Thanks Scoobie,

Yes hopefully squarespace will soon introduce this feature. When you say this topic is confusing do you mean my answer or the thread in general, cause I can try and explain it a little easier if your having trouble.

I don't mean your answer. I mean the way of targeting a block in Squarespace is not clear. If you read Foley's answer on this thread , who works for Squarespace, even he was confused.

Yeah and there is a few threads on this topic and I couldn't find a simple solution to any of them. Hopefully this will be the solution for more than just myself.

One potential problem with your answer is I don't think its practical for large sites, that have a large number of blocks on different pages.

I think a color selector should be introduced to the block builder by Squarespace, the same way it's built into the style settings. This way users can easily choose the color for each block.

I think a color selector should be introduced to the block builder by Squarespace, the same way it's built into the style settings. This way users can easily choose the color for each block.

Yeah I was just thinking that. It seems to be a solution for just using one block on a page, or one of each different type of block on each page. But hopefully it is something to build on for someone else who knows CSS better than I do.

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)

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.

A colour selector and the ability to assign custom classes and ids would be great.

2 years on, this problem is still driving me nuts...

Agree, at the moment this seems the only way.

Thank you, Libby!