Cubic Admin Template

Introduction

Cubic Admin is a webapp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 3.3.7. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications.

Installation

cubic-html + plugins (Required) = done.

Template Structure

All template files have fixed structure consisting of .navbar-header, .sidebar .page-wrapper, .footer

Begining of Page

Below code is used at the beginning of all HTML pages.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="icon" type="image/png" sizes="16x16" href="../plugins/images/favicon.png">

    <title>Cubic Admin Template</title>

    <!-- ===== Bootstrap CSS ===== -->
    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- ===== Plugin CSS (if any) ===== -->
   
    <!-- ===== Animation CSS ===== -->
    <link href="css/animate.css" rel="stylesheet">

    <!-- ===== Custom CSS ===== -->
    <link href="css/style.css" rel="stylesheet">

    <!-- ===== Color CSS ===== -->
    <link href="css/colors/default.css" id="theme" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

Preloader (Spinner)

Below code is used to load spinner for the template.

<!-- Preloader -->
<div class="preloader">
  <div class="cssload-speeding-wheel"></div>
</div>

Logo

Below code is used for logo. You can change it by text or image or icon. If your image height is bigger than 60px, you need to resize your logo or give height="60" to your logo img tag.

<a class="logo" href="index.html">
    <b>
        <img src="../plugins/images/logo.png" alt="home" />
    </b>
    <span>
        <img src="../plugins/images/logo-text.png" alt="homepage" class="dark-logo" />
    </span>
</a>

Left Sidebar Menu

Below code is used for left sidebar menu

