What is Metro Vibes UI Kit

Metro Vibes UI Kit is a number of useful user interface components built on Bootstrap 3 framework. We did not modify any line of Bootstrap, so you can safely use Metro Vibes UI Kit in your ongoing project.

What is included

Once purchased, unzip the compressed folder to see the directory structure of Metro Vibes UI Kit. You'll see something like this:

metro-vibes
├───docs
│   ├───css
│   ├───images
│   └───js
├───metro-vibes-css
│   ├───css
│   ├───fonts
│   ├───images
│   │   ├───icons
│   │   ├───prettyPhoto
│   │   └───temp
│   └───js
│       └───libs
└───metro-vibes-less
├───fonts
├───images
│   ├───icons
│   ├───prettyPhoto
│   └───temp
├───js
│   └───libs
└───less
    └───bootstrap
                                    
docs/
contains this documentation.
metro-vibes-css/
contains Metro Vibes UI Kit in simple CSS format. Use it to easily start your project.
css/
contains all the stylesheets for CSS version of the kit.
fonts/
contains Bootstrap Glyphicons for CSS version of the kit.
images/
contains all the images for CSS version of the kit.
images/icons/
contains all the icons for CSS version of the kit.
images/temp/
contains all the temporary images for CSS version of the kit.
js/
contains all the JS files for CSS version of the kit.
metro-vibes-less/
contains Metro Vibes UI Kit in LESS format. Use it to modify this kit in your project.
fonts/
contains Bootstrap Glyphicons for LESS version of the kit.
images/
contains all the images for LESS version of the kit.
images/icons/
contains all the icons for LESS version of the kit.
images/temp/
contains all the temporary images for LESS version of the kit.
js/
contains all the JS files for LESS version of the kit.
less/
contains all the stylesheets for LESS version of the kit.

Note: The folders metro-vibes-css and metro-vibes-less is fully independent from each other, including all the images and JS files. You can use the version you prefer without pulling images or JS files from the other version of the kit.

Browser support

Since Metro Vibes UI Kit is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.

Getting Started

To start working with Metro Vibes UI Kit you can use a basic template.html, or take the completely functional pages included in this package. Since it is built on Bootstrap, you can also use it on your project with Bootstrap 3.
We provide you both CSS and LESS standalone versions which are completely identical in design and functions.

CSS Version: You can use CSS version by dropping contents of metro-vibes-css folder to your project folder and including style.css file in your HTML page: <link href="style.css" media="screen" rel="stylesheet">

LESS Version: You can find it in metro-vibes-less folder. Use LESS if you want to modify Metro Vibes UI Kit. We built it Bootstrap way so you won't find big difference. Use less/variables.less to modify different styles, use style.less to remove needless components.

If you want to start from scratch, the best way is to use our template where all startup files are already included and ready to be used. You can find template.html file both for CSS and LESS version in their respective folders.

Basic Template

You can use a basic HTML template to write your code, or take completely functional pages included in this package. Basic template as well as completely functional pages are available both for CSS and LESS versions of the Metro Vibes UI Kit.

<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>

    <!-- main JS libs -->
    <script src="js/libs/modernizr.min.js"></script>
    <script src="js/libs/jquery-1.10.0.js"></script>
    <script src="js/libs/jquery-ui.min.js"></script>
    <script src="js/libs/bootstrap.min.js"></script>

    <!-- Style CSS -->
    <link href="css/bootstrap.css" media="screen" rel="stylesheet">
    <link href="style.css" media="screen" rel="stylesheet">

    <!-- scripts -->
    <script src="js/general.js"></script>

    <!-- Include all needed stylesheets and scripts here -->

    <!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]-->
    <!--[if gte IE 9]>
    <style type="text/css">
        .gradient {filter: none !important;}
    </style>
    <![endif]-->
</head>

<body>
    <!-- container -->
    <div class="container">

        Start your work here.

    </div>
    <!--/ container -->
</body>
</html>
                                

Typography

Metro Vibes UI Kit uses free Open Sans webfont available at the Google Fonts. The global default font-size is 13px, with a font-weight of 400. This is applied to the <body> and all paragraphs. In addition, all <p> (paragraphs) receive a bottom margin of 16px.
Also, all headings, <h1> through <h6> are available.

