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
<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
<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>
<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
<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>
<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>
<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>
Navigation
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
Etiam At Risus Et Justo

Lorem ipsum dol or sit amet, cons ec tetur adipi scing elit. Nullam in dui mauris. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl.
<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
<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
<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
<div class="widget-container boxed"> <h3 class="widget-title">Widget Title</h3> <div class="inner"> <!-- place your content here --> </div> </div>
Message Field
Example
-
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>
<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>
<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>
<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
<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
<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
<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>
<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>