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
This is Heading.
Your Content goes here… Lorem aest sodales vulputate. Suspendisse aliquam, ante convallis mattis luctus neque
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | .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.
10 Comments
Very nice.. Good to see how easy it is. Thanks for your guide. Can I implement this in simple html website
Yes, Ahmed… It’s easily doable in html website too, it’s the power of CSS which makes these difficult looking things make easy with little help of html.
Thanks for the tip, it will surely help me to reduce use of plugin.
i am amazed how easily it is doable without use of any plugin, bazish, how to lineup two boxes on one row. sorry for my poor english
really thx bazish, this is very usefull, wow!
Thank you for useful quick tip. This is exactly what I need. Now I can safe a lot more time and resources by not using plugins for this.
very nice, i can see how artisteer getting coders like you to enrich its ability to be the number one wordpress theme creater software in the market.
very nice, why artisteer not allowing these options to adopt in it’s software for users.
Naeem, you should check artisteer new version, as it has lot of new enhancements, which really make it stand out.
Excellent solution, thanks for share.
V4 out as beta with lot of new possibilities, but still lack on few areas…