Jump to content

Creating a colored box around text, other blocks and/or multiple blocks?

Recommended Posts

I'm looking to to add a colored square around blocks of text to act as a border for those sections. Is there any custom CSS/MarkDown script that could achieve this? If possible, it would be great to have this happen around multiple blocks as well (for pairing a description with a video, etc).

Thanks.

Link to comment
  • Replies 2
  • Views 9.6k
  • Created
  • Last Reply

The easiest way to do that would be to add a Code Block, which you can then style in the CSS Editor.

Try adding something like this to a Code Block, replacing

class-name

with your own class name:


<div class = "class-name">
This is the text inside the code block.
</div>

alt text

Then, you can style it in the CSS Editor by going to Design > Custom CSS and entering something like this:


.class-name {
   text-align: center;
   font-family: arial;
   font-size: 20px;
   padding: 20px;
   border: 3px solid red;
}

You can replace the values in this as appropriate, but this would give you something along the lines of:

alt text

To set up multiple Code Blocks this way, just give each one the same class name.

In terms of the CSS, these links are also good for reference:

Hope this helps!

block.png.a115c1b70291475762a486114bd64510.png

code-block.png.b86b6d60abfcc4ab31e7a8dd317a2aa1.png

Link to comment
  • 2 years 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.