Change background color of Text Block?

Does anyone know how I could change the background color of a Text Block?

The easiest way is to probably use a Markdown Block instead of a Text Block. Let’s say you have this written in a text block:
“And here’s to you, Mrs. Robinson, Jesus loves you more than you will know.”

Paste it into a Markdown Block and surround the part you want to “highlight” with span tags like this:

"And here's to you, <span style="background-color:green">Mrs. Robinson</span>, Jesus loves you more than you will know."

tazmeah’s suggestion of Markdown blocks is fantastic. You can also 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>

Fantastic solution, thanks! I also see that divs can be inserted, with an example I listed in an answer here too.

That works a treat! A couple of questions:

• How do I create more than one line of text in my Markdown Block?
• How can I change the colour and size of the font?

Thanks

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

Bit late to the party, just wondering if there is anyway to position an image to the left or right of a markdown block.I'm trying to achieve something like http://www.shopkeep.com/pos-systemWhere there are block of text with differing colours and images to the right and left of the text.

Any ideas?

Thanks!Mike

Bit late to the party, just wondering if there is anyway to position an image to the left or right of a markdown block.I'm trying to achieve something like http://www.shopkeep.com/pos-systemWhere there are block of text with differing colours and images to the right and left of the text.

Any ideas?

Thanks!Mike

@mcdent Seeing as this post is 2 years old, I would suggest opening a new question. Also try being a little more specific with what you are trying to accomplish and include a link to your site.

Wow! Thanks so much for this. I had no idea this existed!!! :D

This is great!!! Thanks for the solution.

This is great! How do we use the same fonts which are in our theme for this?

Just to get clear, if you copy and past when @jpeksin wrote it won't work. The reason is that SquareSpace's MarkDown can't cope with more than three space characters at the start of each line.

i.e. This fails:

but this works:

DONATE

Cheers

J

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

On 5/31/2019 at 6:09 AM, AskQuesty said:

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

Thanks for the video! What would you add to the code to change the color of the text inside the block? And also the line spacing? Thanks!

4 hours ago, ashleemundywebsitede said:

Thanks for the video! What would you add to the code to change the color of the text inside the block? And also the line spacing? Thanks!

Add to Home > Design > custom CSS

#enter-text-block-id {
	background: red;
}
#enter-text-block-id * {
	color: white;
}

Find ID with: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

On 5/13/2020 at 4:51 AM, tuanphan said:

Add to Home > Design > custom CSS

#enter-text-block-id {
	background: red;
}
#enter-text-block-id * {
	color: white;
}

Find ID with: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Thank you so much! :):)

On 5/31/2019 at 12:09 PM, AskQuesty said:

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

Hi, how can I change the background color into a 50% transparent white, so the text block is just a bit lighter than the color it is on?

3 hours ago, Nanakoco said:

Hi, how can I change the background color into a 50% transparent white, so the text block is just a bit lighter than the color it is on?

Use rgba color, eg

Quote

background-color: rgba(0,0,0,0.5) /* black with 50% transparent */

Is there a way to have this span the entire width of the page, edge to edge, in the Hayden 7.0 template?

1 minute ago, overflowg said:

Is there a way to have this span the entire width of the page, edge to edge, in the Hayden 7.0 template?

Yes. Possible. I just answered a similar question 5 minutes ago. Is it your post or?

On 1/12/2021 at 10:11 PM, tuanphan said:

Yes. Possible. I just answered a similar question 5 minutes ago. Is it your post or?

I posted a similar question but the code provided unfortunately removed the padding from the images below that text block. Any solution for that? I forgot I had two accounts. Will need to remove this one.

On 1/14/2021 at 11:22 AM, overflowg said:

I posted a similar question but the code provided unfortunately removed the padding from the images below that text block. Any solution for that? I forgot I had two accounts. Will need to remove this one.

Can you share link to that post? We can check again easier.

16 hours ago, Mania said:

I have a issue with the effects of the code displaying only when I go to Design --> Custom CC. It has to do with this code specifically, which creates a translucent-white background for text in a specified block:

#block-848b3e4b0bc6ae27ccc5 {   <---- my block ID

background-color: #f0f0f088;

padding: 1px;

text-align: center;

}

 

Any ideas what went wrong?

Can you share link to page where you added text? We can help easier