Example

Example (h1)

Example (h2)

Example (h3)

Example (h4)

Example (h5)
Example (h6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

<h1>Example (h1)</h1>
<h2>Example (h2)</h2>
<h3>Example (h3)</h3>
<h4>Example (h4)</h4>
<h5>Example (h5)</h5>
<h6>Example (h6)</h6>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
                                    

Buttons

Different Colors

Use any of the available button classes to quickly create a colored button.

Example

<a href="#" class="btn"><span>Default</span></a>
<a href="#" class="btn btn-blue"><span>Blue</span></a>
<a href="#" class="btn btn-green"><span>Green</span></a>
<a href="#" class="btn btn-lime"><span>Lime</span></a>
<a href="#" class="btn btn-yellow"><span>Yellow</span></a>
<a href="#" class="btn btn-pink"><span>Pink</span></a>
<a href="#" class="btn btn-brown"><span>Brown</span></a>
                                

Different Sizes

Buttons available in small, default and large size.

Example

<a href="#" class="btn btn-small"><span>Small Button</span></a>
<a href="#" class="btn"><span>Default Button</span></a>
<a href="#" class="btn btn-large"><span>Large Button</span></a>
                                

Buttons with Arrows

Arrowed buttons available only in green color and default size.

Example

<a href="#" class="btn btn-left"><span>Left</span></a>
<a href="#" class="btn btn-right"><span>Right</span></a>
                                

Buttoned Input

Wrap input type="submit" into span and use available button classes to create a styled Input.

Example

<span class="btn btn-blue"><input type="submit" value="Submit" /></span>
                                

Ribbons

Easily highlight items with Ribbons.

Example

Sale20%
Sale50%
<div class="ribbon">
    <span>
        <em>Sale</em>
        <strong>20%</strong>
    </span>
</div>

<div class="ribbon ribbon-blue">
    <span>
        <em>Sale</em>
        <strong>50%</strong>
    </span>
</div>
                                

Badges

Easily highlight items with Badges.

Example

<span class="badge"></span>
<span class="badge badge-large"></span>
                                

Rating Stars

Use rating stars for voting.

Example

<div class="rating">
    <span class="star on"><input type="hidden" value="1"></span><!--
    --><span class="star on"><input type="hidden" value="2"></span><!--
    --><span class="star on"><input type="hidden" value="3"></span><!--
    --><span class="star off"><input type="hidden" value="4"></span><!--
    --><span class="star off"><input type="hidden" value="5"></span>
</div>
                                

Form Elements

Checkboxes

Use styled checkboxes instead of the usual ones.

Element specific usage

Attribute name required for input element.

Styled Checkbox require next file to be included into <head> section of the page:

<script src="js/jquery.customInput.js"></script>
                                

Example


<div class="input_styled checklist">
    <div class="rowCheckbox">
        <input name="signup" type="checkbox" id="signup" value="signup">
        <label for="signup">Default Checkbox</label>
    </div>
    <div class="rowCheckbox checkbox-red">
        <input name="signup2" type="checkbox" id="signup2" value="signup2">
        <label for="signup2">Red Checkbox</label>
    </div>
    <div class="rowCheckbox checkbox-filled">
        <input name="signup3" type="checkbox" id="signup3" value="signup3">
        <label for="signup3">White background</label>
    </div>
    <div class="rowCheckbox checkbox-large">
        <input name="signup4" type="checkbox" id="signup4" value="signup4">
        <label for="signup4">Switch</label>
    </div>
    <div class="rowCheckbox checkbox-large checkbox-white">
        <input name="signup5" type="checkbox" id="signup5" value="signup5">
        <label for="signup5">White background switch</label>
    </div>
    <div class="rowCheckbox checkbox-large checkbox-noText">
        <input name="signup6" type="checkbox" id="signup6" value="signup6">
        <label for="signup6">Switch without text</label>
    </div>
</div>
                                

Radio Buttons

Use styled radio buttons instead of the usual ones.

Element specific usage

Attribute name required for input element.

Styled Radio Button require next file to be included into <head> section of the page:

<script src="js/jquery.customInput.js"></script>
                                

Example

<div class="input_styled inlinelist">
    <div class="rowRadio">
        <input type="radio" name="survey" value="radio_v1" id="radio_v1" checked>
        <label for="radio_v1">Default Button</label>
    </div>
    <div class="rowRadio radio-red">
        <input type="radio" name="survey" value="radio_v2" id="radio_v2">
        <label for="radio_v2">Red Button</label>
    </div>
    <div class="rowRadio radio-filled">
        <input type="radio" name="survey" value="radio_v3" id="radio_v3">
        <label for="radio_v3">White background</label>
    </div>
</div>
                                

Text Inputs

All Text inputs are styled.

Element specific usage

Text Inputs with placeholders require next file to be included into <head> section of the page:

<script src="js/jquery.powerful-placeholder.min.js"></script>
                                

Example

<div class="field_text">
    <input type="text" name="name" id="name" placeholder="Name">
</div>

<div class="field_text omega">
    <input type="text" name="email" id="email" placeholder="Email">
</div>
                                

Textareas

All Textareas are styled similar to Text inputs.

Element specific usage

Textareas with placeholders require next file to be included into <head> section of the page:

<script src="js/jquery.powerful-placeholder.min.js"></script>
                                

Example

<div class="field_text field_textarea">
    <textarea id="message" placeholder="Message"></textarea>
</div>
                                

Scroll Bars

Use any of the available classes to quickly create a styled Scroll Bar for your site.

Element specific usage

Styled Scroll Bar require next files to be included into <head> section of the page:

<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
                                

Example

These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.

These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.

These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.

These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.

<div class="scrollbar">
    <div class="scrollbar-inner">
        <!--place your content here-->
    </div>
</div>

<div class="scrollbar scrollbar-yellow">
    <div class="scrollbar-inner">
        <!--place your content here-->
    </div>
</div>

<div class="scrollbar scrollbar-red">
    <div class="scrollbar-inner">
        <!--place your content here-->
    </div>
</div>

<div class="scrollbar scrollbar-blue">
    <div class="scrollbar-inner">
        <!--place your content here-->
    </div>
</div>
                                
Enable Scroll Bars via JS:
<script type="text/javascript">
    jQuery(function()
    {
        jQuery('.scrollbar').jScrollPane({
            verticalDragMaxHeight: 9,
            verticalDragMinHeight:9
        });

        jQuery('.scrollbar.scrollbar-yellow').jScrollPane({
            verticalDragMaxHeight: 20,
            verticalDragMinHeight:20
        });

        jQuery('.scrollbar.scrollbar-red').jScrollPane({
            verticalDragMaxHeight: 5,
            verticalDragMinHeight:5
        });

        jQuery('.scrollbar.scrollbar-blue').jScrollPane({
            verticalDragMaxHeight: 50,
            verticalDragMinHeight:50
        });
    });
</script>
                                

Progress Bars

Use styled Progress Bars on your site.

Element specific usage

Styled Progress Bar require next files to be included into <head> section of the page:

<script src="js/jquery-ui.min.js"></script>
<script src="js/progressbar.js"></script>
                                

Example

0% 100%
0% 100%
<div id="progressBar1" class="progressbar">
    <span class="mark-left">0%</span>
    <span class="mark-right">100%</span>
    <div class="percent"></div>
    <div class="pbar"></div>
    <div class="elapsed"></div>
    <div class="remained"></div>
</div>

<div id="progressBar2" class="progressbar style2">
    <span class="mark-left">0%</span>
    <span class="mark-right">100%</span>
    <div class="percent"></div>
    <div class="pbar">
        <div id="downloadBar2" class="downloadbar">
            <div class="pbar"></div>
        </div>
    </div>
    <div class="elapsed"></div>
    <div class="remained"></div>
</div>
                                
Enable Progress Bars via JS:
<script type="text/javascript">
    $(document).ready(function() {
        $('#progressBar1').anim_progressbar({
            totaltime: 800
        });

        $('#progressBar2').anim_progressbar({
            totaltime: 900
        });
        $('#downloadBar2').anim_progressbar({
            totaltime: 600
        });
    });
</script>
                                

Range Slider

Range Slider allow users to select a value from a numerical range by simply dragging a slider.

Element specific usage

Range Slider require next files to be included into <head> section of the page:

<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slider.bundle.js"></script>
<script src="js/jquery.slider.js"></script>
<link rel="stylesheet" href="css/jslider.css">
                                

Example

<div class="range-slider">
    <input id="price_range" type="text" value="120;720">
</div>

<div class="range-slider styled">
    <input id="price_range2" type="text" value="80;860">
</div>
                                
Enable Price Range via JS:
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("#price_range").rangeslider({
            from: 0,
            to: 1000,
            limits: false,
            scale: ['$0', '$1000'],
            heterogeneity: ['50/300'],
            step: 10,
            smooth: true,
            dimension: '$'
        });

        $("#price_range2").rangeslider({
            from: 0,
            to: 1000,
            limits: false,
            scale: ['$0', '$1000'],
            heterogeneity: ['50/300'],
            step: 10,
            smooth: true,
            dimension: '$'
        });
    });
