Moderate Template

Template documentation for developers

About


Moderate is a perfect, premium and flexible Bootstrap admin Template that can be used to build all kinds of creative projects: Web Applications, Backend Websites, Custom Admin Panels, Admin Dashboards, CMS, CRM or Mobile Application Panel. We encourage you to have an awesome look at the live preview and discover all attractive features!

It helps your develop team moving faster and saving development time and costs. It also make your users and clients satisfied with its excellent UI/UX.

How to Use


  1. After unzipping the downloaded package, you'll find a Template directory with all the files. Select your mode from existing directories(like dark or rtl-mixed)
  2. You can view this Template in any modern browser, can display or edit the Template without an internet connection.
  3. Now you could go to your server panel or open your FTP Client (like Filezilla) and upload the content of the Template on your server's root directory.
  4. Once the files are done uploading go to www.yourdomainname.com/dashboard.html

Features


  • Built with Bootstrap 4.6
  • Light, Dark and Mixed color
  • Pretty RTL Support
  • Fully Responsive Layout
  • Clean & Well Commented Codes
  • W3C Validated Code
  • Box Icons
  • Google Font
  • Various Charts
  • FREE Lifetime Updates
  • 12 Colors
  • CSS3 based animations
  • 2 Dashboards
  • Multi Purpose
  • Creative Widgets
  • Useful Plugins
  • Easy Customization
  • Easy to Copy Codes from HTML Page
  • SCSS Supported for Colors
  • Documentation
  • All Modern Browser Support

HTML Structure


Main Structure

                                        <!DOCTYPE html>
                                        <html lang="en" dir="ltr">
                                            <head>
                                                YOUR TILTE AND META TAGS...

                                                <!-- BEGIN CSS FILES -->
                                                    CSS FILES...
                                                <!-- END CSS FILES -->
                                            </head>
                                            <body class="theme-blue sidebar-extra dark">
                                                <!-- BEGIN HEADER -->
                                                <div class="navbar navbar-fixed-top" id="main-navbar">            
                                                    ...
                                                </div>
                                                <!-- END HEADER -->

                                                <!-- BEGIN WRAPPER -->
                                                <div id="wrapper">
                                                    <!-- BEGIN SIDEBAR -->
                                                    <div id="sidebar" class="has-scrollbar">
                                                        ...
                                                    </div>
                                                    <div id="sidebar-helper"></div>
                                                    <!-- END SIDEBAR -->

                                                    <!-- BEGIN PAGE CONTENT -->
                                                    <div id="page-content">
                                                        <div class="row">
                                                            <div class="col-12">
                                                                YOUR MAIN CONTENT...
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- END PAGE CONTENT -->
                                                </div>
                                                <!-- END WRAPPER -->

                                                <!-- BEGIN JS FILES -->
                                                    JS FILES...
                                                <!-- END JS FILES -->
                                            </body>
                                        </html>
                                    

Bootstrap Grid General Structure

                                        <div class="container">
                                            <div class="row">
                                                <div class="col-12">
                                                    YOUR CODES GOES HERE
                                                </div>
                                            </div>
                                        </div>
                                    

Settings


For setting change, you could click on settings icons in side of page:

settings icon

Then you can modify them and after apply settings copy codes from bottom box and paste it instead of body tag:

settings

Customization


You can customize this Template with your own content. Here are some basic changes you need.

Change favicon

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

Change logo

                                        <a href="dashboard.html" class="logo-con">
                                            <img src="assets/images/logo.png" class="img-responsive center-block" alt="Moderate Logo">
                                        </a>
                                    

Change copyright

                                        <div class="copyright">
                                            <div class="float-right">
                                                All rights reserved.
                                            </div>
                                            <div class="float-left">
                                                <span>©</span>
                                                <a href="https://www.rayanik.com/demo/moderate/" target="_blank">Moderate</a>
                                            </div>
                                        </div>
                                    

Create new page

If you need a new page with several plugins and widgets use blank.html, then add your custom content step by step. you can mix Template pages together and make fantastic pages.

Sources and Credits


Font:


Images


Plugins

  • ammap3
  • animate.css
  • bootstrap
  • bootstrap-hover-dropdown
  • bootstrap-v4-rtl
  • chart.js
  • ckeditor-full
  • clockpicker
  • counterup2
  • cropper
  • datatables.net-bs4
  • datepicker
  • fontawesome
  • icheck
  • jquery
  • jquery-countdown
  • jquery-knob
  • jquery-migrate
  • jquery-validation
  • ladda
  • malihu-custom-scrollbar-plugin
  • metismenu
  • morris.js
  • nestable
  • noty
  • popper.js
  • raphael
  • screenfull
  • select2
  • simple-line-icons
  • sortable
  • stepy
  • summernote
  • sweetalert2
  • switchery
  • wow.js

Support


Thank you for reading the documentation. Still if you have any questions or any problems, please feel free and visit our page in Marketplace.