Categories
Blog Improvement Project Other

How to put boxes around your text – an idiot’s guide!

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

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!

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 even this is wrong because it’s converting the quotation marks. Just replace them by typing in quotation marks from your keyboard.

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

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.

🙂

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *