## WS-Theme Shortcodes

##### Problems?

If you have problems using the Shortcodes, please deactivate your Editor in your general Settings BEFORE using the Shortcodes! Have a look for not needed <p> and delete them

How to disable Joomla Editor

### Choose Shortcode

This Shortcode will produce three Columns with the same width
Please don't forget that Columns must always fit to 12

{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}

Attention

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}. Above you'll find two examples:

Button Size

Button Color

Button Link Target

Button Link

Button Text

Button Bordered
Would you like to have the Button in a inverse Style with Border only?

Lightbox
Would you like to open this Link in a Lightbox?

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{button color="btn-default" link="#" }Demo{/button}

Headline Type

Headline Style

Headline Align

Headline Color

Headline Size

Headline Text

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{headline type="h2" text="Headline"}

Progress Type
Choose between two types of progress bars

Progress Color

Progress Width

Progress Text (optional)
You can also add the Attribute text="Joomla" to create a progress bar with Text and percent values over it.

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{progress width="10" }

Counter Color

Counter Value

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{counter value="1000" }

Image
Please copy here the path to your Image for the Preview

Link
Please copy here the path to your larger Image (or a URL for a iFrame, Video and more) for the Lightbox

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{image-overlay image="images/image-small.jpg" link="images/image-large.jpg"}

Widearea Style

Image Path and Ratio
Copy here your Image path and a Ratio aspect for the Scrolling experience (only if you choose Parallax Image)

Margin Top and Bottom
Padding Top and Bottom
Please enter some Margins and Padding for the widearea, this is necessary!

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{widearea-grey margintop="50px" marginbottom="50px" paddingtop="30px" paddingbottom="30px" image="images/parallax.jpg" ratio="0.2"}Your Content here{/widearea}

Animation Effect
The attribute class="" is optional

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{animate effect="bounceIn"}Your Elements here{/animate}

Label Color
Please choose the color for the label

Label Text
Enter here the Text for the Label

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{label text="I am a Label" color="label-default"}

Pie 1

Pie 2

Pie 3

Pie 4

Well
This Shortcode produce a nice Area with a grey Background and a suitable Border around it

Highlight
This Shortcode produce a Jumbotron Unit from Bootstrap

Toogle Style 1 closed

Toogle Style 1 open

Toogle Style 2 closed

Toogle Style 2 open

Alert Style
Please choose the Style of the Alert Message

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{alert style="danger"}Your Content here{/alert}

Tooltip Text
This is the Word where on Hover the Tooltip appears

Tooltip Title
This is the Content which appears on hover

Tooltip Link
This is a optional Link, recommend is to use # or javascript:void(0)

Tooltip Class (optional)
This is a optional class for the Tooltip and not needed, but can be useful in some Situations, please use class="your-class-name"

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{tooltip text="Hover me" title="I am the Content of the Tooltip which appears on Hover" link="#" }

Popover Position
Where should the Popover appear on Hover

Popover Text
This is the Word where on Hover the Popover appears

Popover Title
This is the Title of the Popover which appears on hover

Popover Content
This is the Content of the Popover which appears on hover

Popover Class (optional)
This is a optional class for the Popover and not needed, but can be useful in some Situations, please use class="your-class-name". A example will be class="btn btn-primary"

Your Shortcode
Please copy this Shortcode into the below Textarea to strip HTML Tags

{popover position="top" text="Hover me" title="Headline" content="I am the Content of the Popover which appears on Hover" }

Dropcap Style 1

Dropcap Style 2

Dropcap Style 3

Icon
The attributes size="" and color="" are optional and not needed but can be used. Also its possible to add a class=""

Icon with all options
The attributes size="" and color="" are optional and not needed but can be used. Also its possible to add a class=""

Icon Round
The attributes size="" and color="" are optional and not needed but can be used.

Icon Round Bordered
The attributes size="" and color="" are optional and not needed but can be used.

