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

Change background color of Text Block?


mrobinson99
Go to solution Solved by jpeskin,

Question

  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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-

18 answers to this question

Recommended Posts

  • 3

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>

Edited by jpeskin
Link to post
  • 4

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

Edited by tazmeah
Link to post
  • 0

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

Edited by rkay72
Link to post
  • 0

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

I am new here. I am trying to develop a simple website on SquareSpace. So far I am finding it pretty darned frustrating.

Link to post
  • 0

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

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.

Link to post
  • 0
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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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 */

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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