Get started
Basic information and how to start with template
Basic information and how to start with template
First of all i want to thank you for purchasing my theme.
I have huge experience, develop this template with love and pay attention to every single detail, including testing and etc, still if you spot some kind of bugs or want improvments to specific elements or just need new feature don`t hessitate to contact us
We love all customers so every one get free updates.
This is ongoing project so will add features and will fix bugs, also we make this like a framework so don`t hessitate to propouse features or submit bugs.
We provide free suport via email system, you need to email at support@suggeelson.com
All other methods like comments, tweets and etc. will be redirected to email support only, support respond is very fast but some time may be 48 hours delay ( if fall in weekends or national celebrations days). Please be kind and wait to our respond.
After you unzip package you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
Full feature list for Supr template
This is whole general page markup without inside elements
<html>
<body>
<!-- Start #header -->
<div id="header">
</div>
<!-- End #header -->
<!-- Start #wrapper -->
<div id="wrapper">
<!-- Start #left-sidebar -->
<div id="left-sidebar">
</div>
<!-- Start #right-sidebar -->
<div id="right-sidebar">
</div>
<!-- Start .page-content -->
<div id="content" class="page-content clearfix">
<div class="contentwrapper"><!--Content wrapper-->
Page content goes here
</div><!-- End contentwrapper -->
</div><!-- End #content -->
</div>
<!-- End #wrapper -->
<!-- Start #footer -->
<div id="footer">
</div>
<!-- End #footer -->
</body>
</html>
Lets see the header markup, i will not paste the whole section just the containers for detailed example just open any page and find header
Header contain two block one is navbar witch hold logo, dropdown menus etc. and header area with usefull links.
<!-- .#header -->
<div id="header">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
Supr.<span class="slogan">admin</span>
</a>
</div>
<!-- .no-collapse -->
<div id="navbar-no-collapse" class="navbar-no-collapse">
</div>
</nav>
</div> <!-- / .#header -->
Creating left sidebar
Left sidebar contain a most valued navigation for template, also have space for some widgets and panels
<!--Sidebar background-->
<div id="sidebarbg" class="hidden-lg hidden-md hidden-sm hidden-xs"></div>
<!--Sidebar content-->
<div id="sidebar" class="page-sidebar hidden-lg hidden-md hidden-sm hidden-xs">
<div class="shortcuts">
<ul>
<li><a href="support.html" title="Support section" class="tip"><i class="s24 icomoon-icon-support"></i></a></li>
<li><a href="#" title="Database backup" class="tip"><i class="s24 icomoon-icon-database"></i></a></li>
<li><a href="charts.html" title="Sales statistics" class="tip"><i class="s24 icomoon-icon-pie-2"></i></a></li>
<li><a href="#" title="Write post" class="tip"><i class="s24 icomoon-icon-pencil"></i></a></li>
</ul>
</div><!-- End search -->
<!-- Start .sidebar-inner -->
<div class="sidebar-inner">
<!-- Start .sidebar-scrollarea -->
<div class="sidebar-scrollarea">
Navigation inside
</div>
</div>
</div>
sidenav is created by standart bootstrap markup easy to modify and reproduce via loops in any server side lang or other apps.
Here is the short example:
<!-- .sidenav -->
<div class="sidenav">
<div class="sidebar-widget mb0">
<h6 class="title mb0">Navigation</h6>
</div><!-- End .sidenav-widget -->
<div class="mainnav">
<ul>
<li><a href="index.html"><i class="s16 icomoon-icon-screen-2"></i><span class="txt">Dashboard</span> </a></li>
<li>
<a href="#"><i class="s16 icomoon-icon-stats-up"></i><span class="txt">Charts</span> </a>
<ul class="sub">
<li><a href="charts-flot.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Flot charts</span></a></li>
<li><a href="charts-rickshaw.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Rickshaw charts</span></a></li>
<li><a href="charts-morris.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Morris charts</span></a></li>
<li><a href="charts-chartjs.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Chartjs</span></a></li>
<li><a href="charts-other.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Other charts</span></a></li>
</ul>
</li>
</ul>
</div>
</div><!-- / .sidenav -->
If you want to insert some widgets into sidebar area use this example
<div class="sidebar-widget">
<h6 class="title">Disk Space Usage</h6>
<div class="content clearfix">
Your code here
</div>
</div><!-- End .sidenav-widget -->
Right sidebar markup is almost identical with the left sidebar
By defauth right sidebar is show only in big screens and hided in small to preserve more space.
<!-- Start #right-sidebar -->
<aside id="right-sidebar" class="right-sidebar">
<!-- Start .sidebar-inner -->
<div class="sidebar-inner">
<!-- Start .sidebar-scrollarea -->
<div class="sidebar-scrollarea">
Your content here
</div>
</div>
</aside>
Content is the place where you put all pages, this will be the place witch you modified most times for every single page
<!--Body content-->
<div id="content" class="page-content clearfix">
<div class="contentwrapper"><!--Content wrapper-->
Here we add pages
</div><!-- End contentwrapper -->
</div><!-- End #content -->
Template come with more that 2000 icons, all icons are located in fonts/ directory.
Demo with icons you can see in icons.html file
Do not use all icons, theese icons are only for demo propouse i suggest to pick 100-200 icons and generate your own font in this wonderfull app Icomoon app
This will decrese loading time and improve your app in production servers, if you have hard time to do this just drop email to help you out
Just add i tag and specify a desired icon tag. This code will show a home icon
<i class="fa fa-home"> fa fa-home</i>
If you need to control size just add a size class ( see CSS section for detailed explain of how to use helpers). This code will show a 24px size icon
<i class="fa fa-home s24"> fa fa-home</i>
p>If you want specific color you need to add color class as well. ( see CSS section for detailed explain). This code will show a 24px size green icon
<i class="fa fa-home s24 color-green"> fa fa-home</i>
Be sure to add additional classes like fa and glyphicon for theese two type of icons. In icons.html page when you do copy and paste icon class will not show the icon until you add this pre class
Checkout the icons.html page to see all icons