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

The BookDepository

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!


Send to Kindle

25 Comments

  1. Beth F says:

    How easy is that?? Great job explaining it!!! I’m going to see if works in Blogger.

  2. Wendy says:

    THANK YOU so much!!! I have wondered how to do that :)

  3. Beth F says:

    It does work in Blogger! Thanks!!!

  4. Jackie says:

    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!

  5. Sandy says:

    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!

  6. Nymeth says:

    Wheeee! Thank you!

  7. Violet says:

    Thanks for the info, I use the tag blockquote for the boxes, but I haven’t checked whether you can fill it with color :)

  8. Val says:

    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!

    1. Jackie says:

      I struggle to find things like this described in laymans terms too. I’m glad you found it useful!

      1. Val says:

        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.

        1. Jackie says:

          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?

          1. Val says:

            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

        2. Greg says:

          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

          1. Greg says:

            And I saw my HTML was stripped so ignore the example part of my comment.

          2. Greg says:

            And even this is wrong because it’s converting the quotation marks. Just replace them by typing in quotation marks from your keyboard.

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

    1. Greg says:

      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.

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

  11. Glenn says:

    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

  12. Nice…easy and no plugin required…thanks for sharing you experience….keep the good works going…:-)

  13. i thinks its not working for current version of wordpress :(

  14. Anna says:

    Thank you Thank you thank you thank you! I almost pulled out my hair trying to do this!

  15. Médiation says:

    Very usefull information. Thanks.

  16. Ross says:

    Many thanks. The only advice I’ve found that doesn’t make a simple task ludicrously complex.

  17. Ron says:

    This is not working for WordPress, all it does is just shows up the text only with no box. :(

Trackbacks/Pingbacks

  1. Blog Improvement Project Week #12: Mid-Year Review | Farm Lane Books Blog
  2. Rhode Island dialect sample | United States Dialects

Leave a Reply