WordPress – Rounded Text Boxes in Posts

In my previous article I explained how to create simple text boxes, using CSS, to highlight certain text in your posts. While this is easy and effective, what I really wanted was to create text boxes with rounded corners. This article covers one technique that allows you to do this.

Advanced Editor Issues

It should be relatively easy to create rounded corners, and it is, if you have the Advanced Editor turned off. If it is turned on, which is the default, you will encounter problems because WordPress kindly breaks the code.

Check out my post Taming The Advanced Editor, which goes over the options open to you, including how to:

• turn the advanced editor off, if you choose to do so
• avoid the problem by writing the post in an external text editor
• change the settings so that the Advanced Editor is more friendly

Any of the above options should let you create rounded text boxes.

Alternatively, you could use simple text boxes without rounded corners. These work fine because they don’t use the <div> tag, which is one of the things that the Advanced Editor does not allow by default.

The Technique – Nifty Corners

There are many ways to get rounded corners. My preferred solution is Alessandro Fulciniti’s Nifty Corners.

It’s a little cumbersome to code, but I like it for the following reasons:

• it avoids javascript, so it will work for users with javascript turned off (okay I know its not a big deal if people get square corners instead)
• images aren’t used for the corners, so you can change colours via CSS, without creating new images (and the bandwidth will be lower).

Most solutions use javascript and/or images for the rounded corners. If you read Alessandro’s article, you will see that he also has an improved solution that uses javascript.

Alessandro uses the <b> element to get the rounded corners. I’ve gone with <span> even though it’s longer, because the Advanced Editor will convert <b> to <strong> the next time you open the post.

Setting Up The Style

For this technique, we need to add some styles to your external CSS file.

Download the wp-content/themes/yourtheme/style.css file (where yourtheme is the theme you are using) using an FTP program, make a copy of it in case you make a mistake, then use a text editor to add the following to the end of style.css:

.rtextbox{color:#555555; font-family:Arial; background: #EEEEEE; text-align:justify;}
.rtextboxinside {margin-left: 8px; margin-right: 8px; margin-top: 3px; margin-bottom:3px}
.rtop, .rbottom{display:block; background: #FFF}
.rtop span, .rbottom span {display: block; height: 1px; overflow: hidden; background: #EEEEEE}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
span.rtop span.r4, span.rbottom span.r4{margin: 0 1px; height: 2px}

The style of the rtextbox class can be changed to suit your needs (ie the colours, font, size, etc). This requires a basic knowledge of CSS, which is beyond the scope of this article, but an Internet search will reveal many sites with information on CSS.

Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes or for rounded text boxes as outlined in this post.

When finished, save the file, then ftp it back up to the server, overwriting the original.

Calling The Style From The Post

To call the style when you are writing a post, go to the Code tab page, find the text to go in the box and add:

<DIV class=rtextbox><SPAN class=rtop><SPAN class=r1></SPAN><SPAN class=r2></SPAN><SPAN class=r3></SPAN><SPAN class=r4></SPAN></SPAN><DIV class=rtextboxinside>

immediately before the text and:

</DIV><SPAN class=rbottom><SPAN class=r4></SPAN><SPAN class=r3></SPAN><SPAN class=r2></SPAN><SPAN class=r1></SPAN></SPAN></DIV>

immediately after it. Don’t leave any spaces between the leading HTML, the text and the trailing HTML. Also be careful to enter it exactly as above (ie uppercase tags, no quote marks) or WordPress will change it to the above anyway and add a blank line at the bottom of the box as a lesson to you!

Once you’ve saved this, you should get a text box with the following style:

Creating a Quicktag button for your text box style

If you are going to use text boxes often, you can set up a quicktag button that calls the rtextbox style for you, instead of you typing the lines in the previous section. Once setup, all you need to do is go the Code tab page, select the text you want and click the quicktag. Easy!

To set up a quick tag for the text box styles outlined above, you need to change the quicktags.js file in the wp-includes/js folder. Download this file using an FTP program, make a copy of it and open it with a text editor. Find the following section (at about line 126):

edButtons[edButtons.length] =
new edButton('ed_more'
,'more'
,'<!--more-->'
,''
,'t'
,-1
);

and add this on the line after it:

edButtons[edButtons.length] =
new edButton('ed_rtextbox'
,'roundedbox'
,'<DIV class=rtextbox><SPAN class=rtop><SPAN class=r1></SPAN><SPAN class=r2></SPAN><SPAN class=r3></SPAN><SPAN class=r4></SPAN></SPAN><DIV class=rtextboxinside>'
,'</DIV><SPAN class=rbottom><SPAN class=r4></SPAN><SPAN class=r3></SPAN><SPAN class=r2></SPAN><SPAN class=r1></SPAN></SPAN></DIV>'
,''
);

When you are finished, save the file, then ftp it back up to the server, overwriting the original file.

You’re done! You should now have a roundedbox quicktag in the Code tab page of the editor (you may have to close the browser and open it again first). This quicktag button will add the appropriate code around the selected text when you click it.

This is the solution I use. If you use a different method for rounded text boxes, I’m interested in hearing about how you do it.

Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes or for rounded text boxes as outlined in this post.

Another Approach

Check out Tim Rohrer’s Floating a rounded corner box inside a WordPress post entry article for a different approach to creating rounded text boxes in a post.

Tags: advanced editor, css, WordPress