You can Understand the basic components of Shortcode creater.
Name : box
Hence the shortcode created will be xys_box
Nested Shortcode Name : Leave it blank as it won’t be used
Attributs :
bgcolor=#000,textcolor=#FFF,title,width=100%,bordercolor=#e5e5e5Template :
<div class=”titled_box” style=”width:##width##”>
<h6 class=”titled_box_title” style=”background:##bgcolor##;color:##textcolor##;border-color:##bordercolor##”><span>##title##</span></h6>
<div class=”titled_box_content” style=”border-color:##bordercolor##;”> ##content## </div>
</div>
Custom CSS :
div.xys_box h6{font-size:12px;letter-spacing:1.6px;margin:0;padding:0 0 5px 0;text-transform:uppercase;}
div.xys_box .titled_box{margin-bottom:20px;color:#888;}
div.xys_box .titled_box_title{border:1px solid #111;padding:10px 20px;}
div.xys_box .titled_box_content{position:relative;overflow:hidden;clear:both;padding:20px;border: 1px solid e5e5e5;}
div.xys_box .titled_box_content {
background-color:#f6f6f6;
background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f6f6f6));
background:-moz-linear-gradient(top,#fff,#f6f6f6);
background:-o-linear-gradient(top,#fff,#f6f6f6);
background:linear-gradient(top,#fff,#f6f6f6);}Output
Shortcode used
[xys_box title="BOX Title"]Inside box Content[xys_box]Output
BOX Title
Inside box Content
Shortcode used
[xys_box title="BOX Title" width="25%"]Inside box Content[xys_box]Output
BOX Title
Inside box Content