Extract the downloaded zip archive contents on your local machine (server) and you're done.
master/
dashboard2-dark
|
├── 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.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// 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;A simple form example
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
Horizontal form example
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # of columns | 12 | |||
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
<button type="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.
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.
<div class="panel">
<div class="panel-heading bg-blue font-white">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
<span class="sr-only">25% Complete</span>
</div>
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @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>
These are the primary CSS files used for general front-end styling. Use these to customize your theme even further.
These are the various attribution inks to the Javascript files included or modified to work with in this theme.
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