<span class="first-character">Your First Character here</span>

Buttons



/*----Small Buttons-----*/
<a href='/' class="button small red">Button Text</a>
<a href='/' class="button small pink">Button Text</a>
<a href='/' class="button small orange">Button Text</a>
<a href='/' class="button small yellow">Button Text</a>
<a href='/' class="button small green">Button Text</a>
<a href='/' class="button small turquoise">Button Text</a>
<a href='/' class="button small blue">Button Text</a>
<a href='/' class="button small purple">Button Text</a>
<a href='/' class="button small midnight">Button Text</a>
<a href='/' class="button small grey">Button Text</a>
<a href='/' class="button small asbestos">Button Text</a>
<a href='/' class="button small dark">Button Text</a>

/*----Medium Buttons-----*/
<a href='/' class="button medium red">Button Text</a>
<a href='/' class="button medium pink">Button Text</a>
<a href='/' class="button medium orange">Button Text</a>
<a href='/' class="button medium yellow">Button Text</a>
<a href='/' class="button medium green">Button Text</a>
<a href='/' class="button medium turquoise">Button Text</a>
<a href='/' class="button medium blue">Button Text</a>
<a href='/' class="button medium purple">Button Text</a>
<a href='/' class="button medium midnight">Button Text</a>
<a href='/' class="button medium grey">Button Text</a>
<a href='/' class="button medium asbestos">Button Text</a>
<a href='/' class="button medium dark">Button Text</a>
  
/*----Large Buttons-----*/
<a href='/' class="button large red">Button Text</a>
<a href='/' class="button large pink">Button Text</a>
<a href='/' class="button large orange">Button Text</a>
<a href='/' class="button large yellow">Button Text</a>
<a href='/' class="button large green">Button Text</a>
<a href='/' class="button large turquoise">Button Text</a>
<a href='/' class="button large blue">Button Text</a>
<a href='/' class="button large purple">Button Text</a>
<a href='/' class="button large midnight">Button Text</a>
<a href='/' class="button large grey">Button Text</a>
<a href='/' class="button large asbestos">Button Text</a>
<a href='/' class="button large dark">Button Text</a>

















Alert Boxs



/*----success message----*/
<div class="alert-message success">
<i class="fa fa-check-circle"></i>
success message : You successfully read this important message.
</div>
  
/*----Alert message-----*/
<div class="alert-message alert">
<i class="fa fa-info-circle"></i>
Alert message : This alert needs your attention.
</div>
  
/*----Warning message-----*/
<div class="alert-message warning">
<i class="fa fa-exclamation-triangle"></i>
Warning message : Warning! Best check yo self.
</div>
  
/*----Error message-----*/
<div class="alert-message error">
<i class="fa fa-exclamation-circle"></i>
Error message : Oh snap! Change a few things up.
</div>




/*----Alert message-----*/
[alert title="Alert message" icon="info-circle"]
This alert needs your attention
[/alert]

/*----Success message-----*/
[success title="Success message" icon="check-circle"]
You successfully read this important message.
[/success]

/*----Warning message-----*/
[warning title="Warning message" icon="exclamation-triangle"]
Warning! Best check yo self.
[/warning]

/*----Update message-----*/
[update title="Update message" icon="info-circle"]
You successfully to update your content.
[/update]

/*----Info message-----*/
[info title="Info message" icon="info-circle"]
This a simple info for you.
[/info]

/*----Error message-----*/
[error title="Error message" icon="exclamation-circle"]
Oh snap! Change a few things up
[/error]



Code Boxs

[code type="HTML"]Yours HTML Code Here[/code]

[code type="CSS"]You CSS Code Here[/code]

[code type="JavaScript"]You JavaScript Code Here[/code]

[code type="JQuery"]You JQuery Code Here[/code]





Contact Form





[contact/]
/*----or-----*/
[contact][/contact]




Two Columuns


Two Columuns
[2column]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
[/2column]









Three Columuns



[3column]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
[/3column]











Fours Columuns


[4column]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
[/4column]

Tabs Horizontal
[tab]
  [content title="Your Title Here"]Your Text Here[/content]
  [content title="Your Title Here"]Your Text Here[/content]
  [content title="Your Title Here"]Your Text Here[/content]
[/tab]

If you want to add some icon you can add icon property like this
[tab]
  [content icon="facebook" title="Your Title Here"]Your Text Here[/content]
  [content icon="pinterest" title="Your Title Here"]Your Text Here[/content]
  [content icon="twitter" title="Your Title Here"]Your Text Here[/content]
[/tab]



Tabs Vertical
[vtab]
  [content title="Your Title Here"]Your Text Here[/content]
  [content title="Your Title Here"]Your Text Here[/content]
  [content title="Your Title Here"]Your Text Here[/content]
[/vtab]

If you want to add some icon you can add icon property like this
[vtab]
  [content icon="facebook" title="Your Title Here"]Your Text Here[/content]
  [content icon="pinterest" title="Your Title Here"]Your Text Here[/content]
  [content icon="twitter" title="Your Title Here"]Your Text Here[/content]
[/vtab]





Accordion



To create a accordion just create code like below.

[accordion]
  [item title="Accordion 1"]Your Text Here[/item]
  [item title="Accordion 2"]Your Text Here[/item]
  [item title="Accordion 3"]Your Text Here[/item]
  [item title="Accordion 4"]Your Text Here[/item]
