Documentation

Documentation

Introduction


Installation Guide

Extract the downloaded zip archive contents on your local machine (server) and you're done.

Structure

master/    dashboard1    |    ├── css - all inclued css files    │     ├── custom - custom scss files (custom-style, custom-variables, theme colors)    │     ├── fonts  - font folder    │    ├── img  - img folder    │      ├── js - all inclued scripts    │       ├── pages - all inclued pages    │     └── scss - all inclued scss files

Help Class

.inline - display inline-block.center - vertical align & text center.no-padding - padding 0px .center-block - margin 0 auto & text center.p-l-0 - padding left 0px.p-r-0 - padding right 0px.p-t-0 - padding top 0px.p-b-0 - padding bottom 0px.m-t-0 - margin top 0px .m-t-5 - margin top 5px.m-t-10 - margin top 10px .m-t-20 - margin top 20px.m-t-30 - margin top 30px.m-r-0 - margin right 0px.m-r-5 - margin right 5px.m-r-10 - margin right 10px.m-r-20 - margin right 20px.m-r-30 - margin right 30px.m-b-0 - margin bottom 0px.m-b-5 - margin bottom 5px.m-b-10 - margin bottom 10px .m-b-20 - margin bottom 20px.m-b-30 - margin bottom 30px.m-l-0 - margin left 0px.m-l-5 - margin left 5px.m-l-10 - margin left 10px.m-l-20 - margin left 20px.m-l-30 margin left 30px.p-5 - padding 5px.p-10 - padding 10px.font-white - h1, h2, h3, h4, h5, h6, p, span color white.font-black - h1, h2, h3, h4, h5, h6, p, span color black.image-bg - parrallax img

Color Variables

// Custom Variables// Font Variables$font: 'Open Sans', 'Verdana', sans-serif;$small-font-size: 12px;$medium-font-size:16px;$large-font-size:20px;$menu-font-size:15px;$icon-font-size: 24px;$font-color1:#373a3c;$font-color-secondary:#757575;// Transition Variables$fast-transition: all 0.15s ease-in-out; $average-transition: all 0.3s ease-in-out; $slow-transition: all 0.5s ease-in-out; // Scheme Color $blue:#2097f3;$cyan:#00bfd6;$gray:#f0f0f0;$green:#4EB152;$dark:#212121;$purple:#663ab8;$pink:#EB1F62;$red:#FE5050;$orange:#FF9703;$yellow:#FDCD0C;$white:#ffffff;// Dark Scheme Color $lighten-gray:#3f3f3f;$ultra-light-gray:lighten($lighten-gray,25%);$dark-gray:#303030;$darken-gray:#333;$ultra-dark-gray:darken($dark-gray,5%);// $font-color1:lighten($lighten-gray,25%); dark// Lighten Scheme Color$lighten-blue:#36a1f4;$lighten-cyan:#19c5da;$lighten-purple:#754dbf;$lighten-green:#5fb863;$lighten-pink:#ed3571;$lighten-red:#fe6161;$lighten-orange:#ffa11c;$lighten-yellow:#fdd224;// Darken Scheme Color$darken-blue:#1c87da;$darken-cyan:#00abc0;$darken-purple:#5b34a5;$darken-green:#469f49;$darken-pink:#d31b58;$darken-red:#e44848;$darken-orange:#e58702;$darken-yellow:#e3b80a;

Components


Basic Form

A simple form example

<form><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email"></div></form>

Horizontal form example

<form><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email"></div></form>

Buttons

Simple buttons Example

<buttontype="button"class="btn btn-md bg-purple"><span>Purple</span></button><buttontype="button"class="btn btn-md btn-rounded bg-purple"><span>Purple</span></button><buttontype="button"class="btn btn-outline btn-md bg-purple"><span>Purple</span></button><buttontype="button"class="btn btn-md btn-outline btn-rounded bg-purple"><span>Purple</span></button>

Grid

Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes

Notifications

<buttontype="button"class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"></span></button><strong>Warning!</strong>Better check yourself, you're not looking too good.

Panel

Panel blue

Curabitur suscipit et augue nec sollicitudin. Nunc et egestas quam. Sed pharetra augue a malesuada euismod. Vivamus posuere tortor lacus, et tristique odio dapibus tristique. Sed purus magna, sollicitudin non commodo.

<divclass="panel"><divclass="panel-heading bg-blue font-white">Panel heading without title</div><divclass="panel-body">    Panel content  </div></div>

Progress Bar

25%
<divclass="progress"><divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 25%;"><spanclass="sr-only">25% Complete</span></div>

Table

Optional table caption.
#First NameLast NameUsername
1MarkOtto@mdo
<table class="table"><caption>text</caption><thead><tr><th>#</th><th>first name</th><th>last name</th><th>username</th></tr><tbody><tr><th scope="row">1</th><th>Mark</th><th>Otto</th><th>@mdo</th></tr></tbody></table>

Credits


Files & Sources

Included Stylesheets

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further.

  • 1. cropper/cropper.css - Cropper stylesheet
  • 2. datatables/datables.css - Datables stylesheet
  • 3. daterangepicker/daterangepicker.css - Daterangepicker stylesheet
  • 4. morris/morris.css - Morris stylesheet
  • 5. summernote/summernote.css - Summernote stylesheet
  • 6. switchery/switchery.css - Switchery stylesheet
  • 7. tagsinput/bootstrap-tagsinput.css - Tagsinput stylesheet
  • 8. touchspin/jquery.bootstrap-touchspin.css - Tagsinput stylesheet
  • 9. vmap/jqvmap.css - Vmap stylesheet
  • 10. custom.css - Custom stylesheet
  • 11. nanoscroller.css - Nanoscroller stylesheet
  • 12. theme-blue.css - Theme blue stylesheet
  • 13. theme-cyan.css - Theme cyan stylesheet
  • 14. theme-green.css - Theme green stylesheet
  • 15. theme-orange.css - Theme orange stylesheet
  • 16. theme-pink.css - Theme pink stylesheet
  • 17. theme-purple.css - Theme purple stylesheet
  • 18. theme-red.css - Theme red stylesheet
  • 19. theme-yellow.css - Theme yellow stylesheet
Included JavaScript

These are the various attribution inks to the Javascript files included or modified to work with in this theme.

Support

Please remember you have purchased a very affordable theme and you have not paid for a full-time web design agency.

You have question ?
zwoweb@gmail.com

Support for my items includes:
  • * Responding to questions or problems regarding the item and its features
  • * Fixing bugs and reported issues
  • * Providing updates to ensure compatibility with new software versions
Item support does not include:
  • * Customization and installation services
  • * Support for third party software and plug-ins
Before seeking support, please...
  • * Make sure your question is a valid Theme Issue and not a customization request.
  • * Make sure you have read through the documentation before asking support on how to accomplish a task.
  • * Try disabling any active plugins to make sure there isn't a conflict with a plugin. And if there is this way you can let us know.
  • * If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
  • * Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  • * Make sure to state the name of the theme you are having issues with when requesting support via ThemeForest.

Copyright© 2016 Develop by Zwolek. All Rights Reserved.