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.
These problems don’t occur the first time HTML is entered – they occur the next time the post is opened with the Advanced Editor. This means the text box works fine the first time it’s saved, but breaks on subsequent saves.
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.
EDIT: Although I like this technique because it does not require images or javascript, it causes havoc with validation. For that reason, I am now using the javascript version of NiftyCorners, rather than this version.
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:
[php].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}[/php]
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:
[php]<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>[/php]
immediately before the text and:
[php]</DIV><SPAN class=rbottom><SPAN class=r4></SPAN><SPAN class=r3></SPAN><SPAN class=r2></SPAN><SPAN class=r1></SPAN></SPAN></DIV>[/php]
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:
Note, if using the Advanced Editor, it is best to write the whole post first, then go to the Code tab page and call the style in the appropriate place. If you set up the text box first, save, then make some changes in the Advanced Editor and save again, your text box may break. See the Advanced Editor Issues section above for further advice.
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):
[php]edButtons[edButtons.length] =
new edButton(‘ed_more’
,’more’
,'<!–more–>’
,”
,’t’
,-1
);[/php]
and add this on the line after it:
[php]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>’
,”
);[/php]
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.
Stephen, this is great! The rounded corners in CSS is nice, but explaining how to make it into a quicktag is a nice extra touch.
Thanks Michael. The quicktag is essential really, because it’s a little cumbersome to use otherwise. Nice blog by the way!
Hey Stephen,
I just have to try this one out. Thanks for taking the time to let us know!
Hey Stephen,
You know what would be really great for this stuff? A new plugin that lets you create and store snippets of code, text, whatever from a dashboard manage page, and then adds a drop down or dhtml floated menu on the post page to selecet snippets and insert into your post from.
Hi Dane,
That would be a really great plugin. I’m working on a plugin already, but not quite as grand as that.
Have you seen my Colour Selector post? Its a bit slow to load, but I’ve turned that into a plugin – I just haven’t quite gotten around to finishing it off. It lets you create 3 different textbox styles, then call them from the post using a quicktag (from the code screen).
It doesn’t allow for other snippets of code or text and doesn’t have a drop down menu. They would be great, though I guess it would be better as a separate plugin (I’m conscious of feature bloat after trying to put everything into DualFeeds 1.1).
Do you want to have a crack at it? Or do you mind if I see if I can come up with something (it’ll be a while before I can get to it)?
Using niftycorners with quicktags is a nice solution to this problem. I had come up with something similar for my own rounded corners inside wordpress posts article where I use image-based corners.
However, I chose to code the replacement of the tag for the rounded corners box inside the theme’s functions.php file, which is in some sense is where it really belongs since the rounded corner boxes are a presentational element specific to a theme.
But the quicktags solution is also nice one. Be nice to combine them somehow.
Hi Tim,
Thanks for you comments. Actually, I’m coming around to the philosophy that the best place for any changes is in a plugin (if possible).
Leaving that aside, one benefit you have with putting it in your theme’s functions.php (or a plugin), is you don’t have to worry when you upgrade WordPress. Quicktags.js will be overwritten during upgrades and I’ll have to set it up again (I’ll need to do it anyway because I have lots of quicktags).
I tried to read your Floating a rounded corner box inside a WordPress post entry post, but it doesn’t show for me. It’s empty and the links in the Recent section of the sidebar all say “Sorry, you do not have sufficient privileges to view this post”.
Other pages, such as your WordPress Spreadsheet plugin show fine and the Recent section displays the post titles rather than the privileges message.
There seems to be lots of good stuff on your website. I’d like to check it out.
Sorry about that–the post should show fine now. I use David Coppit’s excellent Category Access plugin to have make some of my blog’s categories private, and that article was a member of some private categories. It should be available now.
Hi Tim, sorry it’s taken me so long to respond. I’ve checked out your post and I’ll add a reciprocal “another approach” link to it. It’s definitely worth considering different approaches and the one you outline seems good.
As I said to Dane in a comment above, I’m turning my Colour Selector into a plugin. Your approach of using a content filter is what the plugin will do (though of course using the different rounded corner technique).
More on the presentation vs plugin issue in the comments on your site – basically, I agree that this is a presentation issue, but the plugin will make it much easier for the average user.
Hi there, you say that you now use the javascript version of niftycorners and I was wondering if you have any advice on using this version with wordpress. I’m having trouble setting it up, a box is displyed but it has square corners. Where did you put the niftycube files and what did you add to your theme files to get it to work? I would be gratefull if you were able to give an example. Many thanks.
Wow this is a great howto ! thanks !
I was wondering if it’s possible to make this work so you have round borders like you can create here:
http://www.roundedcornr.com
If that is possible by changing the CSS for this howto, it would be rocking !
Thanks for the css. I’m still learning css and php so sometimes I get stumped when I’m in the middle of a project. I like using rounded corners in some of my designs. Well, thanks again and I do enjoy reading the informative info on your blog.
Having to play around with code in wordpress to make changes is the only thing I don’t like about wordpress. I guess if I can learn a few things about the code i will be able to do wonders. Until then I can use your advice. Thank you. I would really like to have rounded text boxes in the posts of my blog.
I like Nifty Corners too. The main problem of using is visible flicker when page is loaded, i.e. page is loaded with rectangles with right angles and then I see how they convert to round corners. And JavaScript of course… 🙁 There are many people check off JavaScript. On the other side they deprive themself of pleasure to see many interesting kinks 😉
I have learned the hard way that it can be difficult to make this work. I too had a problem with getting the rounded corners. I did it and at the end it is displyed but it has square corners. I guess I need to put in some more work were wordpress code is concerned.
This would be a must have plugin. This is a nice tip but would this have any affect on SEO with all the extra tags cluttering things up?
Round is nice visually. My concern is also about the use of javascripts for something visual like this, that for the people who check off javascript, they won’t see any of it. Now i’m worried if I have other features in javascript that won’t work because visitor s turn it off? better go check and test it out. =)
This is an interesting plugin but as you say has problems with validation.
Also for those worrying about javascript…please read the post again. The javascript code that is in the post is for adding the editor button in WordPress. This technique does not use any javascript.
I am new to web design and think this is a great idea. IT makes the boxes look much better. Can you tell me why using JavaScript is bad?
CSS is awesome i just started really getting into it recently and i’ve been converting all of my table-based websites to DIV/CSS. Thanks for this cool trick Stephen i’ve been fiddling with ways to do this myself.
Wow.. creating rounded corners without javascript and images. But since you mentioned this method wrecks havoc with validation, I think I’ll try out the javscript version. Thanks!
There seems to be thousands of ways to create rounded corners, and most are too complex, too difficult, or simply don’t work. I tried this technique, it’s simple and it works, thanks!
Great tip. I like the fact you also listed the 2 other ways people could get rouded corners and linked to them. I think most people will use the javascript but a plugin sounds like a great idea.
Well, that is a hell lot of a code, but it is always best to keep it short and clean, I learned that when I was working on my Blog’s theme! Nice work!
This is too cool. I always thought that the rounded corners had to be done with images. Nice to see that you can do them with CSS as it should help keep page size down.
I thought the only way for rounded corners were through java! This is great! Thanks!
Stephen, do you know what HTML errors are produced with the rounded corner CSS solution? I’m sensitive to keep my site clean for SEO purposes.
This is an interesting way to approach this. But without proper validation and the huge amount of code I wouldn’t consider this a better alternative to using images.
Stephen,
Got all in and quicktag and this suites my needs and more. Cancel email to you and I appreciate your help. Really like the quicktag, makes it a super addition.
JIM
Stephen,
I noticed that the background on the corners is default white
.rtop, .rbottom{display:block; background: #FFF}
Is there a way to change the color here to match the B/G color without changing your default every time.
Thanks
Jim
I had to write what happened and it surprised me. I entered every thing as outlined above. the quicktag appeared when I hit the HTML button so I could round corner all the pieces of text I wanted to. Still had problems though, as outlined above, in revisions. So I decided to disable the editor in ‘profile’ On my next post I was so happy to see that NOW the quicktag is still present without the editor on, and I can use it all I want at anytime, revisions also.
JIM
Interesting approach to this. I didn’t think it was possible without JS or images. It’s still a lot of coding though and easy to get confused for the inexperienced coder. The quicktag is a huge plus though, thanks!
Jeff,
Did you get the corners to work in any color or just white?
Just white, for now. I’ll try to play around with it and see if I could change the color.
I tried everything I know to do. They need to be transparent andthat would solve every thing.
Thanks
Jim
Jim, I see what you mean. I just tried this too and it seems I can’t figure out how to change the color either. Do you know of a way to make them transparent?
I have tried several things to get it transparent but no success yet. I have changed the background color to match whatever color the background is, but that only works for each particular situaation. It needs to be a global thing. I did change the B/G to #000000 which made 4 little black corners, look like a pictire frame. Will post if i get it transparent
JIM
This was a great tutorial, thank you. Just a reminder to everybody that if you are using TinyMCE to have the “import CSS classes” box checked in the settings. Otherwise this will not work. I was coming close to breaking my desk before I figured this out. Can you post of followup of how to do this with inline CSS. I would like to vary colors of boxes on some of my static pages.
This is a really subtle trick that I think will make a really big diff. to my blog. Thanks!
Rounded text boxes are great but it’s a nightmare for those who don’t know CSS.
Jason,
If you are not concerned with rounded corners in internet explorer ( they will see them square ). There is a super easy way for Firefox and safari. Check my site in the ‘A NEW Look’ article
Jim
Ah, this is much much more prettier and cooler than the simple hard-edge boxes. Amazing how a small and simple modification can change the whole feel and look of the box. The explainations are very thorough, I’m going to try this on my next designs. Also thanks for the heads up regarding the Validator compatibility.
Wow, I finally was able to insert rounded corner boxes in my wordpress posts. Before this, I can only produces these boxes on the sidebars or anywhere but the posts and pages area.
I wish you could tweak this one further so that we can have a border around it.
I always got dizzy looking at the code, but it worth a try 🙂 Great sharing Stephen 🙂
A simple method to make rounded box with small radius. With the color selector, it’s easy to select colors. Good job.
Awesome stuff, I’m running a mac and have trouble implementing css boxes etc into posts. For some strange reason they all ended up with square corners and not rounded.
Your method is much simpler, doesn’t use images and is 100% cool with wordpress. I just modified my quicktags.js file in WordPress version 3.04 and it works like a dream.
sir,first of all this is what i am searching from days and i thank a lot,can you please explain how can i add additional image in this box (like “Pin”) to get more attention.