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

  • 5

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.

Edited by foleyatwork

Developer Evangelist at Squarespace.

Share this post


Link to post
  • 15

I think a color selector should be introduced to the block builder by Squarespace, the same way it's built into the style settings. This way users can easily choose the color for each block.

Share this post


Link to post
  • 6

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>

Edited by jpeskin

Share this post


Link to post
  • 4

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


Share this post


Link to post
  • 2

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.

Edited by chriscleary

Share this post


Link to post
  • 1

Hi. You mentioned a previous solution that explained how to a specific block's id. Can you please tell me where you saw this?

Thank you,Greg

Share this post


Link to post
  • 1

I think a color selector should be introduced to the block builder by Squarespace, the same way it's built into the style settings. This way users can easily choose the color for each block.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Edited by intbyparts

Share this post


Link to post
  • 0

The issue of finding an alternative to targeting a YUI for a block is discussed herehttps://answers.squarespace.com/questions/40316/is-something-strange-happening-to-the-way-yuixxxx-are-being-generated

Share this post


Link to post
  • 0

Thanks.

Agree its a setting that has been overlooked by Squarespace.

This is a very confusing topic I find, would be good to see some other views on whether your solution is the most effective.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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)


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

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