Small Components

These come from the Bootstrap modal javascript plugin.

[alert style=”info”]Note: Please keep in mind that this shortcode currently does not work great on small, mobile devices.[/alert]

[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="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="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.

Error: Contact form not found.


[/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]

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="30"]

[progress_bar percent=”60″ striped=”true”]

[progress_bar percent="60" striped="true"]

[progress_bar percent=”90″ striped=”true” animate=”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

[alert style=”info”]Note: Apologies, but the striped effect and the animated effect will not work in IE. Maybe IE10 will get it right! Time will tell…[/alert]

[alert style=”info”]Note: For the bar to be animated, it must also be striped.[/alert]

Colors

[raw]

Color Example
Default [progress_bar percent=”30″]
[progress_bar percent=”60″ striped=”true”]
[progress_bar percent=”90″ striped=”true” animate=”true”]
Danger [progress_bar percent=”30″ color=”danger”]
[progress_bar percent=”60″ color=”danger” striped=”true”]
[progress_bar percent=”90″ color=”danger” striped=”true” animate=”true”]
Success [progress_bar percent=”30″ color=”success”]
[progress_bar percent=”60″ color=”success” striped=”true”]
[progress_bar percent=”90″ color=”success” striped=”true” animate=”true”]
Info [progress_bar percent=”30″ color=”info”]
[progress_bar percent=”60″ color=”info” striped=”true”]
[progress_bar percent=”90″ color=”info” striped=”true” animate=”true”]
Warning [progress_bar percent=”30″ color=”warning”]
[progress_bar percent=”60″ color=”warning” striped=”true”]
[progress_bar percent=”90″ color=”warning” striped=”true” animate=”true”]

[/raw]

[divider]

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

[raw]

[one_third]
[icon_list]

  • List item 1
  • List item 2
  • List item 3

[/icon_list]

[icon_list]
<ul>
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
</ul>
[/icon_list]

[/one_third]
[one_third]

[icon_list icon=”star”]

  • List item 1
  • List item 2
  • List item 3

[/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]

[/one_third]
[one_third last]

[icon_list icon=”star” color=”#eec627″]

  • List item 1
  • List item 2
  • List item 3

[/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]

[/one_third]
[clear]
[/raw]

Also note that if you’re comfortable with basic HTML, you can accomplish icon lists with the following HTML markup.

  • List item 1
  • List item 2
  • List item 3

<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
Created and hosted by FSD

×

×

×

×

×

×