Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2
Moaxlycan

How do I change the colour of a block?

Question

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

Edited by acalvo

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 7

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!

Edited by Stacie

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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

Edited by scoobie

Share this post


Link to post
  • 0

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
}



Share this post


Link to post
  • 0

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.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...