<!-- ===== Left-Sidebar ===== -->
<aside class="sidebar" role="navigation">
    <div class="scroll-sidebar">
        <div class="user-profile">
            <div class="dropdown user-pro-body">
                <div class="profile-image">
                    <img src="../plugins/images/users/hanna.jpg" alt="user-img" class="img-circle">
                    <a href="javascript:void(0);" class="dropdown-toggle u-dropdown text-blue" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="badge badge-danger">
                            <i class="fa fa-angle-down"></i>
                        </span>
                    </a>
                    <ul class="dropdown-menu animated flipInY">
                        <li><a href="javascript:void(0);"><i class="fa fa-user"></i> Profile</a></li>
                        <li><a href="javascript:void(0);"><i class="fa fa-inbox"></i> Inbox</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="javascript:void(0);"><i class="fa fa-cog"></i> Account Settings</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href=""><i class="fa fa-power-off"></i> Logout</a></li>
                    </ul>
                </div>
                <p class="profile-text m-t-15 font-16"><a href="javascript:void(0);"> Hanna Gover</a></p>
            </div>
        </div>
        <nav class="sidebar-nav">
            <ul id="side-menu">
                <li>
                    <a class="active waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-screen-desktop fa-fw"></i> <span class="hide-menu"> Dashboard <span class="label label-rounded label-info pull-right">3</span></span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="index.html">Modern Version</a> </li>
                        <li> <a href="index2.html">Clean Version</a> </li>
                        <li> <a href="index3.html">Analytical Version</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-basket fa-fw"></i> <span class="hide-menu"> eCommerce </span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="index4.html">Dashboard</a> </li>
                        <li> <a href="products.html">Products</a> </li>
                        <li> <a href="product-detail.html">Product Detail</a> </li>
                        <li> <a href="product-edit.html">Product Edit</a> </li>
                        <li> <a href="product-orders.html">Product Orders</a> </li>
                        <li> <a href="product-cart.html">Product Cart</a> </li>
                        <li> <a href="product-checkout.html">Product Checkout</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-envelope-letter fa-fw"></i> <span class="hide-menu"> Inbox <span class="label label-rounded label-primary pull-right">5</span></span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="inbox.html">Mail Box</a> </li>
                        <li> <a href="inbox-detail.html">Mail Details</a> </li>
                        <li> <a href="compose.html">Compose Mail</a> </li>
                        <li> <a href="contact.html">Contact</a> </li>
                        <li> <a href="contact-detail.html">Contact Detail</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-equalizer fa-fw"></i> <span class="hide-menu"> UI Elements<span class="label label-rounded label-danger pull-right">18</span></span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li><a href="panels-wells.html">Panels and Wells</a></li>
                        <li><a href="panel-ui-block.html">Panels With BlockUI</a></li>
                        <li><a href="portlet-draggable.html">Draggable Portlet</a></li>
                        <li><a href="buttons.html">Buttons</a></li>
                        <li><a href="tabs.html">Tabs</a></li>
                        <li><a href="modals.html">Modals</a></li>
                        <li><a href="progressbars.html">Progress Bars</a></li>
                        <li><a href="notification.html">Notifications</a></li>
                        <li><a href="carousel.html">Carousel</a></li>
                        <li><a href="user-cards.html">User Cards</a></li>
                        <li><a href="timeline.html">Timeline</a></li>
                        <li><a href="timeline-horizontal.html">Horizontal Timeline</a></li>
                        <li><a href="range-slider.html">Range Slider</a></li>
                        <li><a href="ribbons.html">Ribbons</a></li>
                        <li><a href="steps.html">Steps</a></li>
                        <li><a href="session-idle-timeout.html">Session Idle Timeout</a></li>
                        <li><a href="session-timeout.html">Session Timeout</a></li>
                        <li><a href="bootstrap.html">Bootstrap UI</a></li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-notebook fa-fw"></i> <span class="hide-menu"> Forms </span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li><a href="form-basic.html">Basic Forms</a></li>
                        <li><a href="form-layout.html">Form Layout</a></li>
                        <li><a href="icheck-control.html">Icheck Control</a></li>
                        <li><a href="form-advanced.html">Form Addons</a></li>
                        <li><a href="form-upload.html">File Upload</a></li>
                        <li><a href="form-dropzone.html">File Dropzone</a></li>
                        <li><a href="form-pickers.html">Form-pickers</a></li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-grid fa-fw"></i> <span class="hide-menu"> Tables</span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li><a href="basic-table.html">Basic Tables</a></li>
                        <li><a href="table-layouts.html">Table Layouts</a></li>
                        <li><a href="data-table.html">Data Table</a></li>
                        <li><a href="bootstrap-tables.html">Bootstrap Tables</a></li>
                        <li><a href="responsive-tables.html">Responsive Tables</a></li>
                        <li><a href="editable-tables.html">Editable Tables</a></li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-pie-chart fa-fw"></i> <span class="hide-menu"> Charts</span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li><a href="morris-chart.html">Morris Chart</a></li>
                        <li><a href="peity-chart.html">Peity Charts</a></li>
                        <li><a href="knob-chart.html">Knob Charts</a></li>
                        <li><a href="sparkline-chart.html">Sparkline charts</a></li>
                    </ul>
                </li>
                <li>
                    <a href="widgets.html" aria-expanded="false"><i class="icon-settings fa-fw"></i> <span class="hide-menu"> Widgets </span></a>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-bulb fa-fw"></i> <span class="hide-menu"> Icons</span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="simple-line.html">Simple Line</a> </li>
                        <li> <a href="fontawesome.html">Fontawesome</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-location-pin fa-fw"></i> <span class="hide-menu"> Maps</span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="map-google.html">Google Map</a> </li>
                        <li> <a href="map-vector.html">Vector Map</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="waves-effect" href="javascript:void(0);" aria-expanded="false"><i class="icon-docs fa-fw"></i> <span class="hide-menu"> Pages<span class="label label-rounded label-success pull-right">18</span></span></a>
                    <ul aria-expanded="false" class="collapse">
                        <li> <a href="javascript:void(0);">Error Pages</a>
                            <ul aria-expanded="false" class="collapse">
                                <li> <a href="400.html">400</a> </li>
                                <li> <a href="403.html">403</a> </li>
                                <li> <a href="404.html">404</a> </li>
                                <li> <a href="500.html">404</a> </li>
                                <li> <a href="503.html">404</a> </li>
                            </ul>
                        </li>
                        <li><a href="starter-page.html">Starter Page</a></li>
                        <li><a href="blank.html">Blank Page</a></li>
                        <li><a href="search-result.html">Search Result</a></li>
                        <li><a href="custom-scroll.html">Custom Scrolls</a></li>
                        <li><a href="login.html">Login Page</a></li>
                        <li><a href="lock-screen.html">Lock Screen</a></li>
                        <li><a href="recoverpw.html">Recover Password</a></li>
                        <li><a href="animation.html">Animations</a></li>
                        <li><a href="profile.html">Profile</a></li>
                        <li><a href="invoice.html">Invoice</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="pricing.html">Pricing</a></li>
                        <li><a href="register.html">Register</a></li>
                    </ul>
                </li>
                <li>
                    <a href="calendar.html" aria-expanded="false"><i class="icon-calender fa-fw"></i> <span class="hide-menu">Calendar</span></a>
                </li>
            </ul>
        </nav>
        <div class="p-30">
            <span class="hide-menu">
                <a href="javascript:void(0);" target="_blank" class="btn btn-success">Buy Cubic Admin</a>
                <a href="javascript:void(0);" target="_blank" class="btn btn-default m-t-15">Check Documentation</a>
            </span>
        </div>
    </div>
