ConsoleBox Documentation

ConsoleBox Documentation


ConsoleBox is a admin template based on google angular material. Builded with angularjs and jQuery.


  1. Unzip Downloaded file.
  2. Download and install the latest Nodejs and npm.

    for windows: Installation Guide

    for ubuntu: Installation Guide

    for mac: Installation Guide

  3. Install http-server.

    npm install -g http-server

  4. After installation, cd into your downloaded unzip folder. After run below command:

    http-server -o.

    -o is to open browser to the page.

  5. After Open browser, click on consolebox or docs link which you want to open.

    If click on consolebox: Again click on html -> default and enjoy ConsoleBox project.

    If click on docs: Enjoy ConsoleBox documentation.

data-layout options

Below class help for customize page data-layout, change themeOptions value in controller.js. Default value of themeOptions is "fixed-sidebar fixed-toolbar".

example: -
1. For Boxed data-layout, fixed sidebar and fixed header themeOptions="data-layout-boxed fixed-sidebar fixed-toolbar".
2. For Default data-layout, unfixed sidebar and fixed header themeOptions="unfixed-sidebar fixed-toolbar".
etc ..
Class Description
.data-layout-boxed Its define box body
.fixed-sidebar Its define position fixed left sidebar
.unfixed-sidebar Its define position unfixed left sidebar
.fixed-toolbar Its define position fixed header or navbar or toolbar
.unfixed-toolbar Its define position unfixed header or navbar or toolbar

How to change theme color

  1. Replace default theme color indigo to your theme color like perple in app.js and fapp.js. find more color option in color page in consolebox project.
  2. Change themeColor value in controller.js. Default themeColor value is indigo.
  3. Replace default color #3949ab to which color you want use in theme.css. This #3949ab hex value color name is indigo-600.
  4. Replace default selection content color #6f6f6f to which color you want to use in theme.css. This #6f6f6f hex value color name is near to indigo-400.

Template Structure

All template files have fixed structure consisting of prepage loader, header,left sidebar, right sidebar, content and footer.

Font Family

The standard font Material Design uses is Roboto. We have included the font files with our project.

We bundle our project with the latest iteration of Roboto Google has released. It comes with 5 different font weights you can use: 300, 400, 500, 700, 400italic.

Change Font Family

Replace button, html, input, select, textarea font-family value Roboto,Helvetica Neue,sans-serif to your font-family value. See below example:

button, html, input, select, textarea {
    font-family: Roboto,Helvetica Neue,sans-serif;

How to find page related docs

See below screenshot.

docs page

How to find official angular material docs

Follow Below link.

Folder Structure

We follow simple structure for the template

  • consolebox
    • asset
      • css - All consolebox css files
      • images - All demo images
      • js - All consolebox js file
      • vendors - All external js and css library
      • videos - All demo video
    • html - HTML pages

Theme Files

CSS Files

  • app.css: ConsoleBox css
  • theme.css: ConsoleBox theme color css
  • grid.css: ConsoleBox Grid System
  • External CSS:
    • Angular Material: CSS framework
      • angular-material.min.css: Angular material css
    • Icons: Angular material icon
      • material-icons.css: Angular material icon css
    • prism: Prism syntax highlighter
      • prism.css: Main File
    • animate: Animate css plugin
      • animate.css: Main File
    • sweetalert: Alert Javascript plugin
      • sweetalert.css: Main File
    • OwlCarousel2: Carousel
      • owl.carousel.min.css: Main File
      • owl.theme.default.min.css: Owl theme File
    • quill: Rich text editor
      • quill.snow.css: Main File
    • DataTables: Data Table
      • md-data-table.min.css: Main File
    • File upload: File upload angularjs plugin
      • lf-ng-md-file-input.min.css: Main File

Javascript Files

  • app.js: ConsoleBox js
  • controller.js: ConsoleBox controller
  • module.js: ConsoleBox module
  • External JS:
    • Jquery: Javascript framework
      • jquery.min.js: Main file
    • Angularjs: Javascript framework
      • angular.min.js: Main file
      • angular-animate.min.js: Angularjs animation
      • angular-aria.min.js: Angularjs aria
      • angular-route.min.js: Angularjs routing
      • angular-messages.min.js: Angularjs message
    • Angular Material: CSS framework
      • angular-material.min.js: Main file
    • ui-router: Angularjs exteral routing plugin
      • angular-ui-router.js: Main file
      • stateEvents.min.js: Detect angularjs ui routing state
    • prism: Prism syntax highlighter
      • prism.js: Main file
    • Paging: Angularjs paging
      • dist.min.js: Main file
    • sweetalert: Alert javascript plugin
      • sweetalert.min.js: Main file
    • OwlCarousel2: Carousel
      • owl.carousel.min.js: Main file
    • echarts: echarts charts
      • echarts.min.js: Main File
      • ngecharts.js: Echart wrapper for angularjs
      • map-world.js: echarts map plugin
    • Google chart: Google charts
      • ng-google-chart.min.js: Main File
    • Chartjs: Chartjs charts
      • Chart.min.js: Main file
      • angular-chart.min.js: Chartjs wrapper for angularjs
    • form validation: Form validater jquery plugin
      • jquery.validate.min.js: Main file
      • angular-validate.min.js: jquery-validation wrapper for angularjs
    • cleave.js: Form Mask
      • cleave-angular.min.js: Main file
    • quill: Rich text editor
      • quill.min.js: Main file
      • ng-quill.js: Quill text editor wrapper for angularjs
    • DataTable : Data table
      • md-data-table.min.js: Main file
    • File upload: File upload angularjs plugin
      • lf-ng-md-file-input.min.js: Main File

Source and Plugins

Plugin Website Licence
Angularjs javascript Framework MIT
Angular Material CSS Framework MIT
JQuery JavaScript Library MIT
Angularjs UI router MIT
Paging MIT
Google Material icons Apache 2.0
Prism syntax highlighter MIT
OwlCarousel2 MIT
chartjs MIT
echarts BSD
Google charts Apache 2.0
Datatables MIT
Sweet Alerts MIT
animate.css MIT
cleave.js - Form Mask All Licence
form validation MIT
quill Text editor BSD
File upload MIT

Helper Classes

We make classes to help you in your developement process, and make it fast. checkout the below link for the helper classes

Check the live Preview

Grid/data-layout options

Checkout the below link for the Grid classes

Check the live Preview

Color options

Checkout the below link for the Color classes

Check the live Preview

Sorry, for bad english

Thank You