Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 8
Scoobie

Can a block have its own background colour?

Question

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:

squarespace_needs_colored_blocks.JPG

squarespace_blocks.JPG
Edited by scoobie

Share this post


Link to post

Recommended Posts

  • 0
Guest

I agree this should be a standard feature. Any progress to date or workarounds?

Share this post


Link to post
  • 0

This was super helpful! Thanks for the detailed answers!


Creator of [wh questions][1] worksheets for speech therapy. [1]: https://www.teacherspayteachers.com/Product/WH-Questions-3308300

Share this post


Link to post
  • 0

Hi @scoobie, I made a video tutorial for you on how to Adding a background color to a block. Hope this helps! https://www.askquesty.com/post/change-background-color

Edited by AskQuesty
Initial Revision

Have Squarespace questions/task and need help today? **You can hire us here.** Our answers are on-demand, video recorded, and only cost between $5 to $25. Estimates are free, 100% satisfaction guarantee, and trusted by hundreds of small businesses.

Share this post


Link to post
  • 0

i'm sure you worked it out by now, but just add the text: color:#000000;

substitute the zeros for whatever hex value your colour is

Share this post


Link to post
  • 0
Posted (edited)

There is a very easy way I found to change the color block - 

  1. Make sure the page you are working on is open on your screen
  2. Click home in the upper left
  3. Go to the Design Tab
  4. Go to Site Styles
  5. Either type Collage into the search box or scroll down to Image Block>Collage
  6. Click on the color circle
  7. Replace the HSL code with your own HSL code
  8. To find your HSL code, you can use a site such as this one
  9. Either choose your color or add your hex code in the Color Value box if you have it
  10. Copy the HSL code from H to the end of the parenthesis
  11. To replace the default HSL code in Squarespace, click the circle and highlight the default code - press control/command V to replace.
  12. Click save

There is no need to inspect the elements and do hard coding unless you choose to

 

Edited by Jennifer-Badr

Jennifer Badr - MFA | MS

Design & Marketing Professional

 

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