Introduction


First of all, Thank you so much for purchasing this template and for being my loyal customer.

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

Quick Start

Get details about Requirements, Basic Installation, Structure, Color mode, Logo, favicon and loader setup your project with easy steps.

Requirement

This template have required following depandency

  1. PHP 7.2 or greater
  2. OpenSSL PHP Extension
  3. PDO PHP Extension
  4. Mbstring PHP Extension
  5. Tokenizer PHP Extension
  6. XML PHP Extension
  7. Ctype PHP Extension
  8. JSON PHP Extension
  9. GD PHP Extension (or Imagick PHP Extension)
  10. PHP Fileinfo extension
  11. PHP Zip Archive
  12. Rewrite Module (Apache or Nginx)

PHP.INI Requirements

  1. open_basedir must be disabled

File and folder permissions

  1. /bootstrap 775
  2. /storage 775 (recursively)

File Structure

Here is the general File structure of the template:

    laravel
    • app
      • Console
      • Exceptions
      • Helpers
      • Http
        • Controllers
          • Auth
            • Controller.php
            • HomeController.php
        • Middleware
        • Requests
      • Model
      • Provider
      • View
    • bootstrap
    • config
    • database
    • node_modelus
    • public
      • css
      • images
      • font
      • js
      • resources
      • scss
      • vendor
    • resources
      • css
      • js
      • lang
      • sass
      • views
        • app
        • blog
        • components
        • dashboards
        • footer
        • layouts
        • mailbox
        • pages
        • partials
        • store
        • ui
    • route
    • storage
    • tests
    • vendor
    • .editorconfig
    • .env.example
    • .styleci.yml
    • artisan
    • composer.json
    • package.json
    • phpunit.xml
    • README.md
    • server.php
    • webpack.mix.js

Installation

  1. Create Database
  2. Upload the Codes in below directory based on your server
    In Linux
    Path: var/www/html/
    In cPanel:
    Inside File manager -> Path: public_html/
  3. For database settings, open the .env file with a text editor and set your database settings.
    Note: .env is a hidden file, you can see it by opening directory to a text editor.
  4. Link your storage folder to public Run in terminal or CMD: php artisan storage:link
  5. Create Database
  6. Create Database

Steps to be follow for getting started with the template:

laravel

  1. Start command prompt window or terminal and change directory laravel
    cd laravel
  2. Install node_modules Run in terminal or CMD:
     npm install
  3. Install vendor Run in terminal or CMD:
     composer install
  4. To build css and js for Run in terminal or CMD:
    npm run dev Or npm run build Or npm run watch 
  5. Copy .env.example to .env file
    cp .env.example .env
  6. Generate Key for project in terminal or CMD:
    php artisan key:artisan

App Configuration

    APP_NAME=your app name
    APP_ENV=production
    APP_KEY=your key
    APP_DEBUG=false
    APP_URL=your app url
  1. Open and edit the /.env file and provide following details:
  2. Enter App name, App env, App debug and App url
    Run in terminal or CMD: php artisan key:generate generate App key

Database Configuration

  1. Create the database on your server
  2. Open and edit the /.env file and provide your server details:
  3. DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=laravel
    DB_USERNAME=root
    DB_PASSWORD=
  4. Open and edit the /.env file and provide following details:
  5. Enter App name, App env, App debug and App url
    Run in terminal or CMD: php artisan key:generate generate App key

Mail Configuration

  1. Open and edit the /.env file and provide following details:
  2. MAIL_DRIVER=your mail driver
    MAIL_HOST=your mail host
    MAIL_PORT=your mail port
    MAIL_USERNAME=your mail id
    MAIL_PASSWORD=your mail password
    MAIL_ENCRYPTION=your mail encryption
  3. Enter mail host name, mail port, mail username( Mail ID ), mail password and mail encryption type.

Customization

There are some customization like change color, logo, loader, favicon, default mode (dark or light) etc...

Color

Themes values are in string type.
  • - For theme there are 3 choices given below:

    "theme_scheme": "light",
    choices: 'light', 'dark', 'auto'

Here is the Change color of template in gulp

Go to src/assets/scss/_custom_variable.scss and add some color variable.

$primary-light:rgba($primary, .2);
$primary: #50b5ff;
$primary-dark: #2aa3fb;
You can work on theme_scheme using the Setting Panel in the given below ways:
You can change the theme with a single action.
  1. By adding some classes in body tag . Example is given bellow.

    Themes

    If you wish to change the theme, you can follow the below action.

    For example you have to set theme as dark then you will have to add dark class at body tag.

    - For theme color as dark
    <body class="..... dark">
    .......
    </body>
    - For theme color as white
    <body class="..... light">
    .......
    </body>
    - For theme color as auto.
    <body class="..... auto">
    .......
    </body>