</aside>
<!-- ===== Left-Sidebar-End ===== -->

Page Content, Right Sidebar and Footer

Below code is used for page content, right sidebar and footer in all pages.

<!-- Page Content -->
         <div class="page-wrapper">
            <div class="container-fluid">
               <!-- .Your content row -->
               <div class="row">
                  <div class="col-md-12">
                     <div class="white-box">
                        <h4 class="box-title">Blank Starter page</h4>
                     </div>
                  </div>
               </div>
               <!-- /.Your content row -->
               <!-- .right-sidebar -->
               <div class="right-sidebar">
                  <div class="slimscrollright">
                     <div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
                     <div class="r-panel-body">
                        
                     </div>
                  </div>
               </div>
               <!-- /.right-sidebar -->
            </div>
            <!-- /.container-fluid -->
            <footer class="footer text-center"> 2017 © Cubic Admin by jThemesStudio.com </footer>
         </div>
         <!-- /page-wrapper -->

Theme Options (custom.js)

Below js code is used for theme setting, fix header, fix sidebar and right sidebar open-close.

// ============================================================== 
// Theme options
// ==============================================================     
$(".sidebartoggler").on('click', function() {
    if ($("body").hasClass("mini-sidebar")) {
        $("body").trigger("resize");
        $(".scroll-sidebar, .slimScrollDiv").css("overflow", "hidden").parent().css("overflow", "visible");
        $("body").removeClass("mini-sidebar");
        $('.top-left-part span').show();
        $(".sidebartoggler i").addClass("fa fa-bars");
    } else {
        $("body").trigger("resize");
        $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
        $("body").addClass("mini-sidebar");
        $('.top-left-part span').hide();
        $(".sidebartoggler i").removeClass("fa fa-bars");
    }
});

// ============================================================== 
// Right sidebar options
// ============================================================== 
$(".right-side-toggler").click(function() {
    $(".right-sidebar").slideDown(50);
    $(".right-sidebar").toggleClass("shw-rside");
    // Fix header
    $(".fxhdr").click(function() {
        $("body").toggleClass("fix-header");
    });
    // Fix sidebar
    $(".fxsdr").click(function() {
        $("body").toggleClass("fix-sidebar");
    });
});

Sidebar Navigation & Responsiveness Across All Devices

Below js code is used for sidebar open-close, changing viewport size in all devices and toggle sidebar.

var set = function() {
    var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width;
    var topOffset = 60;
    if (width < 1170) {
        $("body").addClass("mini-sidebar");
        $('.top-left-part span').hide();
        $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
        $(".sidebartoggler i").addClass("fa fa-bars");
    } else {
        $("body").removeClass("mini-sidebar");
        $('.top-left-part span').show();
        $(".sidebartoggler i").removeClass("fa fa-bars");
    }

    var height = ((window.innerHeight > 0) ? window.innerHeight : this.screen.height) - 1;
    height = height - topOffset;
    if (height < 1) height = 1;
    if (height > topOffset) {
        $(".page-wrapper").css("min-height", (height) + "px");
    }
};
$(window).ready(set);
$(window).on("resize", set);

// this is for close icon when navigation open in mobile view
$(".navbar-toggle").click(function() {
    $("body").toggleClass("show-sidebar");
    $(".navbar-toggle i").toggleClass("fa-bars");
    $(".navbar-toggle i").addClass("fa-close");
});
$(".sidebartoggler").on('click', function() {
    $(".sidebartoggler i").toggleClass("fa fa-bars");
});

