[social type="facebook"]    PLACE_LINK_HERE [/social]
[social type="twitterbird"] PLACE_LINK_HERE [/social]
[social type="google"]      PLACE_LINK_HERE [/social]
[social type="pinit"]       PLACE_LINK_HERE [/social]
[social type="dribbble"]    PLACE_LINK_HERE [/social]

[social type="deviantart"]  PLACE_LINK_HERE [/social]
[social type="behance"]     PLACE_LINK_HERE [/social]
[social type="flickr"]      PLACE_LINK_HERE [/social]
[social type="linkedin"]    PLACE_LINK_HERE [/social]
[social type="stumbleupon"] PLACE_LINK_HERE [/social]

[social type="rss"]         PLACE_LINK_HERE [/social]
[social type="skype"]       PLACE_LINK_HERE [/social]
[social type="tumblr"]      PLACE_LINK_HERE [/social]
[social type="youtube"]     PLACE_LINK_HERE [/social]
[social type="vimeo"]       PLACE_LINK_HERE [/social]

[social type="facebook" style="min"]    PLACE_LINK_HERE [/social]
[social type="twitterbird" style="min"] PLACE_LINK_HERE [/social]
...

[social type="facebook" style="cicle"]    PLACE_LINK_HERE [/social]
[social type="twitterbird" style="cicle"] PLACE_LINK_HERE [/social]
...

[social type="facebook" style="flat" color="Yes"]    PLACE_LINK_HERE [/social]
[social type="twitterbird" style="flat" color="Yes"] PLACE_LINK_HERE [/social]
...

[social type="facebook" style="cicle" color="Yes"]    PLACE_LINK_HERE [/social]
[social type="twitterbird" style="cicle" color="Yes"] PLACE_LINK_HERE [/social]
...

[social type="facebook" title="Facebook" color="Yes"]       PLACE_LINK_HERE [/social]
[social type="twitterbird" title="Twitter" color="Yes"]     PLACE_LINK_HERE [/social]
[social type="google" title="Google" color="Yes"]           PLACE_LINK_HERE [/social]
[social type="pinit" title="Pinit" color="Yes"]             PLACE_LINK_HERE [/social]

[social type="facebook" size="small" color="Yes"]       PLACE_LINK_HERE [/social]
[social type="facebook" size="default"  color="Yes"]    PLACE_LINK_HERE [/social]
[social type="facebook" size="large" color="Yes"]       PLACE_LINK_HERE [/social]

[social type="twitterbird" size="small"  color="Yes"]   PLACE_LINK_HERE [/social]
[social type="twitterbird" size="default"  color="Yes"] PLACE_LINK_HERE [/social]
[social type="twitterbird" size="large"  color="Yes"]   PLACE_LINK_HERE [/social]

[social type="pinit" size="small" color="Yes"]          PLACE_LINK_HERE [/social]
[social type="pinit" size="default" color="Yes"]        PLACE_LINK_HERE [/social]
[social type="pinit" size="large" color="Yes"]          PLACE_LINK_HERE [/social]

Add dismiss functionality to all alert messages with this plugin.

[message_box type="error"   close="Yes"] ADD_CONTENT_HERE [/message_box]
[message_box type="info"    close="Yes"] ADD_CONTENT_HERE [/message_box]
[message_box type="warning" close="Yes"] ADD_CONTENT_HERE [/message_box]
[message_box type="success" close="Yes"] ADD_CONTENT_HERE [/message_box]

[message_box title='MESSAGE_TITLE' type="error" close="Yes"] ADD_CONTENT_HERE [/message_box]

Nulla ac convallis ipsum

Nulla ac convallis ipsum

Nulla ac convallis ipsum. Nulla tellus erat, dapibus in auctor quis, aliquet a magna. Ut tortor nisl; pellentesque a rhoncus non, semper a quam. Sed aliquet libero at lorem ornare auctor ornare est condimentum.

Morbi pulvinar nibh egestas massa venenatis sed condimentum turpis suscipit. In hac habitasse platea dictumst. Quisque quis odio a odio porttitor mattis! Donec id elit nec massa ornare dictum.

[lightbox src="/sj/IMAGE_SRC"  width="200" height="200" lightbox="on" align="none" border="yes" title="IMAGE_TITLE"] 

Nullam ultrices

Nulla ac convallis ipsum