Icon Square
The attributes size="" and color="" are optional and not needed but can be used.

Icon Square Bordered
The attributes size="" and color="" are optional and not needed but can be used.

Options for Icons

Possible sizes are: fa-lg, fa-2x, fa-3x, fa-4x, fa-5x
Possible colors are: color-theme, color-black, color-success, color-warning, color-purple, color-danger, color-orange

Divider Default
This Shortcode produce a full width Divider. The attribute class="" is optional

Divider Circle Big Left
This Shortcode produce a full width Divider with a circle on the left. The attribute class="" is optional

Divider Circle Big Center
This Shortcode produce a full width Divider with a circle on the center. The attribute class="" is optional

Divider Circle Big Right
This Shortcode produce a full width Divider with a circle on the right. The attribute class="" is optional

Divider Circle Small Left
This Shortcode produce a half width Divider with a circle on the left. The attribute class="" is optional

Divider Circle Small Center
This Shortcode produce a half width Divider with a circle on the center. The attribute class="" is optional

Divider Circle Small Right
This Shortcode produce a half width Divider with a circle on the right. The attribute class="" is optional

Divider Fade
This Shortcode produce a full width Divider with fading effect. The attribute class="" is optional

Divider Double Border
This Shortcode produce a full width Divider with double Border effect. The attribute class="" is optional

Divider with Icon
This Shortcode produce a full width Divider with a Icon in the center. The attribute class="" is optional

List
Shortcode for a regular Listing

{list} {listing}List Item{/listing} {listing}List Item{/listing} {listing}List Item{/listing} {/list}

List with Icon
Shortcode for a regular Listing with some nice Icons in Front of it. For more options for Icons please check the Icon Shortcodes

{list type="fa-ul"} {listing}{icon name="fa-rocket fa-li"}List Item{/listing} {listing}{icon name="fa-rocket fa-li"}List Item{/listing} {listing}{icon name="fa-rocket fa-li"}List Item{/listing} {/list}

Ordered List Type 1
Shortcode for a regular ordered Listing with some nice Hover Effects

{ol-list type="rounded-list"} {listing}<a href="#">List Item</a>{/listing} {listing}<a href="#">List Item</a>{/listing} {listing}<a href="#">List Item</a>{/listing} {/ol-list}

Ordered List Type 2
Shortcode for a regular ordered Listing with some nice Hover Effects

{ol-list type="rectangle-list"} {listing}<a href="#">List Item</a>{/listing} {listing}<a href="#">List Item</a>{/listing} {listing}<a href="#">List Item</a>{/listing} {/ol-list}

Large List with Icon and Headline
Shortcode for a large Listing with a nice Icons in Front of it. Possible colors are color-default, color-theme, color-black, color-success, color-warning, color-purple, color-danger, color-orange

Large List with Icon
Shortcode for a large Listing with a nice Icons in Front of it. Possible colors are color-default, color-theme, color-black, color-success, color-warning, color-purple, color-danger, color-orange

List
Shortcode for a Gallery, possible columns are 1,2,3,4,5,6. The Tag caption="" is optional

{gallery columns="4"} {gallery-image image="image1.jpg"} {gallery-image image="image2.jpg"} {gallery-image image="image3.jpg"} {gallery-image image="image4.jpg"} {/gallery}

Vimeo Video
Example: http://vimeo.com/24195442 means your ID is 24195442

YouTube Video
Example: http://www.youtube.com/watch?v=Yq_6kEyIAcM means your ID is Yq_6kEyIAcM

Soundcloud Small
The small Soundcloud Player

Soundcloud Large
The large Soundcloud Player

iFrame
You can also use a optional Tag with style="" to control the appereance

Module in Content
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'

Module in Module
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'

Spacer
This Shortcode produces a white area if you need some Space anywhere

Clearfix
Maybe you'll need this Shortcode if some Elements are not floating correct