Shortcode Example

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=#e5e5e5

Template :

<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

Leave a Comment

Your email address will not be published. Required fields are marked *