WordPress – Simple CSS Text Boxes In Posts
June 8th, 2007 by Stephen Cronin (14,202 views)In this article, I outline how to create simple text boxes using both inline and external CSS and how to set up a quicktag button so you can use them with the minimum of effort. You’ll be surprised at how easy it is to do!
I often have information that I want to include in a post, without it being part of the main body of the article. For example, additional information that may be useful to readers, but that disrupts the flow of the post.
The ideal way to include this sort of information is in a text box with formatting that sets it apart.
The information is available, but the formatting separates it from the main body of the post in the reader’s mind.
Books and websites often use this technique, so why not inside posts? It’s possible to use blockquotes for this purpose, but I wanted to keep that for quoting other people, so I decided to create text boxes using CSS.
Using Inline CSS
It is simple to use inline CSS to create a box around a paragraph.
First, use the default WordPress Editor (ie the Visual tab page) to write the entire post, including the text you want displayed in a text box. When you are finished, go to the Code tab page and locate the paragraph to go in the box. Add:
<p style="padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid">
immediately before the text and </p> immediately after it. Save this and you should get a text box similar to this one:
Note, if you are using the Visual Editor, with the default settings, you cannot use <div> instead of <p>. If you do, WordPress converts it to <p> anyway and may break the code in the process! Unfortunately this means that this method only works for one paragraph – see my Colour Selector, which can create the appropriate code for you. This works for simple text boxes (inline CSS or external CSS) as outlined in this post or for rounded text boxes.
Using External CSS
If you want your text boxes to have a common style across your site, use external, rather than internal, CSS. You set up the style information once, in your external CSS file and reference it each time you add a text box.
If you want to change the style, you only need to change it in one place (the external CSS file) and it will automatically change in every post using this style. With inline CSS you would have to manually change each post.
The external CSS file for the theme you are using is normally style.css in the wp-content/themes/yourtheme folder. Download this file 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:
.textbox {padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid}
The style information can be changed to suit your needs. When finished, save the file, then ftp it back up to the server, overwriting the original.
To create a text box, simply reference the new class (textbox) in a <p> tag. Use the Visual Editor to write the entire post, go to the Code tab page, locate the paragraph to go in the box and add: <p class="textbox"> immediately before the text and </p> immediately after it.
Apparently wordpress.com does not allow any inline CSS and charges extra for external CSS. If so, the inline CSS solution above will not work for you. If you have purchased the CSS Editing upgrade, the external CSS solution above should work.
There are other options that don’t use CSS, as outlined by Lorelle VanFossen, but be warned: these techniques are considered out of date by most people, including Lorrelle who is providing them as as workaround to wordpress.com’s CSS policy.
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 for either the internal or external CSS method. This means you don’t even need to type the line calling the text box style. Simply go the Code tab page, select the paragraph you want and click the quicktag. Easy!
I found an excellent tutorial on setting up quicktags by Podz, and a useful article by Lorelle VanFossen. Note Lorelle’s advice on making a copy of your changes so you can add them again if lost when upgrading WordPress.
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 the original 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 (if using the inline CSS method):
edButtons[edButtons.length] =
new edButton('ed_textbox'
,'textbox'
,'<p style="padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid">'
,'</p>'
,''
);
If you are using the external CSS method, you need to add this instead:
edButtons[edButtons.length] =
new edButton('ed_textbox'
,'textbox'
,'<p class="textbox">'
,'</p>'
,''
);
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 textbox quicktag in the Code tab page of the editor, which will add the appropriate code when you select the paragraph and click the quicktag.
Next article: Rounded Corners
As you can see, simple square text boxes are easy and effective. However, what I really want are text boxes with rounded corners. I explain how to create these in my Rounded Text Boxes in Posts article.
Note: I now created have a Colour Selector, which can create the appropriate code for you. This works for simple text boxes (inline CSS or external CSS) as outlined in this post or for rounded text boxes.
Loading ...
Excellent tip!
[...] This text should appear in a rather spiffy little box, useful for highlighting or emphasising text, instead of using blockquotes. If it does, and you’d like to know how to do it, head over to More Than Scratch The Surface, where Stephen will show you how to make your own simple CSS text box in posts. [...]
I am in the process of digesting some CSS basics right now and this is a great example of its power. Look forward to your next article.
Hi K-IntheHouse,
If you are talking about the Rounded Text Boxes in Posts article, I wrote it months ago – I just didn’t link to it above (I’ve done so now!).
Will I need to pay Wordpress for external CSS even if I host it on my own server with my own domain name?
CJ, No, that’s only if you use wordpress.com (ie the same way you might use blogspot.com). Wordpress.com impose limitations on what you can do.
If you install WordPress on on your own server (or a hosted server), then you have total control over everything, including CSS. And it’’s free (apart from any hosting and domain name costs of course). That’s the way to go!
I am not using wordpress but I tried this in a text editor and in KompoZer. The boxes work great in I.E. 6 but nothing in firefox 2.0.0.7. Is there something else that should be done to get the textbox to show up in firefox?
I am using the external style sheet.
Thanks.
By the way it is showing up in firefox if I do it as inline. I am just hoping there is a way to do it externally.
Thanks again.
I found the problem. Actually a markup validator found it. It seems firefox didn’t like the curly bracket between the .textbox entry and the next to last entry in my style sheet.
I’ll be glad when I learn this stuff.
Thanks anyway.
Hi Thomas,
I’m glad you worked it out so quickly (before I could even respond!). It’s often the little things, like ‘punctuation’ that cause trouble. IE is more forgiving, but it’s better to get it right for the other browsers. It’s well worth learning the basics of CSS because you can do so much with it. Anyway, good luck!
Thank you.
I was just getting the basics of HTML and have made a couple of websites on cd that I sent to my daughters to run locally. Now I find out about CSS. Now there are two markups I don’t know enough about.
I am grateful that there are tutorials like this. I don’t plan on becoming and expert but with what I am learning I WILL be able to create a decent website.
Thanks for the tutorials.
Hi Thomas, Sorry I’m so slow responding this week.
Wait until you discover Javascript!
Seriously HTML and CSS is great place to start. The thing is, you don’t need to know them both inside and out to create a decent website. Simply learn the basics, then if you have anything that you’re not sure how to do, use Google – there are loads of tutorials all around the Internet. If you want to make sure what you’ve done is correct, you can validate your HTML and your CSS.
It may not be quite as simple as I make it sound, but the point is that the information is out there, and if you persist you’ll learn a lot. Anyway, good luck!
Thanks Stephen,
You are correct. The information is out there and I am learning. You are also right about not having to learn the stuff inside and out to build a decent site. I have mine up and running and I think it’s pretty good. I just wish I had known links in menus aren’t accessible to crawlers before I put those nifty menus on all my pages. Good thing I’m trying to figure out the site map thing.
By the way if any of you get a chance check out http://alongtheway.110mb.com/
Hi Thomas,
I’ve checked the site out and that’s good! The menus you’ve got at the moment should be fine. The links are there in the HTML – even there is some javascript involved, the bots will find the links as the <a href’s are there in the HTML. It should be fine.
Thank you Stephen,
I was hoping that would be the case. Since the menu links themselves are HTML and in the document and the javascript just handles the images, size and placement of the menu.
I am so glad I am finding all this info. I started trying to make a website with a site builder online but it gave no control. Then I found kompozer but couldn’t position things how I wanted. Now that I have learned some things I do it all in notepad2. CSS is cool. Now I have control.
I must again thank you and everyone else who takes the time to share this knowledge.
Thomas,
Nice to hear from you again. I’m glad it’s going well. I used to use DreamWeaver, but I do everything in a text editor now for the reason you mention: control!
Another great tips!
Using this box would add variety to my posts.
What I often do to break the blandness of WP posts is just by inserting pictures between paragraphs.
thank’s
debt advisor, that’s a good point. I do use text boxes sometimes to break up the text. It can make a real difference to a long post.
Thanks for sharing this simple method of creating simple text boxes by just using some html tags and CSS.
I personally prefer the first method using internal CSS as it’s far more easy to implement, even though you can’t just modify the look of the text box in all posts at once. It could potentially become an issue in the event you wish to change templates/themes.
Have you ever notices some blog posts posting square 250*250 ads at the top of every post and the text just gets automatically arranged around it? Do you have some post or guide as to how I can implement that please. Not just to inset ads, even for inserting individual pictures for posts.
Thanks
Hi Drunk Text,
Inline CSS is certainly easier, but it’s better to go with the external one for the reasons mentioned. Of course if I ever finish my half written WordPress plugin, that will be better still!
For the ads, I don’t have a guide on it, but they are probably just using CSS float. For example, add a style section to the img tag (or whatever tag you’re using), as such:
<img style=”float: left;” src…
That’s obviously not finished and you may also want to add other style attributes (such as margin etc), but that should get you the basic effect. You can use float:right instead of left if you want the image on the right hand side.
Hope that helps.
Hmm well I’ll check it out and see how I go, to tell you the truth I never tried using CSS to do it, I’ve tried doing it in HTML a while back using tables and putting the first paragraph of the post in a row with two columns one for the image and the other for the text.
The only problem was that when the first paragraph was too long or too short (not the right number of lines) the layout was far from good looking.
Hi DT,
Hi Stephen,
I was playing with this textbox on my website. I found that if I tried to add some things like headers or url the textbox would break. I see from your note about using div will not work for worpress but I found that for use on my website it works great.
On a textbox I want to add certain styles or url I just replace p with div. This textbox just keeps getting better. I now have about 4 versions in my stylesheet.
Thanks again and may God bless you,
Thomas.
Hi Thomas,
I have a feeling that there has been a change in the way that WordPress treats div tags – maybe in 2.3. I’m not really sure though. But if it works for you, great! I’m glad it’s working for you..
Sorry Stephen. I should clarify. I am doing this on a non wordpress site.
I pointed out your note on div and wordpress so as not to make others think to try this in wordpress. I’m just using notepad2, filezilla, and a free server space.
I originally found your article searching for a simple textbox. That’s what is nice about your suggestions. They can also apply to those learning html who don’t use wordpress. That is why I stumbled this article last night. Others could benefit from this as well.
Hi Stephen,I’ve tried your box solution but have run into a small problem.If you look at my homepage – http://www.fatburningreviews.com, you’ll see in the far right sidebar I’ve added two boxes.The bottom one connects to surveymonkey, and here your box solution works fine.But in the top box where I’ve inserted AWeberemail list subscription code, the box doesn’t seem to work – or at least intermittedly.Any idea?Thanks!
Hi Derek,
I had a quick look and it seems that you’ve got a tags instead of p tags. I hope that helps..
Hey Stephen this is a great tip and there are also alot of other websites out there that can teach you css is a very understandable way. Just search google for “css tricks” and you’ll get hundreds of beneficial websites. Also, check out youtube for css videos. You’ll be surprised at how many there are.
This is a good tip. I use boxes like these frequently on my blogs to make ‘calls-to-action’ stand out.
I just tried this in one test post both ways; one with the stile in and second in css file. It’s useful for showing code or edited/added content to a post etc. Because i will use the stiling decoration only at times (but with a few paragraphs in one larger block), I tried adding the css style right in html code and only to the particular article post and it worked fine or the styling can be added to the page of the page also, e.g.:
.divtest {
background: #f7f7f7;
border: 1px solid #ccc;
padding: 0 1em;
margin: 1em 15 0;
}
Test text....
.....
.........
.......
.....
etc.
I hope the code above will show okay.
Sorry, it didn’t show encasing opening and closing tags for:
style type=”text/css” and after the stile code /style and h1, div’s, p’s, font.
Basically all goes into the html in WP Tool when writing the article.
That my friend is some sexy CSS. I’m going to use this in conjunction with the rounded box tool to get some sexy results.
I’m still new to writing my own CSS for my sites, and this is one of those basic things I can start learning. Not gonna have time to learn it thoroughly, but little useful snippets like this is always useful, thanks.
This is a great tip, thanks. I use this to make requests stand out, like RSS feeds.
This is a great tip. thank you so much. I am just learning web design and this is a big help.
I am still new to writing my own styles for my sites, and this is one of those basic things I can start learning. Not gonna have time to learn it thoroughly, but little useful snippets like this is always useful, thanks.
Sorry, I removed the link because it points to a pharmaceutical product…
The quick tag stuff is pretty confusing, hope I get a hang of it!
Thanks for the tip on inline css, I use a CMS and and can’t access the internal css files, so this makes it easy for me to add unique call-to-action boxes.
Nice work. If anyone ever needs this i am just going to send them to your post. You have some great step by step tutorials and links to other sites.
[...] http://www.scratch99.com/2007/06/wordpress-simple-css-text-boxes-in-posts/ – I created this text box with this article [...]
It is also entertaining to note that we can modify or over-ride an external CSS style, through the in-line method. Just reference the class, they add some additional style. Here is an example.
CSS file:
.textbox {padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid}
Code:
p class=”textbox” style=”background-color: #CCCCCC;” text /p
@Abdul the quicktags look scary at first but they aren’t too bad once you stop and think about it.
Thanks for the great tips
Thanks – great post content! It seems like a more elegant way of emphasizing text than just ‘bolding’ it. I’m going to test it out on my blog later today!
This tip is really useful, and not to mention really easy. Back when I was just starting out to web design (I was scrawny, HTML-semi-literate kid of 11 then), I would’ve probaby made a bunch of graphics for the background and borders, and then proceed to code it in a complex way. That was before I discovered CSS.
So up to now, I’m still amazed at the what CSS can achieve with minimal and simple coding. Thanks for this!
Wow! great coding. Keep up the good work.
Really nice tip. I have used the technique you described to beautify my code snippets:
Howto:
http://ricochen.wordpress.com/2009/07/01/beautify-your-code-with-pygments/
Example:
http://ricochen.wordpress.com/2009/06/28/output-df-command-in-colors/
Thanks Rico,
Glad it was of use.
[...] July 1, 2009 at 2:35 am · Filed under Tip, css, html Ever wonder how I colour-coded my code blocks with colours? CSS? That’s almost right. WordPress does not support css customisation for standard accounts, but you can get around with this limitation by using inline css. Here’s a good post talking about this technique: http://www.scratch99.com/2007/06/wordpress-simple-css-text-boxes-in-posts/ [...]