Nulla ac convallis ipsum. Nulla tellus erat, dapibus in auctor quis, aliquet a magna. Ut tortor nisl; pellentesque a rhoncus non, semper a quam. Sed aliquet libero at lorem ornare auctor ornare est condimentum.

Morbi pulvinar nibh egestas massa venenatis sed condimentum turpis suscipit. In hac habitasse platea dictumst. Quisque quis odio a odio porttitor mattis! Donec id elit nec massa ornare dictum.

[lightbox src="/sj/IMAGE_SRC"  width="200" height="200" lightbox="on" align="left" title="IMAGE_TITLE"] 

IMAGE_TITLE

Nulla ac convallis ipsum

Nulla ac convallis ipsum. Nulla tellus erat, dapibus in auctor quis, aliquet a magna. Ut tortor nisl; pellentesque a rhoncus non, semper a quam. Sed aliquet libero at lorem ornare auctor ornare est condimentum.

Morbi pulvinar nibh egestas massa venenatis sed condimentum turpis suscipit. In hac habitasse platea dictumst. Quisque quis odio a odio porttitor mattis! Donec id elit nec massa ornare dictum.

[lightbox src="/sj/IMAGE_SRC"  width="200" height="200" lightbox="on" align="right" title="IMAGE_TITLE"] 

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

<ul class="thumbnails">
    <li class="span5">
        [lightbox src="/sj/IMAGE_SRC"  width="327" height="273" lightbox="on" align="none" title="IMAGE_TITLE"]
    </li>
    <li class="span4">
        [lightbox src="/sj/IMAGE_SRC"  width="255" height="120" lightbox="on" align="none" title="IMAGE_TITLE"]
    </li>
    <li class="span3">
        [lightbox src="/sj/IMAGE_SRC"  width="183" height="120" lightbox="on" align="none" title="IMAGE_TITLE"]
    </li>
    <li class="span4">
        [lightbox src="/sj/IMAGE_SRC"  width="255" height="120" lightbox="on" align="none" title="IMAGE_TITLE"]
    </li>
    <li class="span3">
        [lightbox src="/sj/IMAGE_SRC"  width="183" height="120" lightbox="on" align="none" title="IMAGE_TITLE"]
    </li>
</ul>

[gallery title="GALLERY_TITLE" width="250" height="180" columns="3"]
    [gallery_item title="IMAGE_TITLE" src="/sj/IMAGE_SRC" video_addr="PLACE_LINK_YOUTUBE" ] IMAGE_DESCRIPTION [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src="/sj/IMAGE_SRC" video_addr="PLACE_LINK_YOUTUBE"] IMAGE_DESCRIPTION [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src="/sj/IMAGE_SRC" video_addr="PLACE_LINK_YOUTUBE"] IMAGE_DESCRIPTION [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src="/sj/IMAGE_SRC"] IMAGE_DESCRIPTION [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src="/sj/IMAGE_SRC"] IMAGE_DESCRIPTION [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src="/sj/IMAGE_SRC"] IMAGE_DESCRIPTION [/gallery_item]
    [gallery_item title="IMAGE_TITLE" src="/sj/IMAGE_SRC"] IMAGE_DESCRIPTION [/gallery_item]
[/gallery]

[dropcap  color="#000" ] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...