</script>
                                

Website Menu

Use it as a main menu for your site.

Example

<div id="topmenu">
    <ul class="dropdown clearfix boxed">
        <li>
            <a href="#">
                <i class="icon-menu"></i>
                <span>check in</span>
                <sup class="note">3</sup>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="icon-menu icon-menu2"></i>
                <span>events</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="icon-menu icon-menu3"></i>
                <span>account</span>
            </a>
            <ul>
                <li><a href="#">Web design</a></li>
                <li><a href="#">User interface</a></li>
                <li><a href="#">Social media</a>
                    <ul>
                        <li><a href="#">Gallery images</a></li>
                        <li><a href="#">Fine Slider</a></li>
                        <li><a href="#">Video in header</a></li>
                        <li><a href="#">Video Slider</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">
                <i class="icon-menu icon-menu4"></i>
                <span>settings</span>
            </a>
        </li>
    </ul>
</div>
                                

User Menu

Use it as a menu for user profile.

Example

<div class="user-menu">
    <ul class="dropdown clearfix boxed">
        <li>
            <a href="#">
                <i class="icon-menu icon-menu5"></i>
                <span>My Profile</span>
            </a>
            <ul>
                <li><a href="#">Invite friends</a></li>
                <li><a href="#">find friends</a></li>
                <li><a href="#">Log out</a></li>
            </ul>
        </li>
        <li>
            <a href="#">
                <i class="icon-menu icon-menu6"></i>
                <span>Edit Profile</span>
            </a>
        </li>
    </ul>
