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