How do I change the colour of a block?

You first need to find the name of your block. Then you need to add custom code to your page.

How to find your block ID

I use Firebug - once you have Firebug open, go to your site, control click on the block you want to locate and scroll down to "inspect element in Firebug".

Sometimes this search it is not exact in Firebug. It will find the text for instance but not the block. But if you scroll up the code, you'll get to something like:

<div id="block-584f3b29b6217bdd611b"...

Now copy that block ID somewhere (I use Notepad, something that won't add extra formatting. don't use Word for instance).

How to add custom code to color your block

Now go to manage site on that same page and up top click on Page Settings. Click on Advance and insert this code:

<style>
 #block-yourblockidhere { 
   background-color: #000000; *this is where you put the 6 digit color you want*
   padding: 10px; }      
</style>

I also add some padding because once you have a colored box, you may not want the text going right up to the edge.

Note: do not include my note "this is where you put the 6 digit color you want" in your code.

Good luck!

Thanks Stacie! That tip was very helpful.

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.

for this reason I think the editor needs to allow the user to select blocks to have colors. Not everything is black and white.

Editor? As in the owner of the site?

Im stuggling to find my block id's that arn't yui... any ideas?

Also struggling to find the block id, all of them say yui, any help / advice?

I meant the style editor in Squarespace

Here is a new tool provided via Chrome Extension that's designed to help identify a Squarespace Blocks unique ID - for custom CSS purposes https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Example here:http://www.bcarroll.us/developer-platform-tutorials/2015/5/19/chrome-extension-squarespace-collection-block-identifier

Try adding this to a Code Block:

<div class = "blockname"> This is the heading </div>

Then, you can style it with CSS in the CSS Editor. Just make sure that you replace "blockname" with your own class names and call them appropriately with your CSS:

.blockname {
   background-color: red;
   text-align: center;
   font-family: arial;
   font-size: 20px;
   padding: 20px
}

I'm banging my head on the wall trying to do this same thing, but now it's 2018 and things have changed on SS.

I'm wondering if someone can update the 'How To' for this request.

It seems like such a basic feature for SS to include, but they don't. So frustrating.

Thank you for any help.