</div>
                                

Tabs

Add quick, dynamic tab functionality to transition through panes of local content.

Example

Vivamus Luctus Urna

Lorem ipsum dolor sit amet, consecte tur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcud erat molestie vehicula. Sed auctor

<div class="tabs_framed">
    <div class="inner">
        <ul class="tabs clearfix">
            <li><a href="#recent" data-toggle="tab">Recent</a></li>
            <li class="active"><a href="#popular" data-toggle="tab">Popular</a></li>
        </ul>

        <div class="tab-content boxed clearfix">
            <div class="tab-pane fade" id="recent">
                <!--place your content here-->
            </div>
            <div class="tab-pane fade in active" id="popular">
                <!--place your content here-->
            </div>
        </div>
    </div>
</div>
                                

Pricing

Use pricing items to announce prices for your services. Two different pricing styles available. Add class col_active to price_col to highlight pricing item. Add color class to price_col class to change item color.
Available color classes are the next: price_col_blue, price_col_yellow, price_col_red, price_col_green.

Pricing Items default style

Example

  • $19990
    Full Circle Basic
    • Unlimited Traffic
    • 20 gb in Cloud
    • 0.5 gbit/sec
  • free
    Full Circle Free
    • Unlimited Traffic
    • 80 gb in Cloud
    • 2 gbit/sec
