Created: 25/08/2017
By: UXLiner
Email: UXLiner
Hi! Thank you for purchasing my template.
If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
This file will teach you how to set up and use the “Ovio” Theme.
Best regards,
UXLiner
Ovio – admin dashboards and control admin panels. It is a fully responsive HTML template, based on the CSS framework Bootstrap. Ovio comes with lots of ready to use widgets and components. It has a huge collection of reusable UI components and integrated with latest jQuery plugins. So simply download and starting bootstrapping your next big dashboard.
The layout consists of four major parts:
.wrapper. A div that wraps the whole site..main-header. Contains the logo and navbar..sidebar-wrapper. Contains the user panel and sidebar menu..content-wrapper. Contains the page header and content.Ovio provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal.
.fixed to get a fixed header and sidebar..sidebar-collapse to have a collapsed sidebar upon loading..layout-boxed to get a boxed layout that stretches only to 1250px..layout-top-nav to remove the sidebar and have your links at the top navbar.<header class="main-header dark-bg">
<!-- Logo -->
<a href="index.html" class="logo dark-bg">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><img src="dist/img/logo.png" alt="Ovio"></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><img src="dist/img/logo-lg.png" alt="Ovio"></span> </a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <span class="sr-only">Toggle navigation</span> </a>
<div class="pull-left search-box">
<form action="#" method="get" class="search-form">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i> </button>
</span></div>
</form>
</li>
</ul>
</div>
</nav>
</header>
<aside class="main-sidebar dark-bg">
<section class="sidebar">
<div class="user-panel black-bg">
<div class="pull-left image"> <img src="dist/img/img1.jpg" class="img-circle" alt="User Image"> </div>
<div class="pull-left info">
<p>Florence Douglas</p>
<a href="#"><i class="fa fa-circle"></i> Online</a> </div>
</div>
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header dark-bg">Menu</li>
<li class="treeview active"><a href="#"><i class="fa fa-dashboard"></i> <span>Dashboard</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a>
<ul class="treeview-menu ">
<li class="active"><a href="index.html"><i class="fa fa-angle-right"></i> Dashboard 1</a></li>
<li><a href="dashboard-2.html"><i class="fa fa-angle-right"></i> Dashboard 2</a></li>
<li><a href="dashboard-3.html"><i class="fa fa-angle-right"></i> Dashboard 3</a></li>
</ul>
</li>
<li class="treeview"> <a href="#"><i class="fa fa-desktop"></i> <span>Templates</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a>
<ul class="treeview-menu">
<li><a href="index.html"><i class="fa fa-angle-right"></i> Default</a></li>
<li><a href="index-light.html"><i class="fa fa-angle-right"></i> Light</a></li>
<li><a href="index-dark.html"><i class="fa fa-angle-right"></i> Dark</a></li>
<li><a href="index-collapsed-sidebar.html"><i class="fa fa-angle-right"></i> Collapsed Sidebar</a></li>
<li><a href="index-boxed.html"><i class="fa fa-angle-right"></i> Boxed</a></li>
<li><a href="index-top-nav.html"><i class="fa fa-angle-right"></i> Top Navigation</a></li>
<li><a href="index-rtl.html"><i class="fa fa-angle-right"></i> RTL</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- sidebar-menu -->
</section>
</aside>
<footer class="main-footer dark-bg">
<div class="pull-right hidden-xs"> Version 1.0</div>
Copyright © 2017 Yourdomian. All rights reserved. </footer>
Ovio supports the following browsers:
Note: IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.
You add new fonts by adding them to your Fonts folder in your computers Control Panel or right click font file and "Install".
Resources used:
If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist.
To keep in touch with my latest PSD and HTML templates make sure to check out http://themeforest.net/user/UXLiner frequently.
Best regards,
UXLiner