QuixNav - Bootstrap Admin Dashboard HTML Template

QuixNav documentation version 1.0


Introduction


First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

Requirements

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: VS Code, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)

Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.

Installation #back to top


Overview

This section guides you to install all required software and libraries in order to fully utilize QuixNav for your project

Install Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is required in order to run the Metronic build tools. Download the latest version of Node and install it: nodejs.org/en/download/

Update your NPM

Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.

                            npm install --global npm@latest
                        

Install all dependencies

If you want to update or develop this theme, you need to install all dependencies by running:

                            npm install
                        

Update #back to top


Overview

You may want to update the plugins used in this template

Install all dependencies

If you haven't yet run the

npm install
command, please run this command on this project root directory to install all dependencies

Install Gulp CLI

Install gulp-cli to make Gulp perform cli actions. To install gulp-cli, run this command

                            npm install gulp-cli --global 
                        

Copy plugins

You have to copy all updated plugins to your project folder from node_modules. To copy all plugins together, run this comment:

                            gulp plugin
                        

Generate Common.js

In order to simplify common scripts, we accumuluted the common scripts together. So you need to run a simple command to generate common.js. common.js contains jquery.min.js, bootstrap.bundle.min.js, metisMenu.min.js, jquery.slimscroll.min.js, bootstrap-select.min.js

                            gulp common_js
                        

Now your plugins and scripts are updated. Enjoy!

Build SASS #back to top

Overview

You may want to build your SASS in order to change any layout or update. If you haven't run

npm install
yet, please run it first. Then follow next step.

Build/Compile/Watch

Run following command to watch and build SASS

                            npm run watch
                        

Path change

You may want to change your folder destination of outputed CSS or input SASS. In order to do that, just open the package.json file and update the script command's path as yours.

                            "watch": "node-sass --watch src/main/scss/main.scss src/main/css/style.css --source-map src/main/css/style.css.map"
                        

Layout#back to top

In the quixnav.js file, you can change your theme layout as you want to. Initialize the plugin

new quixSettings()
and pass the options into this function.

Background

Theme background can be toggled between light and dark

For light background
                                version: "light" //theme background will be "light"
                            
For dark background
                                version: "dark" //theme background will be "dark"
                            

Theme layout

Theme layout can be toggled between vertical and horizontal

For vertical layout:
                                layout: "vertical"
                            
For horizontal layout:
                                layout: "horizontal"
                            

Sidebar Type

This theme has four types of sidebar, Full, Mini, Compact, Overlay

For full sidebar:
                                sidebarStyle: "full"
                            
For modern sidebar:
                                sidebarStyle: "modern"
                            
For compact sidebar:
                                sidebarStyle: "compact"
                            
For mini sidebar:
                                sidebarStyle: "mini"
                            
For overlay sidebar:
                                sidebarStyle: "overlay"
                            

Sidebar position

Sidebar position can be toggled between two options. static and fixed

For static sidebar
                                sidebarPosition: 'static'
                            
For fixed sidebar
                                sidebarPosition: 'fixed'
                            

Header position

Header position can be toggled between two options. static and fixed

For static header
                                headerPosition: 'static'
                            
For fixed header
                                headerPosition: 'fixed'
                            

Box container

Theme box container can be toggled between three options. wide, boxed, wide-boxed

For wide container
                                containerLayout: 'wide'
                            
For boxed container
                                containerLayout: 'boxed'
                            
For wide-boxed container
                                containerLayout: 'wide-boxed'
                            

Direction

This template supports two directions, LTR and RTL.

For ltr support
                                direction: 'ltr'
                            
For rtl support
                                direction: 'rtl'
                            

Nav Header Color

Nav header color can be toggled among 10 diffrent colors.

Change nav header color:
                                navheaderBg: 'color_1' //color value can be extended to 'color_2', 'color_3', 'color_4', 'color_5', 'color_6', 'color_7', 'color_8', 'color_9', 'color_10'
                            

Header Color

Header color can be toggled among 10 diffrent colors.

Change header color:
                                headerBg: 'color_1' //color value can be extended to 'color_2', 'color_3', 'color_4', 'color_5', 'color_6', 'color_7', 'color_8', 'color_9', 'color_10'
                            

Sidebar Color

Sidebar color can be toggled among 10 diffrent colors.

Change Sidebar color:
                                sidebarBg: 'color_1' //color value can be extended to 'color_2', 'color_3', 'color_4', 'color_5', 'color_6', 'color_7', 'color_8', 'color_9', 'color_10'
                            

Folder structure #back to top

SASS/JS structure #back to top



Page structure #back to top

Head

                            
                                
                                
                                
                                QuixNav - Admin Dashboard Navigation
                                
                                <link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png">
                                
                                <link href="../css/style.css" rel="stylesheet">
                            
                        

Body


Preloader
                            
Nav header
                            
                        
Header
                            
Menu
                            
                        
Content body
                            

Hello, Welcome here

Footer
                            
                        
Scripts
                            <script src="../../assets/plugins/common/common.min.js"></script>
                            <script src="../js/custom.min.js"></script>
                            <script src="../js/settings.js"></script>
                            <script src="../js/quixnav.js"></script>
                            <script src="../js/styleSwitcher.js"></script>
                        

This template has RTL support. It's very ease to turn this template into RTL by following steps.

In the quixnav.js file, just change the direction property into 'rtl'

                            direction: "rtl"
                        

That's it, now you are good to go with RTL version.

Customize

If you want to write any style for RTL layout, you may write them into rtl.scss file. This file is located at

                            scss/layout/rtl/rtl.scss
                        

Or if you want to style it via CSS file, you can write all of your css nested by this selector

                                [direction="rtl"] your_selector {

                                }
                        

[direction="rtl"] this is an attribute in the body tag.

Credit #back to top

Code released under the Un License License.

For more information about copyright and license check choosealicense.com.

Hire us #back to top

If you need theme customization or custom web development, please provide your project details using below form and one of our well established development partners will get back to you with a free quote

Send me qoute

Copyright and license #back to top

Code released under the ThemeForest License.

Development credit: Quixlab