<div class="pricing_box">
    <ul class="clearfix">

        <li class="price_col price_col_blue col_active">
            <!--pricing item-->
            <div class="price_item boxed">
                <div class="price_col_head">
                    <span class="badge"></span>
                    <span class="price"><em>$</em>199<sup>90</sup></span>
                </div>
                <div class="price_col_body clearfix">
                    <div class="price_body_inner">
                        <div class="price_body_top">
                            <span>Full Circle</span>
                            <strong>Basic</strong>
                            <div class="line"></div>
                        </div>
                        <ul>
                            <li>Unlimited Traffic</li>
                            <li>20 gb in Cloud</li>
                            <li>0.5 gbit/sec</li>
                        </ul>
                    </div>
                </div>
                <div class="price_col_foot">
                    <div class="sign_up">
                        <a href="#" class="btn btn-blue btn-small"><span>Buy Now</span></a>
                    </div>
                </div>
            </div>
            <!--/ pricing-item -->
        </li>

        <li class="price_col price_col_yellow">
            <div class="price_item boxed">
                <div class="price_col_head">
                    <span class="badge"></span>
                    <span class="price">free</span>
                </div>
                <div class="price_col_body clearfix">
                    <div class="price_body_inner">
                        <div class="price_body_top">
                            <span>Full Circle</span>
                            <strong>Free</strong>
                            <div class="line"></div>
                        </div>
                        <ul>
                            <li>Unlimited Traffic</li>
                            <li>80 gb in Cloud</li>
                            <li>2 gbit/sec</li>
                        </ul>
                    </div>
                </div>
                <div class="price_col_foot">
                    <div class="sign_up">
                        <a href="#" class="btn btn-yellow btn-small"><span>Buy Now</span></a>
                    </div>
                </div>
            </div>
        </li>

    </ul>
</div>
                                    

Pricing Items alternative style

To switch to alternative pricing style just add price_style2 class to pricing_box.

Example

  • $19990
    Full Circle Basic
    • Unlimited Traffic
    • 20 gb in Cloud
    • 0.5 gbit/sec
  • $29990
    Full Circle Premium
    • Unlimited Traffic
    • 50 gb in Cloud
    • 1 gbit/sec
<div class="pricing_box price_style2">
    <ul class="clearfix">

        <li class="price_col price_col_blue col_active">
            <div class="price_item boxed">
                <div class="price_col_head">
                    <span class="badge badge-large"></span>
                    <span class="price"><em>$</em>199<sup>90</sup></span>
                </div>
                <div class="price_col_body clearfix">
                    <div class="price_body_inner">
                        <div class="price_body_top">
                            <span>Full Circle</span>
                            <strong>Basic</strong>
                            <div class="line"></div>
                        </div>
                        <ul>
                            <li>Unlimited Traffic</li>
                            <li>20 gb in Cloud</li>
                            <li>0.5 gbit/sec</li>
                        </ul>
                    </div>
                </div>
                <div class="price_col_foot">
                    <div class="sign_up">
                        <a href="#" class="btn btn-blue"><span>Buy Now</span></a>
                    </div>
                </div>
            </div>
        </li>

        <li class="price_col price_col_red">
            <div class="price_item boxed">
                <div class="price_col_head">
                    <span class="badge badge-large"></span>
                    <span class="price"><em>$</em>299<sup>90</sup></span>
                </div>
                <div class="price_col_body clearfix">
                    <div class="price_body_inner">
                        <div class="price_body_top">
                            <span>Full Circle</span>
                            <strong>Premium</strong>
                            <div class="line"></div>
                        </div>
                        <ul>
                            <li>Unlimited Traffic</li>
                            <li>50 gb in Cloud</li>
                            <li>1 gbit/sec</li>
                        </ul>
                    </div>
                </div>
                <div class="price_col_foot">
                    <div class="sign_up">
                        <a href="#" class="btn btn-red btn-large"><span>Buy Now</span></a>
                    </div>
                </div>
            </div>
        </li>

    </ul>
</div>
                                    

Content Box

Use titled box to display different content.

Example

Widget Title

<div class="widget-container boxed">
    <h3 class="widget-title">Widget Title</h3>
    <div class="inner">
        <!-- place your content here -->
    </div>
</div>
                                

Message Field

Example

  1. He made his film debut with a minor part in Back ti the Future Part II (1989). Many desktop publishing packages and web page editors now use Lorem Ipsum.
