A few months ago I published separate tutorials on how to add content boxes and how to add color buttons to your website. Apparently that struck a cord because there was a number of people who left comments those posts.
With that said, I thought it’d make sense to make this process available here at StudioPress, considering we get a lot more traffic here than I do on my site.
Colored Content Boxes
Here are the 6 content boxes that this tutorials will show you how to implement:
In your text editor, all you need to do is wrap the text in a div with a class applied to it. Here’s how that should look:
| <div class="content-box-blue">Enter content box text here.</div> |
Add Content Box CSS to Your Style Sheet
In your theme’s style.css file, place the following code and edit as necessary:
| /* Content Boxes | |
| ------------------------------------------------------------ */ | |
| .content-box-blue, | |
| .content-box-gray, | |
| .content-box-green, | |
| .content-box-purple, | |
| .content-box-red, | |
| .content-box-yellow { | |
| margin: 0 0 25px; | |
| overflow: hidden; | |
| padding: 20px; | |
| } | |
| .content-box-blue { | |
| background-color: #d8ecf7; | |
| border: 1px solid #afcde3; | |
| } | |
| .content-box-gray { | |
| background-color: #e2e2e2; | |
| border: 1px solid #bdbdbd; | |
| } | |
| .content-box-green { | |
| background-color: #d9edc2; | |
| border: 1px solid #b2ce96; | |
| } | |
| .content-box-purple { | |
| background-color: #e2e2f9; | |
| border: 1px solid #bebde9; | |
| } | |
| .content-box-red { | |
| background-color: #f9dbdb; | |
| border: 1px solid #e9b3b3; | |
| } | |
| .content-box-yellow { | |
| background-color: #fef5c4; | |
| border: 1px solid #fadf98; | |
| } |
Color Buttons
Here are the 6 color buttons that this tutorials will show you how to implement:
In your text editor, all you need to do is add a class to your link. Here’s how that should look:
Add Color Button CSS to Your Style Sheet
In your theme’s style.css file, place the following code and edit as necessary:
It’s THAT simple. So go on, add some content boxes or some color buttons to your website, and stand out!