[dropcap type="square" color="#fff" background="#333"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...

[dropcap type="round" color="#fff" background="#333"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...

Dropcap options

Style and content changes for simple variations on a standard Dropcap.

[dropcap color="#15B5E8"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...
[dropcap color="#FD6C01"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...
[dropcap color="#BE2B2A"] ADD_CONTENT_HERE [/dropcap] Lorem ipsum dolor sit amet...

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

[button ] Default icon="pencil"[/button]
[button type="primary" icon="comment"] Primary [/button]   
[button type="info" icon="sign"] Info [/button]   
[button type="success" icon="ok"] Success [/button]   
[button type="warning" icon="sign"] warning [/button]   
[button type="danger" icon="refresh"] Danger [/button]   
[button type="inverse" icon="trash"] Inverse [/button]   
[button type="link" icon="twitter"] Link [/button]

[button type="3d"       icon="download-alt"] Link [/button]
[button type="3d blue"  icon="download-alt"] Link [/button]
[button type="3d green" icon="download-alt"] Link [/button]
[button type="3d red"   icon="download-alt"] Link [/button]
[button type="3d black" icon="download-alt"] Link [/button]

You can find the more icon of usage at Font Awesome - Font Awesome - http://fortawesome.github.com/Font-Awesome

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add size= large, small, or mini for additional sizes.

[button type="primary" size="large"] Large button [/button]
[button size="large"] Large button [/button]

[button type="primary"] Default button [/button]
[button] Default button [/button]

[button type="primary" size="small"] Small button [/button]
[button size="small"] Large Small [/button]

[button type="primary" size="mini"] Mini button [/button]
[button size="mini"] Mini button [/button]

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

[button type="primary" size="large" full="block"] Block level button [/button]
[button size="large" full="block"] Block level button [/button]

Disabled state

For disabled buttons, add the state=disabled class to links and the disabled attribute for <button> elements.

[button type="primary" size="large" state="disabled"] Primary button [/button]
[button size="large" state="disabled"] Button [/button]

Customization Options / Features

• type – selects type button ,available (primary, info, success, warning, danger, inverse, link, 3d)
• icon – add any mini-icon (from the Icons section) here.
• size – button size, available ( mini, small, default, large)
• full – the full width of a parent
• target – link target, ex. “_blank”
• state – disabled buttons, available ( true, disabled)

Unordered lists

A list of items in which the order does not explicitly matter.

[list type="disc"]
[list_item] ... [/list_item]
[/list]

[list type="circle"]
[list_item] ... [/list_item]
[/list]

[list type="square"]
[list_item] ... [/list_item]
[/list]

[list type="check"]
[list_item] ... [/list_item]
[/list]

[list type="arrow"]
[list_item] ... [/list_item]
[/list]

[list type="star"]
[list_item] ... [/list_item]
[/list]

[list type="check" color="#6B82A2" ]
[list_item] ... [/list_item]
[/list]

[list type="arrow" color="#6B82A2"]
[list_item] ... [/list_item]
[/list]

[list type="check" color="#6B82A2" ]
[list_item] ... [/list_item]
[/list]

Ordered lists

A list of items in which the order does explicitly matter.

[list type="roman"]
[list_item] ... [/list_item]
[/list]

[list type="decimal"]
[list_item] ... [/list_item]
[/list]

[list type="alpha"]
[list_item] ... [/list_item]
[/list]

Number Block

A list of items in which the order does explicitly matter.

[list type="numblocks1"]
[list_item] ... [/list_item]
[/list]

[list type="numblocks2"]
[list_item] ... [/list_item]
[/list]

[list type="numblocks3"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber1"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber2"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber3"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber4"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber6"]
[list_item] ... [/list_item]
[/list]

[list type="smallnumber5"]
[list_item] ... [/list_item]
[/list]

Customization Options / Features

• type (optional) – more optional type list (disc, circle, square, check, arrow, star, roman, decimal, alpha, numblocks1...)
• color (optional) – changes color of type list (disc, circle, square, check, arrow, star, roman, decimal, alpha)

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

[quote width="auto" align="none" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

Blockquote options

Style and content changes for simple variations on a standard blockquote.

[quote width="45%" align="left" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

[quote width="45%" align="right" border="#666" color="#666" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

[quote align="none" border="#468847" color="#468847" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#F89406" color="#F89406" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#B24745" color="#B24745" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]
[quote align="none" border="#3A87AD" color="#3A87AD" title="SOMEONE_FAMOUS_TITLE"] ADD_CONTENT_HERE [/quote]

Customization Options / Features

• Width : Select number unit (px, %, em...)
• Align : Select position align (left, right, none)
• Border : Changes border color Blockquote
• Color : Changes text color Blockquote
• Title : Someone famous in Source Title

Get base styles and flexible support for collapsible components like accordions and navigation.

[accordion]
   [acc_item title='ITEM_TITLE1'] ADD_CONTENT_HERE [/acc_item]
   [acc_item title='ITEM_TITLE2'] ADD_CONTENT_HERE [/acc_item]
   [acc_item title='ITEM_TITLE3'] ADD_CONTENT_HERE [/acc_item]
   [acc_item title='ITEM_TITLE4'] ADD_CONTENT_HERE [/acc_item]
[accordion]

Customization Options / Features

• Item title (optional) – Item Accordion title