Tuesday, October 18, 2011

Putting Boxes Around Text (Technical Tuesday)

Let's go outside the box . . . and inside the box. In fact, let's talk about the box itself. I've had a few people ask me how I put boxes around text.

Like this.

It's not hard to do, and I've made a tool for you to quickly create your own.

Note: This tool may not show up in a news reader. You'll need to visit the blog.

There are some basic instructions included with the tool. If you need more details, I've got your back. Read on.

Box Content

You can type as much text as you want into the box.

You can also put HTML in there. This means that you can have images, buttons, multiple paragraphs, whatever.


There are three widths you can control with this tool.
  • Border Width: The thickness of the line.
  • Inside Padding: The space between the line and the text inside.
  • Outside Margin: The space between the line and everything outside.
Here's a quick graphic that may make more sense, or you can just play around with the settings. As you change them the Preview will be updated.


All that's left is choosing some colors.

Get the Code

Now that your box looks just right, switch to the "Get the Code" tab. There you can copy the code and paste it into the HTML view of your blog post. You can also use this code on your website.

Happy Boxing.

* Origami is one of my wow-I-wish-I-could-do-that-but-not-enough-to-actually-practice skills. So when I see things like this decorative box, I'm in awe. And Dominic Alves did a great job photographing it. You can find it and others on Flickr.


Christine said...

LOVE THIS!! I've always wondered how Danyelle got those boxes around her text. Will these wrap around pics? I've seen them do that? I guess I just have to try it, eh? Thanks, JOHN!!

John Waverly said...

Christine - This was a fun tool to put together. I'm glad you like it. And, yes, you can wrap this around pictures, just copy the HTML code for your picture into the Text field and continue like normal. Oh, and thanks for the shout-out on AI.

Creative Commons LicenseUnless otherwise noted, all posts on the John Waverly blog by John Waverly are licensed under a Creative Commons Attribution 3.0 Unported License.
* Background image based on Night Sky theme by Ray Creations