<div class="comment-list styled clearfix">
    <ol>
        <li class="comment">
            <div class="comment-body boxed">
                <div class="comment-arrow"></div>
                <div class="comment-avatar">
                    <div class="avatar">
                        <img src="images/temp/avatar6.png" alt="" />
                    </div>
                </div>
                <div class="comment-text">
                    <div class="comment-author clearfix">
                        <a href="#" class="link-author">Jude Law</a>
                    </div>
                    <div class="comment-entry">
                        He made his film debut with a minor part in Back ti the Future Part II (1989). Many desktop publishing packages and web page editors now use Lorem Ipsum.
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </li>
    </ol>
</div>
                                

Video Player

Use Video.js player to play video content.

Element specific usage

Video Player require next files to be included into <head> section of the page:

<link href="css/video-js.css" rel="stylesheet">
<script src="js/video.js"></script>
                                

Example

<div class="video_player boxed">
    <div class="inner">
        <video id="my_video_1" class="video-js" controls loop
               preload="auto" poster="images/temp/vjs_poster2.png"
               data-setup="{}">
            <source src="http://path-to-video/video.mp4" type='video/mp4'>
        </video>
    </div>
</div>
                                
Enable Video Player via JS:
<script>
    _V_("my_video_1").ready(function(){
        var myPlayer = this;
        var aspectRatio = 267/640;
        var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
        myPlayer.width(width).height( width * aspectRatio );

        function resizeVideoJS(){
            var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
            myPlayer.width(width).height( width * aspectRatio );
        }
        resizeVideoJS();
        window.onresize = resizeVideoJS;
    });
</script>
                                

Audio Player

Use jPlayer to play audio content.

Element specific usage

Audio Player require next files to be included into <head> section of the page:

<link href="css/jplayer.css" rel="stylesheet">
<script src="js/jquery.jplayer.min.js"></script>
<script src="js/jplayer.playlist.min.js"></script>
                                

Example

<div class="widget-container widget-audio boxed">
    <div class="inner">
        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
        <div id="jp_container_1" class="jp-audio">
            <div class="inner">
                <div class="jp-gui jp-interface">
                    <div class="jp-controls-wrap">
                        <div class="song_title"></div>
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <ul class="jp-controls clearfix">
                            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                            <li><a href="javascript:;" class="jp-previous disabled" tabindex="1">previous</a></li>
                            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                            <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                            <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                            <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                            <li><a href="javascript:;" class="jp-playlist-toggle" tabindex="1" title="Toggle PlayList">Toggle PlayList</a></li>
                        </ul>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                    </div>
                </div>
                <div class="jp-playlist">
                    <ul class="jp-playlist-inner">
                        <li></li>
                    </ul>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    <a href="http://get.adobe.com/flashplayer/" target="_blank">
                        Flash plugin
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
                                
