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!
