Jump to content

How do I change the colour of a block?

Recommended Posts

When I create a block, the block is transparent so all of my text/content sits on top of my background which is a problem as my background goes between dark and very bright.

I was wondering if there was a way to add colour to a block to make it a physical box of one colour which my text would sit in and be far easier to read.

Thanks for reading.

Moax Lycan

Link to comment
  • Replies 11
  • Views 28.8k
  • Created
  • Last Reply
  • 5 months later...

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:

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

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!

Link to comment
  • 1 year later...
  • 2 months later...
  • 5 weeks 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.

Link to comment
  • 3 months later...
  • 3 months later...
  • 9 months later...

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

Link to comment
  • 2 years later...

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.

Link to comment


This topic is now archived and is closed to further replies.

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