Making specific elements of your content stand out can really slam the message home to the reader.
Yet the default WordPress editor doesn’t provide too many options on making your content look great.
Simple elements like a styled box around a sentence can really bring a post to life, or get that important message noticed.
This article will walk you through the process of adding a little bit of code to your content to give it that extra kick.
Creating a coloured content box
First I will show you how to add a nice blue content box to your content, I will provide more examples at the end of this post.
To start with, we need to add the following code to your stylesheet:
To add this code, go into your WordPress admin and navigate to Appearance > Editor. By default the stylesheet should be open.
Once you have copied the existing stylesheet, scroll to the bottom, paste the above code then click Update File.
If you now head on over to the edit page of the content you would like to have the blue box, and click the Text tab near the top right of the editor.
In here, we wrap your content in a <div> tag with the class content-box-blue like so:
That class has to match up with the term we used with the bit of code we added to the stylesheet else this will not work.
If the colours aren’t to your liking, then go to http://www.colorpicker.com/ and select the colours you would like and replace the background colour’s hash, and the borders hash.
Here are a few others you can use – just remember to ensure the class matches up with the style:
- You may not see these boxes within the editor screen – if your theme supports editor styles, then copy the stylesheet code into the editor styles as well.
- It’s always worth adding a little bit of text after the closing </div> otherwise you might end up typing inside the content box by accident.
- Remember to switch back to the visual tab after you have added the div