// ============================================================== 
// Auto select left navbar
// ============================================================== 
$(function() {
    var url = window.location;
    var element = $('ul#side-menu a').filter(function() {
        return this.href == url;
    }).addClass('active').parent().addClass('active');
    while (true) {
        if (element.is('li')) {
            element = element.parent().addClass('in').parent();
        } else {
            break;
        }
    }
});

Font Family

Change the font family of template by simply changing the google font url and @basefont1 variable in variable.less file.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@basefont1: 'Open Sans', sans-serif;

Css

We made 6 different less files for customization.

variable.less (includes all variables of the template)
common.less (includes all common elements)
app.less (includes all dashboard elements/widgets)
pages.less (includes each page styles)
widget.less (includes innerpage widgets)
responsive.less (includes responsive layout of the template)

Starter Page

You can start your new project with starter-page.html. In that page, all the unnecessary script and html code is removed, so you can start fresh.

Folder Structure

Root ├── │ └── cubic-html/ │ └── Css │ └── All Css files │ └── Js │ └── All Js files │ └── Less │ └── All Less files │ └── Bootstrap │ └── Bootstrap 3.3.7 files │ └── All Html Pages │ │ └── Plugins/ │ └── components │ └── All Required plugins files │ └── Images │ └── All Theme Images └──

Html Structure

<body>

<!-- Preloader -->
<div class="preloader">
<div class="cssload-speeding-wheel"></div>
</div>
<!-- End Preloader -->

<!-- Wrapper -->
<div id="wrapper">

    <!-- Top Section -->
    <nav class="navbar navbar-default navbar-static-top">

    <!-- Your Logo -->
    <div class="top-left-part">
      <a href="index.html" class="logo"> ... </a> 
    </div>
    <!-- End Your Logo -->
    </nav>
    <!-- Top Section End -->

    <!-- Left Navigation -->
    <div class="navbar-default sidebar slimscroll"> </div>
    <!-- Left Navigation End -->

    <!-- Main Content -->
    <!-- Start Page wrapper -->
    <div class="page-wrapper">
       <!-- Start Container -->
      <div class="container-fluid"> ... </div>
       <!-- End container -->
    </div>
    <!-- End Page wrapper -->

    <!-- footer -->
    <footer class="footer text-center"> 2017 © cubic admin by jThemesStudio.com </footer>
    <!-- End footer -->

</div>
<!-- End Wrapper -->

</body>
</html>

Color Variations

Replace color css from head section with any of the options availabel from below.

<link href="css/colors/default.css" id="theme" rel="stylesheet">

<link href="css/colors/green.css" id="theme" rel="stylesheet">

<link href="css/colors/red.css" id="theme" rel="stylesheet">

<link href="css/colors/yellow.css" id="theme" rel="stylesheet">

<link href="css/colors/purple.css" id="theme" rel="stylesheet">

<link href="css/colors/black.css" id="theme" rel="stylesheet">

Layout

Add following classes in the body tag to fix sidebar and header.

To fix header add .fix-header class in the body tag.

To fix sidebar add .fix-sidebar class to the body tag.

Less - Css

File	Description
`bootstrap.css`	bootstrap v3.3.7
`spinners.css`/`spinners.css`	This file is has preloader css.
`common.less`/`common.css`	This file has all the common classes for the template.
`app.less`/`app.css`	This file has all the dashboard widget's styles for the template.
`variable.less`/`variable.css`	This file has all the predefine less variables for the template.
`sidebar-nav.less`/`sidebar-nav.css`	this file has sidebar related css code.
`widgets.less`/`widgets.css`	This file has all other widget's styles.
`responsive.less`/`responsive.css`	This file has all the responsive styles.

Js Files

File	Description
`jquery.js`, `bootstrap.js`, `jquery.slimscroll.js`	These files are the core js files of the theme.
`custom.js`	This file has all the custom javascript for the theme.
`sidebarmenu.js`	This file contains sidebar navigation javascript.
`wave.js`	This is used for wave effects on buttons and other elements.

Laravel Version