Theme Direction

Themes values are in string type.
  1. For direction of theme there are 2 choices given below:

    "theme_scheme_direction": "ltr",
    choices: 'ltr', 'rtl'
  2. If you wish to change the theme direction, you can follow the below action.

    You can work on theme_scheme_direction using the Setting Panel in the given below ways:

    For example you have to set theme direction as ltr then you will have to add ltr at html tag.

    - For theme direction as left
    <html dir="ltr">
    .......
    </html>
    - For theme direction as right
    <html dir="rtl">
    .......
    </html>

Sidebar Appearance

  1. sidebar_type

    - For sidebar type there are 3 options given below: Values are in array.
    "sidebar_type": "sidebar-mini",
    choices: 'sidebar-hover', 'sidebar-mini','sidebar-soft'
  2. sidebar_menu_style

    - For sidebar menu-style there are 4 options given below: Values are in string.
    "sidebar_menu_style": "navs-rounded",
    choices: 'navs-rounded', 'navs-rounded-all', 'navs-pills', 'navs-pill-all'
You can work on sidebar_type & sidebar_menu_style using the Setting Panel in the given below way:

Manual


You can change the sidebar layouts with a single action.
  1. By adding some classes in sidebar parent section. Example is given bellow.
  2. Sidebar Style

    If you wish to change the sidebar style, you can follow the below action.

    For example you have to set sidebar style as mini then you will have to add sidebar-mini class at data-toggle="main-sidebar" of the sidebar.

    - For sidebar style as mini
    <aside class=" ...... sidebar-mini" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
    </aside>
    - For sidebar style as hover
    <aside class=" ...... sidebar-hover" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
    </aside>
    - For sidebar style as soft effect
    <aside class=" ...... sidebar-soft" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
    </aside>

    Sidebar Active Menu Style

    If you wish to change the sidebar active menu style, you can follow the below action.

    For example you have to set sidebar active as rounded then you will have to add navs-rounded class at data-toggle="main-sidebar" of the sidebar.

    - For sidebar active as rounded one side
    <aside class=" ...... navs-rounded" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
    </aside>
    - For sidebar active as rounded all
    <aside class=" ...... navs-rounded-all" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
    </aside>
    - For sidebar active as one side pill
    <aside class=" ...... navs-pill" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
    </aside>
    - For sidebar active as pill all
    <aside class=" ...... navs-pill-all" data-toggle="main-sidebar" data-sidebar="responsive">
    .......
    </aside>

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code:

<link rel="shortcut icon" href="images/favicon.ico"/>

Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply delete below section

<div id="loading">
    <div id="loading-center">
    </div>
</div>

For Changing Fonts

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the Style.css in all HTML file. See example below:

<!-- google font -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">

To include new font you can simply add another link like this:

<!-- google font -->
<!--Robaoto font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap" />

<!--"Nunito",sans-serif font -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600&display=swap" rel="stylesheet" >

HTML Structure

Here is the general layout structure of the template: for dashboard

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    @include('partials.dashboard._head')
</head>
<body>
@include('partials.dashboard._body')
</body>
</html>

Here is the general layout structure of the template: for frontend

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    @include('partials.frontend._head')
</head>
<body>
@include('partials.frontend._body')
</body>
</html>

CSS Structure

Here is the general CSS structure of the template for dashboard:

<link rel="shortcut icon" href="{{ asset('dashboard/images/favicon.ico') }}"/>
<link rel="stylesheet" href="{{ asset('dashboard/css/bootstrap.min.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/dark.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/developer.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/dataTables.bootstrap4.min.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/dripicons.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/flatpickr.min.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/fontawesome.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/ionicons.min.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/line-awesome.min.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/owl.carousel.min.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/magnific-popup.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/remixicon.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/responsive.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/select2-bootstrap4.min.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/select2.min.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/slick-theme.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/style.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/typography.css') }}" />
<link rel="stylesheet" href="{{ asset('dashboard/css/variable.css') }}" />

Here is the general CSS structure of the template for frontend:

<link rel="shortcut icon" href="{{ asset('frontend/images/favicon.ico') }}"/>
<link rel="stylesheet" href="{{ asset('frontend/css/flatpickr.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('frontend/css/bootstrap.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('frontend/css/all.min.css')}}"/> 
<link rel="stylesheet" href="{{ asset('frontend/css/animate.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('frontend/css/remixicon.css') }}"/>
<link rel="stylesheet" href="{{ asset('frontend/css/magnific-popup.css') }}"/> 
<link rel='stylesheet' href="{{ asset('frontend/css/dark.css') }}"/>
<link rel='stylesheet' href="{{ asset('frontend/css/owl.carousel.min.css') }}"/>
<link rel='stylesheet' href="{{ asset('frontend/css/select2-bootstrap4.min.css') }}" />
<link rel='stylesheet' href="{{ asset('frontend/css/select2.min.css') }}" />
<link rel='stylesheet' href="{{ asset('frontend/css/slick-animation.css') }}" />
<link rel='stylesheet' href="{{ asset('frontend/css/slick-theme.css') }}" />
<link rel='stylesheet' href="{{ asset('frontend/css/slick.css') }}" />
<link rel='stylesheet' href="{{ asset('frontend/css/typography.css') }}" />
<link rel='stylesheet' href="{{ asset('frontend/css/style.css') }}" />
<link rel='stylesheet' href="{{ asset('frontend/css/responsive.css') }}" />
<link rel='stylesheet' href="{{ asset('frontend/css/variable.css') }}" />

Javascript Structure

Here is the general Javascript structure of the template for dashboard:

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{{  asset('dashboard/js/jquery.min.js')}}"></script>
<script src="{{  asset('dashboard/js/popper.min.js')}}"></script>
<script src="{{  asset('dashboard/js/bootstrap.min.js')}}"></script>
<script src="{{  asset('dashboard/js/jquery.dataTables.min.js')}}"></script>
<script src="{{  asset('dashboard/js/dataTables.bootstrap4.min.js')}}"></script>
<!-- Appear JavaScript -->
<script src="{{  asset('dashboard/js/jquery.appear.js')}}"></script>
<!-- Countdown JavaScript -->
<script src="{{  asset('dashboard/js/countdown.min.js')}}"></script>
<!--Select2 JavaScript -->

{{-- <script src="{{  asset('dashboard/js/flatpickr.min.js')}}"></script> --}}
<script src="{{  asset('dashboard/js/select2.min.js')}}"></script>
<!-- Counterup JavaScript -->
<script src="{{  asset('dashboard/js/waypoints.min.js')}}"></script>
<script src="{{  asset('dashboard/js/jquery.counterup.min.js')}}"></script>
<!-- Wow JavaScript -->
<script src="{{  asset('dashboard/js/wow.min.js')}}"></script>
<!-- Slick JavaScript -->
<script src="{{  asset('dashboard/js/slick.min.js')}}"></script>
<!-- Owl Carousel JavaScript -->
<script src="{{  asset('dashboard/js/owl.carousel.min.js')}}"></script>
<!-- Magnific Popup JavaScript -->
<script src="{{  asset('dashboard/js/jquery.magnific-popup.min.js')}}"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="{{  asset('dashboard/js/smooth-scrollbar.js')}}"></script>
<!--Apex JavaScript -->
<script src="{{  asset('dashboard/js/apexcharts.js')}}"></script>
<!-- Chart Custom JavaScript -->
<script src="{{  asset('dashboard/js/chart-custom.js')}}"></script>
<!-- Custom JavaScript -->
<script src="{{  asset('dashboard/js/custom.js')}}"></script>

Here is the general Javascript structure of the template for frontend:

<!-- app JavaScript -->
{{-- <script src="{{asset('/js/app.js')}}"></script> --}}
<script src="{{asset('frontend/js/jquery-3.4.1.min.js')}}"></script>
<script src="{{asset('frontend/js/flatpickr.min.js')}}"></script>
<!-- jQuery, Popper JS -->

<script src="{{asset('frontend/js/popper.min.js')}}"></script>
<!-- Bootstrap JS -->
<script src="{{asset('frontend/js/bootstrap.min.js')}}"></script>
<!-- Slick JS -->
<script src="{{asset('frontend/js/slick.min.js')}}"></script>
<!-- owl carousel Js -->
<script src="{{asset('frontend/js/owl.carousel.min.js')}}"></script>
<!-- select2 Js -->
<script src="{{asset('frontend/js/select2.min.js')}}"></script>
<!-- Magnific Popup-->
<script src="{{asset('frontend/js/jquery.magnific-popup.min.js')}}"></script>
<!-- Slick Animation-->
<script src="{{asset('frontend/js/slick-animation.min.js')}}"></script>
<!-- Custom JS-->
<script src="{{asset('frontend/js/custom.js')}}"></script>

Helper classes

For section padding

You can add this helper class to set section padding top 100px and padding bottom 100px.
Add overview-block-ptb class in section tag. See example below:

<section class="... overview-block-ptb">
[YOUR CONTENT]
</section>

Note Use this helper class to maintain all page section spacing. You can also use overview-block-pt for only padding top and overview-block-pb for only padding bottom.

