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

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

Leave a Reply