Jump to content

Can a block have its own background colour?

Recommended Posts

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
Link to comment
  • Replies 33
  • Views 90.6k
  • Created
  • Last Reply

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.

Developer Evangelist at Squarespace.

Link to comment
  • 5 months later...

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


Link to comment
  • 4 months later...

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.

Link to comment
  • 1 month later...
  • 5 months later...

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.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 2 months later...

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>

Link to comment

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

Link to comment
  • 2 months later...
  • 3 months 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.....


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.

Link to comment

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.

Link to comment

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.

Link to comment

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)

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

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.

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

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

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 2 months later...
  • 1 month later...

Archived

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.