How To Make Colored Text Boxes In WordPress

Recently I have been trying to add some color and life to my wordpress posts, not so much on this site, but some of my other ones.

Text boxes with backgrounds can be a great way to highlight an important fact, and ensure a reader of your article gets a certain piece of information.

What I wanted to do was put together a few snippets of css code, that I can refer to when I need to add a box.

A basic bordered box with text in it use the below code

<div style="border:1px solid black;padding:1.2em;">
DBAFire.com - more than just SQL Server!
</div>
DBAFire.com – more than just SQL Server!

Colored Text Boxes In WordPress

<div style="border:1px solid black;padding:1.2em; background-color:yellow;">
DBAFire.com - more than just SQL Server!
</div>
DBAFire.com – more than just SQL Server!
.

Note: You can also use color hex numbers in place of the name of the color, so if you wanted a softer shade of yellow you could do this…

<div style="border:1px solid black;padding:1.2em; background-color:#F2F5A9;">
DBAFire.com - more than just SQL Server!
</div>
DBAFire.com – more than just SQL Server!
.

How To Put A Linebreak After A TextBox

Use this code

<div style="margin-bottom:2em;"><span style="display:none;">.</span></div> 

As I come across more handy and quick wordpress formatting techniques that you can copy and past to use I will add them on this page, so make sure you bookmark it for easy reference!

Rob StGeorge

Senior SQL Server Database Administrator residing in Auckland, NZ

6 Comments

  1. An interesting update.
    When I tried to add the line break as a normal user, wordpress removed so that the dot was displayed. When I added the line as administrator, it stayed.

  2. Thanks a Bunch for this. I have searched for how to do this all day going through some bad plugins. I have even initiated a paid service. so you have saved me a lot in time and money. thanks so very much once again.

  3. Just tried this and it looks like it works in the Text box but doesn’t show up as a colored box in visual view. Not sure what I’m doing wrong

  4. Thanks so much. Really easy to follow and it worked. I’d like to use the boxes I created as a link to another page, i.e. you click on the box and it redirects you elsewhere – is this possible? I only seem to be able to have the text highlighted as a link which looks a bit naff

Leave a Reply