I have spent the afternoon learning how to put boxes around text in wordpress. It has taken me a while, because all the guides out there seem to require a basic understanding of html – which I don’t have!
So I thought I’d share my new found knowledge with you.
This is called ‘inline CSS’ so you add this html code into your post (the alternative is external CSS, but I haven’t worked this out yet!).
If you copy the following html and paste it into your text editor you will get a black box around your text:
<p style=”padding:6px; color: grey; background-color: white; border: black 2px solid”>Text</p>
Text
Changing the number after the padding changes the distance between the text and the box, for example changing it to 10px makes the box further from the text.
<p style=”padding: 10px; color: grey; background-color: white; border: black 2px solid”>Text</p>
Text
The word color refers to the text. As far as I can tell you can just write the colour of text you want, and it works. For example I have now changed it to red.
<p style=”padding: 10px; color: red; background-color: white; border: black 2px solid”>Text</p>
Text
The blackground-colour is the colour of the filled in box. I have now changed it to blue:
<p style=”padding: 10px; color: red; background-color: blue; border: black 2px solid”>Text</p>
Text
The border is the colour of the border, so here I’ve changed it to green.
<p style=”padding: 10px; color: red; background-color: blue; border: green 2px solid”>Text</p>
Text
The number after the border colour is the thickness of the border. Increasing the number increases the width of the border. Here I’ve increased it to 5px.
<p style=”padding: 10px; color: red; background-color: blue; border: green 5px solid”>Text</p>
Text
And of course you can change the text to anything you like!
<p style=”padding: 10px; color: red; background-color: blue; border: green 5px solid”>anything you like!</p>
anything you like!
I’m not sure all colour changes are improvements, but it gives you an idea of how it works!
I look forward to seeing lots of brightly coloured boxes on your blogs in the future!
40 replies on “How to put boxes around your text – an idiot’s guide!”
How easy is that?? Great job explaining it!!! I’m going to see if works in Blogger.
THANK YOU so much!!! I have wondered how to do that 🙂
It does work in Blogger! Thanks!!!
I’m pleased you found it useful! I’ve removed the reference to wordpress in the title – I’m glad it works in blogger too!
Hi Jackie
Thanks for this informative post, sadly not working for me in Blogger. I see Only TEXT and not border. What wrong am I doing?
You are so helpful with stuff like this. I will have to experiment with this…chances are I will have to scrap a few trys first. Blogger does freaky things to my text any time I try to anything cute!
Wheeee! Thank you!
Thanks for the info, I use the tag blockquote for the boxes, but I haven’t checked whether you can fill it with color 🙂
[…] My favourite task was blog post bingo! The idea was write ten different types of blog post within a two week period. It was really hard work, but I realised that my blog really benefited from the diversity it created. One of the posts I wrote for that challenge is still one of my most popular posts today: How to put boxes around your text – an idiot’s guide! […]
Thank you so much! I’ve been looking for an easy, clear-cut way to do this and yours is the first one that makes it easy. Yay!
I struggle to find things like this described in laymans terms too. I’m glad you found it useful!
hi Jackie,
I tried this on my website and on my wordpress blog and only got the word
text with no box. any insight? I copied it right from here to try it.
Did you paste this:
Text
into the html section of your post?
I’m afraid I don’t really know why it doesn’t work. I checked your blog, thinking you might have a dark background, but it is white too, so I’m afraid I don’t know.
Did you try the coloured ones too? Did you manage to change the colour of the word text?
Hi Jackie,
I copied and pasted a few right from this page. It turned out the way yours just did in the comment box (see the word text).
Finally, I did find something on the web that worked. It’s a very long css command. But I dd get a box on my website!
Thanks for your help. Val
Hi,
I realize this is from ages ago but the trouble you’re having is the quotation marks are not unicode (I think that’s the right word) so if you replace them with ” it should work. For example, the first one should be:
Text
And I saw my HTML was stripped so ignore the example part of my comment.
And even this is wrong because it’s converting the quotation marks. Just replace them by typing in quotation marks from your keyboard.
Bummer, apparently this is no longer valid for blogger :-/ I just tried the basic box and the only thing that shows up is the text.
I think the problem is that the quotation marks are the incorrect type of encoding so what you should do is replace them with quotation marks typed from your keyboard.
Apparently, the current version of WordPress just deletes the paragraph tag, at least it did on that one. Here is another approach that does work with WP 3.4.1
<div style=”border: solid 3px #EA967A;”>
<h5> THIS IS THE HEADING – USE OR DELETE:</h5>
<ol>
<li>PUT SOME TEXT HERE – THIS IS AN ORDERED LIST- CHANGE CODE
FOR AN UNORDERED LIST – OR NO LIST</li>
<li> AND THEN SOME MORE TEXT</li>
<li>AND THE THIRD LINE ADD TO OR SUBTRACT FROM AS NECESSARY</li>
</ol>
</div>
thanks so much Celtic Fiddler… I am so glad I kept scrolling down this page… thanks to you too Jackie… I tried doing it the way Jackie had mentioned but w/p kept deleting the code… 🙁 I was going bonkers hahah… till I came across this way of doing it… it worked… 🙂 … Just wondering if there is a way to change the background color of the box… ? thanks again… wishing everyone a fabulous day… Greta .. SGC Admin
On my website WordPress deletes the code but leaves the text!
I love finding simple solutions to problems I have, and this definitely falls into that category. Thanks for the very simple to use code.
Glenn
Nice…easy and no plugin required…thanks for sharing you experience….keep the good works going…:-)
[…] you’d like to know how to add a box around text, as I did, see this article. To add in HTML tags, you’ll need to switch from the “Visual” to the […]
i thinks its not working for current version of wordpress 🙁
Thank you Thank you thank you thank you! I almost pulled out my hair trying to do this!
Very usefull information. Thanks.
Many thanks. The only advice I’ve found that doesn’t make a simple task ludicrously complex.
This is not working for WordPress, all it does is just shows up the text only with no box. 🙁
see celtic fiddler … scroll up a bit.. he has an alternative method which worked for my w/p site… good luck… 🙂
Thanks for this info. Was looking for this all day 😉
Nice :)Just one tip. You have HTML and CSS mixed up. You should make one HTML file and one CSS file. But for a just a start this is good.
🙂
Thank you very much. It is very clear.
One more question: how do I change the size of the box?
Thanks for sharing the code. It really helped me a lot to make a text box inside a post. Keep up good work buddy
Oh at last ive been trying to find this out but like you said it was all coded and i didnt have a clue but i can now just copy and paste your example !! Thankyou very much even months later your advice is helping others
Copied and pasted your HTML to see if it worked for me and if i got a box with text written in it but all i got was the word text without a border?
Hi Kayleigh, Sorry it isn’t working for you. Are you using wordpress?
Is this what you copied?
Text
It still works for me here, but I’m afraid I can’t help you with other platforms.
[…] So here are some sample’s I’m trying, most were taken from this site: Farm Lane Books Blog […]
Thank you so much for your explanations! I have to write css for my work and sometimes I lack the basics just like you. Great work!!