The laravel versions of Cubic Admin webapp template is a beautiful implementation of the template into laravel app. There are 3 variations in laravel app which can be used as per requirement:

Lite: It replaces current login, register, forgot password and reset password pages and adds new theme pages with assets.
Advance: Lite version with added Social Login,CRUD Builder, Laravel Logs, User management.
Full: The ultimate version which is an amalgamation of all the features of advance version as well as Blog feature.

Light Version

This version of cubic theme consists of basic laravel blade files, middleware, assets and route files. It replaces current login, register, forgot password and reset password pages and adds new theme pages with assets. All you need to do is just copy-paste folders.
Here is the folder structure :

                Root
                |──
                | app
                |  └── Http
                |        └── Middleware
                |                └── LayoutMiddleware.php
                | public
                |     └── All plugin assets file
                | resources
                |     └── All view files
                | routes
                |     └── web.php
                └──

Installation:

Following are the steps you need to follow to apply this theme to your existing laravel project

Unzip cubic-lite.zip
Copy all folders to your project directory

Open app/Http/Kernel.php and find

protected
                                $middlewareGroups[]

and go to 'web' key and copy-paste LayoutMiddleware::class and copy-paste use App\Http\Middleware\LayoutMiddleware; in kernel.php namespace.
it will look like this :

            <?php

            namespace App\Http;
            ...
            ...
            use App\Http\Middleware\LayoutMiddleware;
            ...
            ...

            class Kernel extends HttpKernel
            {
                ...
                ...
                ...
                protected $middlewareGroups = [
                    'web' => [
                         ...
                         ...
                         LayoutMiddleware::class
                         ...
                         ...
                    ],
                ];
                ...
                ...
                ...
            }

And you are ready to go! Static routes are given in web.php, you can also modify it according to your requirements.

Advance Version

This version of cubic theme contains CRUD Builder, Laravel Logs, Role and Permissions management, all static theme pages and so many other features. You can generate models, routes, controllers and views with CRUD Builder. Laravel Logs gives detailed error viewing functionality and Users Management allows you to add,edit,update delete users. Besides these, you can also create, edit, update, delete Roles and Permissions.

Full Version

This version of cubic theme is an amalgamation of all the features of advance version as well as Blog feature. Here, users and admin can add, edit, view and delete blogs. Admin can give permissions to user for add, edit, view, delete according to user role. Blogs will be displayed directly on home page as well as on dashboard in blog menu.

Installation:

Unzip cubic-advance.zip for advance version or cubic-full.zip for full version.
Go to this folder application using cd command on your cmd or terminal
Run composer install on your cmd or terminal
Copy .env.example file to .env on the root folder. You can type copy .env.example .env while using command prompt Windows or cp .env.example .env while using terminal, Ubuntu
Open your .env file and change the database name (DB_DATABASE) to your specific database, username (DB_USERNAME) and password (DB_PASSWORD) field corresponding to your configuration.
By default, the username is root and you can leave the password field empty. (This is for Xampp)
By default, the username is root and password is also root. (This is for Lamp)
Run php artisan key:generate
Run php artisan migrate
Run php artisan db:seed (It will generate default admin and user data)

Open app/Http/Kernel.php and find

protected
                                $middlewareGroups[]

and go to 'web' key and copy-paste LayoutMiddleware::class and copy-paste use App\Http\Middleware\LayoutMiddleware; in kernel.php namespace.
it will look like this :

            <?php

            namespace App\Http;
            ...
            ...
            use App\Http\Middleware\LayoutMiddleware;
            ...
            ...

            class Kernel extends HttpKernel
            {
                ...
                ...
                ...
                protected $middlewareGroups = [
                    'web' => [
                         ...
                         ...
                         LayoutMiddleware::class
                         ...
                         ...
                    ],
                ];
                ...
                ...
                ...
            }

Run php artisan serve
And you are ready to go! Static routes are given in web.php you can modify it according to your requirements.
Go to localhost:8000 to visit your theme
Default credentials for Login:
For Admin => Email : admin@admin.com Password: password123
For User => Email : user@user.com Password: password123

Credits

Service Panel

Layout Options
Fix Header
Fix Sidebar

With Light sidebar
1
2
3
4
5
6
With Dark sidebar
7
8
9
10
11
12