How to make your content stand out with content boxes

Coloured content boxes in WordPress

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.

Before we edit this file, please copy everything there (press ctrl/cmd + a to select everything, then ctrl/cmd + c to copy) and paste it (ctrl/cmd + v) into a text file in notepad or something similar – Keeping an original copy is never a bad thing!

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.

WordPress text tab

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.

This is an exmple of the completed box!

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:

Green content box
Red content box
Purple content box
Orange content box

Notes:

  1. 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.
  2. 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.
  3. Remember to switch back to the visual tab after you have added the div