How to Add Content Boxes to a Artisteer WordPress Theme

While working on many wordpress themes, powered by Artisteer, people asked me how to add content boxes to a Artisteer WordPress Theme.
There are many WordPress Plugins available, which enable you to add different color boxes to make your post content stand out. I have also seen many other premium wordpress themes using Shortcodes, which isn’t necessary for adding color boxes to make your core theme heavy loaded with lot code when it’s easily doable by using css and html code.

I hope Artisteer will enable one day for user’s to generate color content boxes in their software directly, but let’s see how easily we can implement it into Artisteer WordPress Theme by using few lines of html and adding CSS to our Theme Style Sheet.

Here is how we will write html code into our WordPress post/page editor, make sure you click HTML button on the right top of the editor to write the code in HTML tab.

Implementing the Content Boxes to a Artisteer WordPress Theme

Add CSS to your Artisteer Theme Style Sheet

Following CSS is used in one of my clients project to add colored Boxes, you should adjust it according to your needs to Add Content Boxes to your website requirements.

.bdn-box-green,
.bdn-box-grey,
.bdn-box-darkgrey,
.bdn-box-purple,
.bdn-box-pink,
.bdn-box-skyblue,
.bdn-box-naviblue,
.bdn-box-red,
.bdn-box-orange,
.bdn-box-brown
{
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}
.bdn-box-green h2,
.bdn-box-grey h2,
.bdn-box-purple h2,
.bdn-box-pink h2,
.bdn-box-skyblue h2,
.bdn-box-naviblue h2,
.bdn-box-red h2,
.bdn-box-orange h2,
.bdn-box-brown h2
{
color:#000;
font-size: 14px;
line-height: 1.4;
}

.bdn-box-darkgrey h2
{
color:#fff;
font-size: 14px;
line-height: 1.4;
}

.bdn-box-green {
background-color: #79ad27;
border: 1px solid #181f29;
color:#FFF;
}

.bdn-box-grey {
background-color:#d8d8d8;
border: 1px solid #181f29;
color:#000;
width:50%;
float:left;
margin-right:10px;

}

.bdn-box-darkgrey {
background-color:#373737;
border: 1px solid #d8d8d8;
color:#fff;
width:30%;
float:left;
margin-left:10px;
}

.bdn-box-purple {
background-color:#8e40bb;
border: 1px solid #181f29;
color:#FFF;
}

.bdn-box-pink {
background-color:#bf34a0;
border: 1px solid #181f29;
color:#FFF;
}

.bdn-box-skyblue {
background-color:#00b3f1;
border: 1px solid #181f29;
color:#000;
}

.bdn-box-naviblue {
background-color:#567ab3;
border: 1px solid #181f29;
color:#FFF;
}

.bdn-box-red {
background-color:#ae3d3e;
border: 1px solid #181f29;
color:#FFF;
}

.bdn-box-orange {
background-color:#ee8f4b;
border: 1px solid #181f29;
color:#FFF;
}

.bdn-box-brown {
background-color:#9f4801;
border: 1px solid #181f29;
color:#FFF;
}

So you see how easy it is to implement different Content boxes into your post, I hope you like the approach and show us how you implement it in your themes.