Shortcodes

This theme uses Twitter Bootstrap as a strong foundation. This also means that there are a ton of integrated features that you can make use of out of the box. To do this easily you can install the “Easy Bootstrap Shortcode” plugin. You can download the plugin here: http://wordpress.org/plugins/easy-bootstrap-shortcodes/

Below is an example of all the elements that you can use in this theme!

 

Progress bars

[progressbar value=”90″]

[progressbar value=”50″ bartype=”progress-bar-success” barstyle=”progress-striped”]

[progressbar value=”30″ bartype=”progress-bar-info” barstyle=”progress-striped active”]

[progressbar value=”70″ bartype=”progress-bar-warning” barstyle=”progress-striped active”]

[progressbar value=”100″ bartype=”progress-bar-danger” barstyle=”progress-striped active”]

 

Toggles

[toggles class=”yourcustomclass”]
[toggle title=”Accordion #1″ class=”in”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat, sem et lacinia malesuada, arcu turpis feugiat ligula, vel congue augue nisi a tortor. Aenean quis accumsan nulla. Donec molestie commodo ultrices.[/toggle]
[toggle title=”Accordion #2″]Praesent quam neque, accumsan non lorem quis, facilisis tempus massa. Integer vehicula neque turpis, vel malesuada quam convallis non.[/toggle]
[toggle title=”Accordion #3″]Nullam nec fringilla magna. Donec sagittis, justo gravida feugiat vehicula, sapien erat eleifend sapien, sit amet iaculis leo diam quis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.[/toggle]
[toggle title=”Accordion #4″]Nulla sed vestibulum diam. In suscipit dignissim lacus quis aliquet. Cras vehicula ligula eget aliquam bibendum. Curabitur lacinia, erat sed laoreet pulvinar, arcu lacus volutpat magna, at commodo diam nibh quis augue.[/toggle]
[/toggles]

 

Tabs

[tabs class=”yourcustomclass”]
[tab title=”Tab number 1″ active=”active”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat, sem et lacinia malesuada, arcu turpis feugiat ligula, vel congue augue nisi a tortor. Aenean quis accumsan nulla. Donec molestie commodo ultrices.[/tab]
[tab title=”Tab number 2″]Praesent quam neque, accumsan non lorem quis, facilisis tempus massa. Integer vehicula neque turpis, vel malesuada quam convallis non.[/tab]
[tab title=”Tab number 3″]Nullam nec fringilla magna. Donec sagittis, justo gravida feugiat vehicula, sapien erat eleifend sapien, sit amet iaculis leo diam quis risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.[/tab]
[tab title=”Tab number 4″]Nulla sed vestibulum diam. In suscipit dignissim lacus quis aliquet. Cras vehicula ligula eget aliquam bibendum. Curabitur lacinia, erat sed laoreet pulvinar, arcu lacus volutpat magna, at commodo diam nibh quis augue.[/tab]
[/tabs]

 

Lists

[list]
[li type=”glyphicon-arrow-right”]You can make nice lists[/li]
[li type=”glyphicon-arrow-right”]With this simple shortcode[/li]
[li type=”glyphicon-arrow-right”]And select any glyphicon you want![/li]
[/list]

 

Buttons

You can also use glyphicon in buttons!

[button style=”btn-info btn-lg” type=”link” target=”false” title=”Button” link=”#”]

[button style=”btn-default btn-lg” icon=”glyphicon-thumbs-up” align=”left” type=”button” title=”Button”]

[button style=”btn-primary btn-lg” icon=”glyphicon-certificate” align=”left” iconcolor=”#fff” type=”button” title=”Button”]

 

Notifications

[notification type=”alert-warning” close=”true” ]Your notification[/notification]

[notification type=”alert-success” close=”true” ]Your notification[/notification]

[notification type=”alert-info” close=”true” ]Your notification[/notification]

[notification type=”alert-danger” close=”true” ]Your notification[/notification]

 

Columns

[row]
[column lg=”6″ md=”12″ sm=”12″ xs=”12″ ]
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit. Donec placerat, purus sit amet tincidunt pellentesque, risus lectus tincidunt quam, sit amet imperdiet lectus erat sed mauris.
[/column]
[column lg=”6″ md=”12″ sm=”12″ xs=”12″ ]
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit. Donec placerat, purus sit amet tincidunt pellentesque, risus lectus tincidunt quam, sit amet imperdiet lectus erat sed mauris.
[/column]
[/row]

 

[row]
[column lg=”4″ md=”12″ sm=”12″ xs=”12″ ]
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit.
[/column]
[column lg=”4″ md=”12″ sm=”12″ xs=”12″ ]
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit.
[/column]
[column lg=”4″ md=”12″ sm=”12″ xs=”12″ ]
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis. Pellentesque ac dui malesuada, sagittis velit eu, ornare velit.
[/column]
[/row]

 

[row]
[column lg=”3″ md=”12″ sm=”12″ xs=”12″ ]
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
[/column]
[column lg=”3″ md=”12″ sm=”12″ xs=”12″ ]
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
[/column]
[column lg=”3″ md=”12″ sm=”12″ xs=”12″ ]
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
[/column]
[column lg=”3″ md=”12″ sm=”12″ xs=”12″ ]
Integer gravida adipiscing odio id pellentesque. Nulla sodales hendrerit mauris eget venenatis.
[/column]
[/row]

 

Responsive tables

[table width =”100%” style =” table-hover” responsive =”true”]
[table_head]
[th_column]Heading-1[/th_column]
[th_column]Heading-2[/th_column]
[th_column]Heading-3[/th_column]
[th_column]Heading-4[/th_column]
[/table_head]
[table_body]
[table_row]
[row_column]value-1[/row_column]
[row_column]value-2[/row_column]
[row_column]value-3[/row_column]
[row_column]value-4[/row_column]
[/table_row]
[table_row]
[row_column]value-1[/row_column]
[row_column]value-2[/row_column]
[row_column]value-3[/row_column]
[row_column]value-4[/row_column]
[/table_row]
[table_row]
[row_column]value-1[/row_column]
[row_column]value-2[/row_column]
[row_column]value-3[/row_column]
[row_column]value-4[/row_column]
[/table_row]
[table_row]
[row_column]value-1[/row_column]
[row_column]value-2[/row_column]
[row_column]value-3[/row_column]
[row_column]value-4[/row_column]
[/table_row]
[/table_body]
[/table]

 

Tooltips

You can use tooltips in your content to [tooltip type=”link” link=”#” tooltip=”This is a tooltip!” style=”top” ]explain[/tooltip] something. Curabitur eget leo laoreet, laoreet lorem ut, suscipit sapien. Nam ut laoreet enim. Phasellus venenatis auctor ante nec bibendum. Vivamus diam justo, mollis vel elit nec, aliquam convallis augue. Sed a faucibus nisl.
[iconheading type=”h2″ style=”glyphicon-ok” color=”#666″]Heading with fancy icons[/iconheading]

 

Content panels

[panel style=”panel-default”]
[panel-header]
My fancy content title
[/panel-header]
[panel-content]
Curabitur nec elit sagittis, aliquam elit at, viverra dui. Mauris velit quam, ultrices at adipiscing id, dignissim non nisi. Aliquam ullamcorper placerat semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec feugiat nisl. Maecenas pretium enim ac lectus ultrices placerat.
[/panel-content]
[/panel]

 

Popovers

[popover title=”A title” pop_content=”Your Content” trigger=”click” style=”top” size=”” type=”btn-default” ]Click me to see the popup[/popover]

 

Dropdowns

[dropdown dropup=”dropdown”]
[dropdownhead style=”btn-default” size=”btn-lg” split=””]
Dropdown
[/dropdownhead]
[dropdownbody]
[dropdownitem type=”menuitem” link=”#” ]Dropdown Item #1[/dropdownitem]
[dropdownitem type=”menuitem” link=”#” ]Dropdown Item #2[/dropdownitem]
[dropdownitem type=”menuitem” link=”#” ]Dropdown Item #3[/dropdownitem]
[/dropdownbody]
[/dropdown]

 

Labels

[label type=”label-default”]
Label
[/label]

[label type=”label-primary”]
Label
[/label]

[label type=”label-success”]
Label
[/label]

[label type=”label-info”]
Label
[/label]

[label type=”label-warning”]
Label
[/label]

[label type=”label-danger”]
Label
[/label]

 

Content box

[well type=””]
Curabitur nec elit sagittis, aliquam elit at, viverra dui. Mauris velit quam, ultrices at adipiscing id, dignissim non nisi. Aliquam ullamcorper placerat semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nec feugiat nisl. Maecenas pretium enim ac lectus ultrices placerat.
[/well]

 

Icons

You can see a full list of the icons you can use here: http://getbootstrap.com/components/

[icon type=”glyphicon-star” color=”#0a0a0a” fontsize=”20″]

[icon type=”glyphicon-warning-sign” fontsize=”20″]

[icon type=”glyphicon-exclamation-sign” fontsize=”20″]

[icon type=”glyphicon-usd” fontsize=”20″]

 

Rounded images

[row]
[column lg=”3″ md=”6″ sm=”6″ xs=”12″ ]
[image src=”http://www.redfactory.nl/themes/thebeautysalon2/files/2013/12/Depositphotos_10297634_s-150×150.png” shape=”img-circle”]
[/column]
[column lg=”3″ md=”6″ sm=”6″ xs=”12″ ]
[image src=”http://www.redfactory.nl/themes/thebeautysalon2/files/2013/12/shutterstock_33195415-150×150.jpg” shape=”img-circle”]
[/column]
[column lg=”3″ md=”6″ sm=”6″ xs=”12″ ]
[image src=”http://www.redfactory.nl/themes/thebeautysalon2/files/2013/12/shutterstock_2454493-150×150.jpg” shape=”img-circle”]
[/column]
[column lg=”3″ md=”6″ sm=”6″ xs=”12″ ]
[image src=”http://www.redfactory.nl/themes/thebeautysalon2/files/2013/12/shutterstock_3254986-150×150.jpg” shape=”img-circle”]
[/column]
[/row]

 

Advertisements