Popups
These come from the Bootstrap modal javascript plugin.
General Usage
[popup text="Click me to see a popup" header="Title of popup"]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
[/popup]
[popup text="This popup will animate in" header="Title of popup" animate="true"]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
[/popup]
[popup text="Contact Us!" color="primary" icon_before="envelope" header="Contact Us" animate="true"]
This popup has a contact form inserted via Contact Form 7's shortcode.
[contact-form 1]
[/popup]
Options
Required arguments - text: Text of button to popup Optional arguments - title: Title tag of button to popup (will default to $text) - color: Color of button (view button colors) - icon_before: Icon before text of button to popup (view icons) - icon_after: Icon after text of button to popup (view icons) - size: Size of button - mini, small, default, large - animate: Whether popup slides in or not - true, false - header: Header text for popup
Progress Bars
Get creative with this one. — We honestly couldn’t think of a whole lot of real-world uses for this shortcode, but we thought it was too cool of a Boostrap feature to leave out.
General Usage
[progress_bar percent="30"]
[progress_bar percent="60" striped="true"]
[progress_bar percent="90" striped="true" animate="true"]
Options
Required arguments - percent: A percentage of how far the bar is - 25, 50, 80, etc. Optional arguments - color: Color of bar - default, danger, success, info, warning - striped: Whether the bar is striped or not - true, false - animate: Whether the bar is animated or not - true, false
Colors
| Color | Example |
|---|---|
| Default |
|
| Danger |
|
| Success |
|
| Info |
|
| Warning |
|
Icon Lists
After you’ve inserted a standard unordered list, wrap it in the [icon_list] shortcode to make it stand out a little more.
General Usage
[icon_list]
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
[/icon_list]
[icon_list icon="star"]
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
[/icon_list]
[icon_list icon="star" color="#eec627"]
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
[/icon_list]
Also note that if you’re comfortable with basic HTML, you can accomplish icon lists with the following HTML markup.
<ul class="tb-icon-list">
<li><i class="icon-star"></i> List item 1</li>
<li><i class="icon-star"></i> List item 2</li>
<li><i class="icon-star"></i> List item 3</li>
</ul>
Options
Required arguments - icon: Icon to be used. (view icons) Optional arguments - color: Color CSS value to get applied to icon, will default to current text color. Ex: #660000