Adding Color Content Boxes via CSS

When it comes to my/our industry, one of the coolest things to me has always been that you can usually sit down and find tutorials online to build or do just about anything you can imagine, and these tools are usually shared openly by other developers.

A prime example of this was last week when I shared one of Brian Gardner’s posts from Studiopress on how to add some CSS3 buttons to a website project w/ just a few lines of code. I ran into another post this evening from the same folks at Studiopress about adding color content boxes to a site by adding some additional lines to your CSS. This can come into handy on a wide variety of projects so I figured I would again reshare some of their amazing content here for those of you that subscribe to my feed, and honestly so I can easily locate it when I want to drop it in somewhere as well…

To get started, you just need to open up your wordpress theme and find your style.css file, this is where you will want to add the following lines of code:

/* 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;
}

Next, just add this line of code into your page or post (in html mode) and voila… colored boxes.

<div class="content-box-blue">Enter content box text here.</div>