For Text color

You can use color in the Text. simply add .main-color ( or any color you want) class where you want to use. See example below:

<div class="text-primary">
[YOUR TEXT CONTENT]
</div>

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background color

You can use color in the background. simply add .white-bg (or any color you want) class where you want to use. See example below:

<div class="bg-primary">
[YOUR CONTENT]
</div>

Note We include 4 color helper class in our template text-gray, text-black, main-color and text-white. you can add unlimited color class according to your needs.

For Background Images and pattern

You can use an image in the background with parallax effect by simply adding InlineStyle in div tag and by use of this you can create your own background. See example below:

<div style="background-image:url(Path); ">
[YOUR CONTENT]
</div> 

If your background is small and you want to use repeated background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:

<div style="background-image:url(Path); background-repeat:no-repeat;">
[YOUR CONTENT]
</div>

If you want to use your background like cover or cointainer. You just need to add styling property background-size and set the value cover or cointainer. see the example below:

<div style="background-image:url(Path); background-size:cover;">
[YOUR CONTENT]
</div>

For Background overlay

You can use these .mm-over-black-30, .mm-over-white-20, .mm-over-green-90 classes to any element in your HTML code to apply overlay color on any image or section. See example below:

<div class="mm-over-black-80">
[YOUR CONTENT]
</div>

Structure: .mm-over-{color}-{opacity}. For Example, .mm-over-black-80

Bootstrap Components

For Sliders

There 2 different sliders for you to be used on any page with variety of Options. List of the Sliders:

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Tool

Images



Scripts



CSS & Fonts

Change Log

Version 5.2.0
07/05/2024
  • [Updated]: Bootstrap To v5.3
  • [Updated]: Setting Customizer
  • [Fixed]: Minor bugs
Version 5.1.4
04/04/2023
  • [Supported]: Laravel 10 Compatible
Version 5.1.3
01/03/2023
  • [Updated]: React Customizer Fixing
  • [Fixed]: React Router
  • [Fixed]: React FSLightBox
Version 5.1.2
15/02/2023
  • [Fixed]: Design Fixed
  • [Upgraded]: React Router
Version 5.1.1
16/11/2022
  • [Fixed]: Design Fixed
Version 5.1.0
01/11/2022
  • [New]: search modal
  • [Updated]: Bootstrap 5.2
  • [Fixed]: Responsive
  • [Fixed]: NPM error on vue
  • [Fixed]: Remove deprecated dependency on VUE
  • [Fixed]: Design issue
Version 5.0.2
19/07/2022
  • [Fixed]: Bugs
  • [Updated]: Setting panel
  • [Updated]: SCSS
Version 5.0.1
05/07/2022
  • [Fixed]: Bug
Version 5.0
18/06/2022
  • [Added]: Multiple sidebar styles
  • [Updated]: Icons
  • [Updated]: Color customizer
  • [Updated]: Layout
  • [Updated]: VUE, React, Laravel, etc
  • [Updated]: Sidebar structure
  • [Fixed]: Profile page
  • [Fixed]: Responsive design
  • [Fixed]: Minor bugs
  • [Working]: Auth module
Version 4.8
13/05/2022
  • [Updated]: React package
  • [Updated]: Boostrap
  • [Fixed]: Minor bugs
Version 4.7
28/01/2022
  • [Fixed]: Minor Issue in Html
Version 4.6
06/01/2022
  • [New]: Page add in Vue
Version 4.5
31/12/2022
  • [Removed]: 100% JQuery from BS5 vue
Version 4.4
07/12/2021
  • [Fixed]: Minor bugs
Version 4.3
04/12/2021
  • [Added]: New Page
  • [Updated]: HTML, react, vue, laravel
Version 4.2
21/09/2021
  • [Added]: React Version
Version 4.1
20/08/2021
  • [Added]: 2 New layouts and a new page in all versions of BS5
  • [Changed]: Container style
Version 4.0
20/08/2021
  • [Added]: Bootstrap 5 Version
  • [Added]: Laravel Version
Version 3.2
14/05/2021
  • [Fixed]: Scrollbar Issue
Version 3.1
10/05/2021
  • [Added]: Blog Pages In Vue
  • [Added]: Store Pages In Vue
Version 3.0
10/11/2020
  • [Added]: Add 4 pages in html
  • [Fixed]: Bugs
Version 2.0
23/04/2020
  • [New]: Vue JS Version
  • [New]: Vue JS Dark Version
  • [New]: Vue JS RTL Version
Version 1.1
03/04/2020
  • [New]: Dark Version
Version 1.0
01/04/2020
  • Initial Release