Thank you for purchasing the theme. This document is intended for information about the theme setup and theme.
-
NodeJS
Download and install the NodeJs package according to your operating system.
Run the following commands in the Command Line (CMD) to check if it is installed.
-
Install Gulp
NodeJS (NPM) must be installed before installing gulp. Please check if it is installed.
Install gulp using the command below.npm install --global gulp
-
Run Plyenz
In order to run the theme and install add-ons in package.json, you will need to go to the root folder where the theme is located.
From the command line, go to /template and run the following command.npm install
Run the gulp u by entering the following command. The localhost preview will start. You will also be able to see the browser as a live (browserSync).
gulp
node --version
npm --version
├── template/
│ ├── assets/
│ │ ├── css/
│ │ │ ├── main.css
│ │ │ ├── main.min.css
│ │ │ ├── plyenz.dark.css
│ │ ├── js/
│ │ │ ├── main.js
│ │ │ ├── dashboard-1.js
│ │ │ ├── dashboard-2.js
│ │ │ ├── ...
│ │ ├── less/
│ │ │ ├── main.less
│ │ │ ├── app/
│ │ │ ├── components/
│ │ │ ├── forms/
│ │ │ ├── helpers/
│ │ │ │ ├── variables.less
│ │ │ ├── page/
│ │ │ ├── partials/
│ │ │ ├── skins/
│ │ │ ├── utility/
│ │ ├── vendor
│ │ │ ├── jquery/
│ │ │ │ ├── js/
│ │ │ │ │ ├── jquery-3.2.1.min.js
│ │ ├── images/
│ │ │ ├── favicon.png
│ ├── template-light/
│ │ ├── index.html
│ ├── template-dark/
│ │ ├── index.html
│ ├── index.html
To use the dark design, simply add the plyenz.dark.css style file to the page you want.
<link rel="stylesheet" href="../assets/css/plyenz.dark.css">
Vertical and horizontal positions can also add dark or light-skinned menus.
Add .layout-top-menu-dark class to header tag.
To use the vertical side menu, add the layout-side.js script file before the </body> tag.
<script src="../assets/js/layout-side.js"></script>Dark Side
Add .layout-side-menu class to .wrapper class
<aside class="side-menu side-menu-dark">
<div class="side-menu-head">
<div class="header-logo logo-type no-margin">
<a href="index.html" class="text-white">Plyenz.</a>
</div>
</div>
<nav data-simplebar>
<ul>
<li class="menu-title">Layout</li>
<li class="sub-item">
<a href="#" class="sub-item-toggle"><i class="fas fa-th-large icon"></i><span>Dashboard</span></a>
<div class="sub-menu">
<ul>
<li><a href="index.html">Dashboard</a></li>
<li><a href="dashboard-crypto.html">Crypto</a></li>
<li><a href="dashboard-3.html">Sales</a></li>
<li><a href="dashboard-4.html">Support</a></li>
<li><a href="dashboard-5.html">Fitness</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</aside>
Add .layout-side-menu class to .wrapper class
<aside class="side-menu">
<div class="side-menu-head">
<div class="header-logo logo-type no-margin">
<a href="index.html" class="text-white">Plyenz.</a>
</div>
</div>
<nav data-simplebar>
<ul>
<li class="menu-title">Layout</li>
<li class="sub-item">
<a href="#" class="sub-item-toggle"><i class="fas fa-th-large icon"></i><span>Dashboard</span></a>
<div class="sub-menu">
<ul>
<li><a href="index.html">Dashboard</a></li>
<li><a href="dashboard-crypto.html">Crypto</a></li>
<li><a href="dashboard-3.html">Sales</a></li>
<li><a href="dashboard-4.html">Support</a></li>
<li><a href="dashboard-5.html">Fitness</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</aside>
Utilities classes are classes that can be used repeatedly in multiple places instead of writing multiple repeat styles.
Solid Colors
| Class | Value |
|---|---|
.bg-[value] |
primary | success | danger | warning | info | dark | secondary | purple | cyan | pink | brown | light |
Pale Colors
| Class | Value |
|---|---|
.bg-pale-[value] |
primary | success | danger | warning | info | dark | secondary | purple | cyan | pink | brown |
Gray Colors
| Class | Value |
|---|---|
.bg-gray-[value] |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Border
| Class | Value |
|---|---|
.bg-[value] |
primary | success | danger | warning | info | dark | secondary | purple | cyan | pink | brown | light |
.bd-[value]
|
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 border: [value]px solid #ccc 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 border-top: [value]px solid #ccc 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 border-right: [value]px solid #ccc 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 border-bottom: [value]px solid #ccc 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 border-left: [value]px solid #ccc |
Width
Small
| Class | Value |
|---|---|
.w-[value]
|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | ..... | 200 (step of 5) 225 | 250 | 300 | 350 | 400 | 450 | 500 | 600 | 700 | 800 | 900 | 1000 |
Width Percentage
| Class | Value |
|---|---|
.w-[value]p
|
5 | 10 | 15 | 20 | 25 | 30 | ..... | 100 (step of 5) |
Height
| Class | Value |
|---|---|
.h-[value]
|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | ..... | 200 (step of 5) 225 | 250 | 300 | 350 | 400 | 450 | 500 | 600 | 700 | 800 | 900 | 1000 |
Margin
You can set a margin to an item using the following helpful classes.
| Position | Class | Value |
|---|---|---|
|
All Top Right Bottom Left Top, Bottom Left, Right |
.m-[value] .mt-[value] .mr-[value] .mb-[value] .ml-[value] .my-[value] .mx-[value]
|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 120 | 140 | 160 | 180 | 200 | 25 | 300 | 400 | 500 |
Padding
You can set a padding to an item using the following helpful classes.
| Position | Class | Value |
|---|---|---|
|
All Top Right Bottom Left Top, Bottom Left, Right |
.p-[value] .pt-[value] .pr-[value] .pb-[value] .pl-[value] .py-[value] .px-[value]
|
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 120 | 140 | 160 | 180 | 200 | 25 | 300 | 400 | 500 |
Typography
You can set a padding to an item using the following helpful classes.
| Class | Example |
|---|---|
.text-left
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-right
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-center
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-justify
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores in tempora itaque accusantium ipsum corporis maxime labore, possimus quo recusandae iste, rerum tenetur aliquid provident, mollitia suscipit quisquam, placeat velit. |
.text-uppercase
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-capitalize
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
.text-lowercase
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, praesentium... |
Set Font size
You can set the font size using the following classes.
| Class | Value |
|---|---|
.fs-[value]
|
8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |
No Maker
| Class | Description |
|---|---|
.no-margin
|
margin: 0 |
.no-padding
|
padding: 0 |
.no-border
|
border: 0 |
.no-box-shadow
|
box-shadow: none |
.no-text-shadow
|
text-shadow: none |
.no-radius
|
border-radius: 0 |
.no-letter-spacing
|
letter-spacing: 0 |
.no-overflow
|
overflow: hidden |
.no-overflow-y
|
overflow-y: hidden |
.no-overflow-x
|
overflow-x: hidden |
.no-underline
|
text-decoration: none |
The style settings in the Plyenz admin panel are kept in the less/helpers/variables.less file.
Here you can find general colors, fonts, sizes etc. You can change.
@color-main: #6527B2;
@color-secondary: #3db6c6;
@color-dark: @color-gray-700;
@color-gray: @color-gray-400;
@color-light: fade(@color-gray-100,60);
@color-black: #000;
@color-white: #fff;
@color-red: #f90a48;
@color-purple: #ad0af9;
@color-pink: #f96197;
@color-blue: #0a37f9;
@color-orange: #f9a20a;
@color-yellow: #f9e00a;
@color-cyan: #57c7d4;
@color-brown: #885644;
@color-gray-100: lighten(@color-black,97);
@color-gray-200: lighten(@color-black,92);
@color-gray-300: lighten(@color-black,86);
@color-gray-400: lighten(@color-black,76);
@color-gray-500: lighten(@color-black,66);
@color-gray-600: lighten(@color-black,52);
@color-gray-700: lighten(@color-black,30);
@color-gray-800: lighten(@color-black,21);
@color-gray-900: lighten(@color-black,14);
// dark skin
@color-skin-dark: #0F121B;
@color-skin-dark-secondary: #1B1E2B;
@color-skin-dark-fade: fade(#fff, 45);
@color-skin-dark-light: (#fff, 70);
// text colors
@color-title: #2e2d2f;
@color-sub-title: #888888;
@color-text: #474648;
@color-text-light: #b1b0b0;
@color-text-fade: fade(@color-text-light,55);
@color-primary: @color-main;
@color-success: #1DCF3B;
@color-danger: #DB3847;
@color-warning: #F3BB00;
@color-info: #3AA4F5;
@color-muted: #ECECEC;
@color-primary-pale: fade(@color-primary, 30);
@color-success-pale: fade(@color-success, 30);
@color-danger-pale: fade(@color-danger, 30);
@color-warning-pale: fade(@color-warning, 30);
@color-info-pale: fade(@color-info, 30);
@color-dark-pale: fade(@color-dark, 30);
@color-secondary-pale: fade(@color-secondary, 30);
@color-red-pale: fade(@color-red, 30);
@color-purple-pale: fade(@color-purple, 30);
@color-cyan-pale: fade(@color-cyan, 30);
@color-pink-pale: fade(@color-pink, 30);
@color-brown-pale: fade(@color-brown, 30);
// social colors
@color-dribbble: #ea4c89;
@color-behance: #1769ff;
@color-facebook: #3b5998;
@color-google-plus: #dd4b39;
@color-twitter: #00aced;
@color-linkedin: #007bb6;
@color-pinterest: #cb2027;
@color-tumblr: #32506d;
@color-vimeo: #aad450;
@color-youtube: #bb0000;
@color-flickr: #ff0084;
@color-skype: #00aff0;
@color-reddit: #ff4500;
@color-instagram: #517fa4;
@color-rss: #f26522;
@color-git: #666666;
@color-visa: #1A1F71;
@color-paypal: #009cde;
/// Main
@color-bg-body: #f2f4f8;
// global typography
@font-family: 'Source Sans Pro', sans-serif;
@font-size: 14px;
@font-size-lg: ceil(@font-size * 1.25);
@font-size-sm: ceil(@font-size * 0.85);
@font-weight: 400;
@font-size-h1: 2em;
@font-size-h2: 1.6em;
@font-size-h3: 1.4em;
@font-size-h4: 1.2em;
@font-size-h5: 1em;
@font-size-h6: .8em;
@line-height-xs: 18px;
@line-height-sm: 20px;
@line-height-md: 24px;
@line-height-lg: 32px;
@line-height-xl: 50px;
@header-height: 70px;
@footer-height: 70px;
@side-menu-width: 230px;
@width-elm-xs: 90px;
@width-elm-sm: 110px;
@width-elm-md: 125px;
@width-elm-lg: 145px;
@width-elm-xl: 185px;
@card-bg-color: #fff;
@card-b-radius: 10px;
@card-padding: 30px;
@zindex-nav: 1300;
@zindex-header: 1000;
@zindex-modal: 9999;
@screen-media-max-lg: ~"(max-width:1200px)";
@screen-media-max-md: ~"(max-width:991px)";
@screen-media-max-sm: ~"(max-width:768px)";
@screen-media-max-xs: ~"(max-width:480px)";
@screen-media-max-xxs: ~"(max-width:320px)";
@screen-media-min-lg: ~"(min-width:1200px)";
@screen-media-min-md: ~"(min-width:991px)";
@screen-media-min-sm: ~"(min-width:768px)";
@screen-media-min-xs: ~"(min-width:480px)";
@screen-media-min-xxs: ~"(min-width:320px)";
08.12.2018 - Initial Release (v1.0)