## Shortcodes

##### Problems using Shortcodes?

  Gridsystem
  Messages & Boxes
  Tooltips
  Buttons
  Reveal Lightbox
  Titan Lightbox
  Misc
  Icons
  Lists
  Videos & Frames
  Toggle
  Modules

- This Shortcode will produce three Columns with the same width
  {row} {col4}Your Content here{/col} {col4}Your Content here{/col} {col4}Your Content here{/col} {/row}
  This Shortcode will produce two Columns with various widths
  {row} {col5}Your Content here{/col} {col7}Your Content here{/col} {/row}
  Please set the complete Number of Columns always full to a 12 Columns System, for example: when you have {col4} and {col3} your last columns will be a {col5}. Simply copy one of the following Shortcode examples to your Content or feel free to modify it. The Shortcode for the Columns always starts with a {row} and ends with a {/row}. Between there are the Columns, available are {col1} till {col12}. Don't forget to close the Columns with a {/col}. Below you'll find two examples:
- System Message with a cross to close it!
  {message | secondary}Your Text goes here{/message}
  Options: {message | Color}Your Text goes here{/message}
  This Shortcode will produce a nice Container for your Content
  {panel-white}Your Content goes here{/message}
  How to use?
  {panel-templatecolor}Your Content goes here{/message}
- This Shortcode will produce a simple Tooltip
  {tooltip | # | I'm a Tooltip | top | Tooltip}
  Options: {tooltip | # | Place here Content of the Tooltip | Position | Word for Tooltip}
- This Shortcode will produce a simple Button
  {button | small secondary radius | http://www.google.de | Jump to Google}
  Options: {button | Size Color Style | Your Link goes here | Name your Button here}
  Button with Icon
  {button-icon | small secondary radius | http://www.google.de | Jump to Google | icon-name}
  Button which opens Link in new Window (target="_blank")
  {button-blank | small secondary radius | http://www.google.de | Jump to Google}
  Button with HTML Attributes
  {button-data | small secondary radius | http://www.google.de | Jump to Google | data-attributes comes here}
  Button with Tooltip:
  {button-data | small secondary radius has-tipsy-top | # | Button with Tooltip | title="Content for the Tooltip here"}
  Button with Reveal Lightbox:
  {button-data | small secondary radius | # | Button with Reveal Lightbox | data-reveal-id="name-of-the-moduleposition"}
  Button with Titan Lightbox:
  {button-data | small secondary radius titan-lb | link to image or video here | Button with Reveal Lightbox | title="Title for the Lightbox here"}
- This Shortcode will produce a Reveal Lightbox (for Inline content)
  Demo for Button:
  {button-data | medium templatecolor | # | Text for the Button | data-reveal-id="name-of-the-module"}
  Demo for Link:
  {link-data | reveal | # | Text for the Link | data-reveal-id="name-of-the-module"}
  Demo for Image:
  {image-data | reveal | # | /path-to-image.jpg | data-reveal-id="name-of-the-module"}
- This Shortcode will produce a single Titan Lightbox (for Images, Videos, Maps and more)
  Demo for Button:
  {button-data | titan-lb | path to your image/video/iFrame/Map | Text for the Button | title="This is the Title of the Lightbox"}
  Demo for Link:
  {link-data | titan-lb | path to your image/video/iFrame/Map | Text for the Link | title="This is the Title of the Lightbox"}
  Demo for Image:
  {image-data | titan-lb | path to your image/video/iFrame/Map | /path-to-image.jpg | title="This is the Title of the Lightbox"}
  This Shortcode will produce a Titan Lightbox Gallery
  {wstitangallery src=[/images/] width=[100] title=[Gallery Title] thumb=[default]}
  All available Options
  {wstitangallery src=[/images/] width=[100] height=[100] title=[Gallery Title] count=[0] thumb=[default] order=[asc] prefix=[thumb_] thumb_cache_time=[1440] thumb_cache_dir=[thumbs]}
  Options: {wstitangallery src=[/images/] width=[100] height=[100] title=[Gallery Title] count=[0] thumb=[Style] order=[asc] prefix=[thumb_] thumb_cache_time=[1440] thumb_cache_dir=[thumbs]}
- Blockquote without Name
  {blockquote}Your Content goes here{/blockquote}
  Blockquote with Name
  {blockquote}Your Content goes here{/blockquote-name | Name here}
  Testimonial
  {testimonial}Your Content goes here{testimonial-name | Name or Link here}
  Inline Content Labels
  {label | radius | success | Awesome}
  Options: {label | Style | Color | Your Text goes here}
  Horizontal Lines - Demo
  {liner | 21px 0 22px 0}
  Horizontal Lines - Demo
  {line}
  Horizontal Lines - How to use?
  {liner | Enter margin pixels here (top, right, bottom, left)}
  Space - Demo
  {spacer | 120px}
  Space - How to use?
  {spacer | Enter the height of the whitespace in pixels}
- This Shortcode will produce a Icon
  {icon | icon-heart}
  Icon - How to use?
  {icon | icon-name (use templatecolor for a coloured Icon)}
- This Shortcode will produce a simple List
  {list | Type of the Icon (disc, circle, square, type1, type2, type3)} {listing}Type in some text to display in this list{/listing} {listing}Type in some text to display in this list{/listing} {listing}Type in some text to display in this list{/listing} {/list}
  Example for List Style disc, circle, square, type1 or type2 (predefined icons)
  {list | type1} {listing}Type in some text to display in this list{/listing} {listing}Type in some text to display in this list{/listing} {listing}Type in some text to display in this list{/listing} {/list}
  Example for List Style type3 (custom icons, many available)
  {list | type3} {listing}{icon | icon-ok}Type in some text to display in this list{/listing} {listing}{icon | icon-ok}Type in some text to display in this list{/listing} {listing}{icon | icon-ok}Type in some text to display in this list{/listing} {/list}
- This Shortcode will produce a Vimeo Video
  {vimeo | 24195442}
  Example: http://vimeo.com/24195442 means your ID is 24195442
  This Shortcode will produce a YouTube Video
  {youtube | Yq_6kEyIAcM}
  Example: http://www.youtube.com/watch?v=Yq_6kEyIAcM means your ID is Yq_6kEyIAcM
  This Shortcode will produce a YouTube Widescreen Video
  {youtube-wide | N966cATFWjI}
  Example: http://www.youtube.com/watch?v=N966cATFWjI means your ID is N966cATFWjI
  This Shortcode will produce a Vimeo Video
  {iframe}Your iFrame embedding Code here{/iframe}
  Attention: for including regular iFrames or Flash it's recommend to turn your WYSIWIG Editor, like TinyMCE, to off!
- This Shortcode will produce a Icon
  {toggle | Title of the Tab}Your Content goes here{/toggle}
- This Shortcode will load a Module inside an Article
  {loadposition module-position-here}
  Attention: you can every Module release under a fictive Moduleposition, simply enter a demo value, please don't forget to release this Module on the choosen Page, alternative release it on 'all pages'
  This Shortcode will load a Module inside an Module
  {module-in-module | module-position-here}
  Attention: you can every Module release under a fictive Moduleposition, simply enter a demo value, please don't forget to release this Module on the choosen Page, alternative release it on 'all pages'