Enable Audio Player via JS:
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"<div class='item-song'>He lives in you, he lives in me</div><div class='item-artist'>Elton John, Hans Zimmer</div><img src='images/temp/music-player4.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
            },
            {
                title:"<div class='item-song'>I saw you dancing</div><div class='item-artist'>Yaki Da</div><img src='images/temp/music-player5.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
            },
            {
                title:"<div class='item-song'>Sands of Time</div><div class='item-artist'>Pandora</div><img src='images/temp/music-player6.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]>
</script>
                                

Sliders

Image Slider

The slideshow is based on Bootstrap's carousel.js

Example

<div class="widget-container widget_gallery boxed">
    <div class="inner">
        <div id="myCarousel2" class="carousel slide" data-interval="20000">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item">
                    <img src="images/temp/post_img6.jpg" alt="" />
                    <div class="carousel-desc"><span>Wild Deer</span></div>
                </div>
                ...
                ...
                ...
            </div>
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel2" data-slide-to="0"></li>
                ...
                ...
                ...
            </ol>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel2" data-slide="prev"></a>
            <a class="carousel-control right" href="#myCarousel2" data-slide="next"></a>
        </div>
    </div>
</div>
                                    

Calendar

Calendar allow users to select multiple dates. Two different calendar styles available. To switch to the alternative calendar style just add class styled to widget_calendar.

Element specific usage

Calendar require next files to be included into <head> section of the page:

<script src="js/libs/jquery-ui.min.js"></script>
<script src="js/jquery-ui.multidatespicker.js"></script>
<link href="css/jquery-ui-1.8.20.custom.css" rel="stylesheet">
                                

Example

<div class="widget-container widget_calendar boxed styled">
    <div class="inner">
        <input type="text" name="date_departure" class="inputField" value="" id="date_departure">
    </div>
</div>

<div class="widget-container widget_calendar boxed">
    <div class="inner">
        <input type="text" name="date_departure2" class="inputField" value="" id="date_departure2">
    </div>
</div>
                                
Enable Calendar via JS:
<script>
    // <![CDATA[
    jQuery(document).ready(function($) {

        // First Calendar
        function assignCalendar(id){
            $('<div class="calendar" />')
                    .insertAfter( $(id) )
                    .multiDatesPicker({
                        dateFormat: 'yy-mm-dd',
                        minDate: new Date(),
                        maxDate: '+1y',
                        altField: id,
                        firstDay: 1,
                        showOtherMonths: true
                    }).prev().hide();
        }
        assignCalendar('#date_departure');

        // Second Calendar
        function assignCalendar(id){
            $('<div class="calendar" />')
                    .insertAfter( $(id) )
                    .multiDatesPicker({
                        dateFormat: 'yy-mm-dd',
                        minDate: new Date(),
                        maxDate: '+1y',
                        altField: id,
                        firstDay: 1,
                        showOtherMonths: true
                    }).prev().hide();
        }
        assignCalendar('#date_departure2');

    });
    // ]]>
</script>
                                

User Profile

Default User Profile

Display information about user in a styled box.

Example

John Raymons
Your talent amazes! This is awesome. Excited to see the final product.
<div class="widget-container widget_avatar boxed">
    <div class="avatar-image">
        <img src="images/temp/avatar-image.jpg" alt="" />
    </div>
    <div class="inner clearfix">
        <div class="avatar">
            <img src="images/temp/avatar.png" alt="" />
        </div>
        <h5>John Raymons</h5>
        <span class="subtitle">
            Your talent amazes! This is awesome. Excited to see the final product.
        </span>
    </div>
    <div class="post-meta-links">
        <ul class="clearfix">
            <li class="post-view">
                <a href="#"><span><i class="icon-post"></i>172</span></a>
            </li>
            <li class="post-comm">
                <a href="#"><span><i class="icon-post"></i>34</span></a>
            </li>
            <li class="post-like">
                <a href="#"><span><i class="icon-post"></i>210</span></a>
            </li>
        </ul>
    </div>
</div>
                                

Social Buttons

Add the Social links block to your site.

Example

<div class="widget-container widget-social boxed">
    <ul>
        <li>
            <a href="#" class="social-facebook"><span>Facebook</span></a>
        </li>
        <li>
            <a href="#" class="social-pinterest"><span>Pinterest</span></a>
        </li>
        <li>
            <a href="#" class="social-twitter"><span>Twitter</span></a>
        </li>
    </ul>
</div>
                                

Weather Informer

Use this widget to show air temperature, water temperature and wind speed.

Example

26°
14°
13
<div class="widget-container widget-weather boxed clearfix">
    <div class="air-temp"><strong>26°</strong></div>
    <div class="water-temp"><strong>14°</strong></div>
    <div class="wind-speed"><strong>13</strong></div>
</div>
                                

Trade Informer

Use this widget to show trader's information.

Example

634. 39 +2.18 (3.71%)
Today 2:25 pm

Salt Lake City, Utah

AAPL
Yearly Change
+127. 01
<div class="widget-container widget-trade boxed">
    <div class="widget-title">
        <span class="trade-rate trade-rate-up">634. 39</span>
        <span class="trade-rate-change">+2.18 (3.71%)</span>
    </div>
    <div class="inner">
        <div class="trade-time">Today 2:25 pm</div>
        <h4 class="trade-location">
            <a href="#">Salt Lake City, Utah</a>
        </h4>
        <ul class="trade-shares clearfix">
            <li class="traded">
                <a href="#">
                    <strong>13.5 M</strong>
                    <span>Shares Traded</span>
                </a>
            </li>
            <li class="capitalization">
                <a href="#">
                    <strong>28.44 B</strong>
                    <span>Market Cap</span>
                </a>
            </li>
        </ul>
        <div class="trade-bottom trade-graph">
            <h6 class="trade-bottom-title">AAPL</h6>
            <div class="trade-bottom-content">
                <img src="images/trade-graph.png" alt="" />
            </div>
        </div>
        <div class="trade-bottom trade-yearly-change">
            <h6 class="trade-bottom-title">Yearly Change</h6>
            <div class="trade-bottom-content">
                <span>+127. 01</span>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
                                

Statistics

Use this widget to show different statistical data.

Element specific usage

This widget require Google Charts:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
                                

Example

<div class="tabs_framed styled widget-stats">
    <ul class="tabs clearfix">
        <li class="active">
            <a href="#diagram" data-toggle="tab">Diagram Stats</a>
        </li>
        <li>
            <a href="#month" data-toggle="tab">Month Report</a>
        </li>
    </ul>

    <div class="tab-content boxed clearfix">
        <div class="tab-pane fade in active" id="diagram">
            <h6>Data Transfer</h6>
            <div id="donutchart" class="donutchart"></div>
            <ul class="stats-data clearfix">
                <li>
                    <a href="#"><span>audio</span><strong>55%</strong></a>
                </li>
                <li class="red">
                    <a href="#"><span>video</span><strong>23%</strong></a>
                </li>
                <li class="yellow">
                    <a href="#"><span>photo</span><strong>17%</strong></a>
                </li>
            </ul>
            <ul class="stats-links clearfix">
                <li>
                    <a href="#">
                        <i class="stats-icon stats-icon1"></i>
                        <br />
                        <span>upload files</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="stats-icon stats-icon2"></i>
                        <br />
                        <span>share link</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="stats-icon stats-icon3"></i>
                        <br />
                        <span>back up</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-pane fade" id="month">
            <h6>Data chart</h6>
            <div id="columnchart" class="columnchart"></div>
            <ul class="stats-data clearfix">
                <li>
                    <a href="#"><span>audio</span><strong>50%</strong></a>
                </li>
                <li class="red">
                    <a href="#"><span>video</span><strong>26%</strong></a>
                </li>
                <li class="yellow">
                    <a href="#"><span>photo</span><strong>18%</strong></a>
                </li>
            </ul>
            <ul class="stats-links clearfix">
                <li>
                    <a href="#">
                        <i class="stats-icon stats-icon1"></i>
                        <br />
                        <span>upload files</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="stats-icon stats-icon2"></i>
                        <br />
                        <span>share link</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="stats-icon stats-icon3"></i>
                        <br />
                        <span>back up</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
                                
Enable Google Charts via JS:
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Media', 'GB'],
            ['Audio', 1100],
            ['Video', 460],
            ['Photo', 340],
            ['Other', 100]
        ]);

        var options = {
            pieHole: 0.4,
            legend: 'none',
            pieSliceText: 'none',
            width: 220,
            height: 220,
            slices: {0: {color: '#4daf7b'}, 1: {color: '#e6623d'}, 2: {color: '#ebc85e'}, 3: {color: '#f4ede7'}},
            chartArea:{left:"10px", top:"10px", width:"92%", height:"92%"}
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);

        var data2 = google.visualization.arrayToDataTable([
            ['Month', 'Traffic'],
            ['June',  1100],
            ['July',  1580],
            ['August',  1300],
            ['September',  1430]
        ]);

        var options2 = {
            width: 220,
            height: 220,
            legend: 'none',
            colors: ['#4daf7b'],
            chartArea:{left:0, top:0, width:"100%", height:"100%"},
            hAxis:{textPosition:"none", gridlines:{color:"#fff"}, baselineColor:"#4daf7b"},
            vAxis:{textPosition:"none", gridlines:{color:"#fff"}, baselineColor:"#4daf7b"}
        };

        var chart2 = new google.visualization.ColumnChart(document.getElementById('columnchart'));
        chart2.draw(data2, options2);
    }
</script>