[/accordion]

If you want to add some icon you can add icon property like this
[accordion]
  [item icon="facebook" title="Accordion 1"]Your Text Here[/item]
  [item icon="twitter" title="Accordion 2"]Your Text Here[/item]
  [item icon="pinterest" title="Accordion 3"]Your Text Here[/item]
  [item icon="diamond" title="Accordion 4"]Your Text Here[/item]
[/accordion]





Image



to create image u can use this shortcode method

[img src="Image_URL_1"/]
/*------- or -------*/
[img src="Image_URL_1"][/img]

/*------- complete code ------*/
[img url="URL_link" width="Image_width" height="Image_height" rel="Image_rel" src="Image_URL_1"/]

Gallery Image
<div class="glpost">
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
</div>

Or if you want image with some link you can create like this
<div class="glpost">
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
</div>



[gallery]
  [img src="Image_URL_1"][/img]
  [img src="Image_URL_2"][/img]
  [img src="Image_URL_3"][/img]
  [img src="Image_URL_4"][/img]
  [img src="Image_URL_5"][/img]
  [img src="Image_URL_6"][/img] 
[/gallery]




First Big Gallery


To create First Big Gallery just create code like below..
[bgallery]
  [img src="Image_URL_1"][/img]
  [img src="Image_URL_2"][/img]
  [img src="Image_URL_3"][/img]
  [img src="Image_URL_4"][/img]
  [img src="Image_URL_5"][/img]
[/bgallery]>

[youtube src="youtube_video_ID"/]
/*------- or -------*/
[youtube src="youtube_video_ID"][/youtube]






Dailymotion

To create dailymotion player just create code like below..
[dailymotion src="Dailymotion_video_ID"/]
/*------- or -------*/
[dailymotion src="Dailymotion_video_ID"][/dailymotion]





Soundcloud


To create soundcloud player just create code like below..
[soundcloud src="Soundcloud_ID"/]
/*------- or -------*/
[soundcloud src="Soundcloud_ID"][/soundcloud]





Maps


To create google maps just create code like below.
[map src="Google_Maps_ID"/]
/*------- or -------*/
[map src="Google_Maps_ID"][/map]
/*------- complete code -------*/
[map width="Map_Width" height="Map_Height" src="Google_Maps_ID"/]


[map src="Google_Maps_ID"/]



[media]Your Link Here[/media]
/*------- complete code -------*/
[media width="Media_Width" height="Media_Height"]Your Link Here[/media]






Tooltip


To create Tooltip just create code like below.
[tooltip url="Tooltip_URL" title="Tooltip_title"]Text/Element went mouse hover or enter the tooltip[/tooltip]





Slider


To create a Slide make code like below.
[slide]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
[/slide]





Carousel


To create a carousel make code like below.
[carousel]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
[/carousel]





Table


To create a Table make code like below.
<table class='snews-table'>
  <thead>
    <tr>
      <th>Label 1</th>
      <th>Label 2</th>
      <th>Label 3</th>
      <th>Label 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Label 1">Description 1</td>
      <td data-label="Label 2">Description 2</td>
      <td data-label="Label 3">Description 3</td>
      <td data-label="Label 4">Description 4</td>
    </tr>
    <tr>
      <td data-label="Label 1">Description 1</td>
      <td data-label="Label 2">Description 2</td>
      <td data-label="Label 3">Description 3</td>
      <td data-label="Label 4">Description 4</td>
    </tr>
  </tbody>
</table>





Review


To create a Review make code like below.
[review]
  [content title="Description Title" label="Overall Score"]Your Summary Description Here[/content]
  [item value="Value Here"]Description Here[/item]
  [item value="Value Here"]Description Here[/item]
  [item value="Value Here"]Description Here[/item]
  [item value="Value Here"]Description Here[/item]
  [item value="Value Here"]Description Here[/item]
[/review]

Exemple:

[review]
  [content title="Summary" label="Overall Score"]My fellow Earthicans, as I have explained in my book Earth in the Balance, and the much more popular Harry Potter and the Balance of Earth, we need to defend our planet against pollution. Also dark wizards but I know you in the future back in our hands.[/content]
  [item value="7"]Gameplay[/item]
  [item value="8"]Graphics[/item]
  [item value="10"]Sound[/item]
  [item value="5"]Ease of play[/item]
  [item value="9"]Hardware[/item]
[/review]






Post Pagination


To create a carousel make code like below.
[page]
  [item]Content Description[/item]
  [item]Content Description[/item]
  [item]Content Description[/item]
  [item]Content Description[/item]
  [item]Content Description[/item]
[/page]





Combine


You can combine each Shortcode, like use Tabs, Accordion, youtube and etc, in one Exemple
[tab]
  [content title="Soundcloud"]
    [soundcloud height="400" visual="true" src="Soundcloud_ID"][/soundcloud]
  [/content]
  [content title="Youtube"]
    [youtube src="Video_ID"][/youtube]
  [/content]
  [content title="Maps"]
    [map src="Google_Maps_ID"][/map]
  [/content]
  [content title="Accordion"]
    [accordion]
      [item title="Accordion 1"]Your Text Here[/item]
      [item title="Accordion 2"]Your Text Here[/item]
      [item title="Accordion 3"]Your Text Here[/item]
    [/accordion]
  [/content]
[/tab]