INSPINIA Admin Theme Documentation

About the template

INSPINIA has a clean and minimalistic design which helps you create an awesome and powerful project. It is perfectly designed and precisely prepared. Template was built based on the latest standards and recommendations. INSPINIA theme is powered by Twitter Bootstrap v3 - the most popular front-end framework.
Please note that this documentation is dedicated to the main element of the template. With each version, we will try to develop it. But if you have any questions going beyond what is described here don't hesitate to write to us.

Structure

Folders and files

inspinia_admin_theme/
    ├── css/
    ├── email_templates/
    ├── font-awesome/
    ├── fonts/
    ├── img/
    ├── js/
    ├── 404.html
    ├── 500.html
    ├── agile_board.html
    ├── article.html
    ├── badges_labels.html
    ├── basic_gallery.html
    ├── blog.html
    ├── buttons.html
    ├── calendar.html
    ├── carousel.html
    ├── chat_view.html
    ├── clients.html
    ├── code_editor.html
    ├── contacts.html
    ├── css_animation.html
    ├── dashboard_2.html
    ├── dashboard_3.html
    ├── dashboard_4.html
    ├── dashboard_4_1.html
        ...

Main HTML elements

Theme files have almost unchanging structure consisting of:

#wrapper main container of body elements.
nav .navbar-static-side left navigation menu.
#page-wrapper main container for page elements.
nav .navbar-static-top top navigation with second menu.
.page-heading container with page title and breadcrumb
.wrapper-content main container for html elements.
.footer main container for footer.

Layout structure

Page <head /> contains Metadata, CSS files.

<!DOCTYPE html>
<head>

    <!-- Metadata -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INSPINIA | Page</title>

    <!-- CSS Files -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>

Main menu - navigation

Navigation menu with profile submenu.

<ul class="nav" id="side-menu">
    <li class="nav-header">
        <div class="dropdown profile-element"> <span>
            <img alt="image" class="img-circle" src="img/profile_small.jpg">
             </span>
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
            <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">Amelia Smith</strong>
             </span> <span class="text-muted text-xs block">Art Director <b class="caret"></b></span> </span> </a>
            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                <li><a href="profile.html">Profile</a></li>
                <li><a href="contacts.html">Contacts</a></li>
                <li><a href="mailbox.html">Mailbox</a></li>
                <li class="divider"></li>
                <li><a href="login.html">Logout</a></li>
            </ul>
        </div>
        <div class="logo-element">
            IN+
        </div>
    </li>
    <li>
        <!-- All li elements o navigation -->
    </li>

</ul>

Second menu

Menu for notifications and primary functions such as logout or global search.

<nav class="navbar navbar-static-top  " role="navigation">
        <div class="navbar-header">
            <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
            <form role="search" class="navbar-form-custom" method="post" action="search_results.html">
                <div class="form-group">
                    <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                </div>
            </form>
        </div>
            <ul class="nav navbar-top-links navbar-right">
                <li>
                    <span class="m-r-sm text-muted welcome-message">Welcome to INSPINIA+ Admin Theme.</span>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                        <i class="fa fa-envelope"></i>  <span class="label label-warning">16</span>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">
                        <li>
                            <div class="dropdown-messages-box">
                                <a href="profile.html" class="pull-left">
                                    <img alt="image" class="img-circle" src="img/a7.jpg">
                                </a>
                                <div class="media-body">
                                    <small class="pull-right">46h ago</small>
                                    <strong>Mike Loreipsum</strong> started following <strong>Monica Smith</strong>. <br>
                                    <small class="text-muted">3 days ago at 7:58 pm - 10.06.2014</small>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="dropdown-messages-box">
                                <a href="profile.html" class="pull-left">
                                    <img alt="image" class="img-circle" src="img/a4.jpg">
                                </a>
                                <div class="media-body ">
                                    <small class="pull-right text-navy">5h ago</small>
                                    <strong>Chris Johnatan Overtunk</strong> started following <strong>Monica Smith</strong>. <br>
                                    <small class="text-muted">Yesterday 1:21 pm - 11.06.2014</small>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="dropdown-messages-box">
                                <a href="profile.html" class="pull-left">
                                    <img alt="image" class="img-circle" src="img/profile.jpg">
                                </a>
                                <div class="media-body ">
                                    <small class="pull-right">23h ago</small>
                                    <strong>Monica Smith</strong> love <strong>Kim Smith</strong>. <br>
                                    <small class="text-muted">2 days ago at 2:30 am - 11.06.2014</small>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="text-center link-block">
                                <a href="mailbox.html">
                                    <i class="fa fa-envelope"></i> <strong>Read All Messages</strong>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#">
                        <i class="fa fa-bell"></i>  <span class="label label-primary">8</span>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="mailbox.html">
                                <div>
                                    <i class="fa fa-envelope fa-fw"></i> You have 16 messages
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="profile.html">
                                <div>
                                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                    <span class="pull-right text-muted small">12 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="grid_options.html">
                                <div>
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="text-center link-block">
                                <a href="notifications.html">
                                    <strong>See All Alerts</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="login.html">
                        <i class="fa fa-sign-out"></i> Log out
                    </a>
                </li>
            </ul>
</nav>

Content

Main content wrapper with page heading and page content.

<div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-9">
                    <h2>This is main title</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="index.html">This is</a>
                        </li>
                        <li class="active">
                            <strong>Breadcrumb</strong>
                        </li>
                    </ol>
                </div>
                <div class="col-lg-3">
                    <div class="title-action">
                        <a href="" class="btn btn-primary">This is action area</a>
                    </div>
                </div>
            </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="wrapper wrapper-content">

                </div>
            </div>
</div>

Options

Inspinia provide few option for you layout app. There are:

Fixed sidebar
Fixed navbar
Fixed footer
RTL support
Layout 2 (top navigation)
Skins

Fixed sidebar

Fixed sidebar is a sidebar that is sticked on screen.

To add fixed sidebar you need to add .fixed-sidebar class to body.


    <body class="fixed-sidebar">

Be sure that you have included this files to your index.html file:


        <!-- SlimScroll -->
        <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

Fixed navbar

Fixed navbar is a top navbar that is sticked on screen.

To add fixed sidebar you need to add .fixed-nav class to body.


    <body class="fixed-nav">

Next we will need to change navbar from static to fixed. Change .navbar-static-top class to navbar-fixed-top

Fixed navbar 2

Fixed navbar 2 is a top navbar that is sticked on screen and it's width is the same as the width of wrapper

To add fixed sidebar you need to add .fixed-nav class and .fixed-nav-basic class to body.


    <body class="fixed-nav fixed-nav-basic">

Next we will need to change navbar from static to fixed. Change .navbar-static-top class to navbar-fixed-top


<nav class="navbar navbar-fixed-top" role="navigation">

Fixed navbar 2 works only on primary layout

Fixed footer

Fixed footer is a bottom footer that is sticked on screen.

To add fixed bottom footer you just need to add .fixed class to footer class.


    <div class="footer fixed">

Right-to-Left Language Support

Adding support for language written in a Right-To-Left (RTL) direction.

To add RTL support you will need to add new .rtls class to body element


    <body class="rtls">

Next you will need to add new bootstrap rtl support library bootstrap-rtl. Add new link to css file just below the css from bootstrap in index.html page like this:


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

After that you will have RTL support similar to this:

Layout 2

Layout 2 is a top navigation with centered content layout.

For layout 2 we prepared special example files dashboard_4.html

To use layout 2 all you need to do remove full nav element (sidebar navigation). Add .top-navigation class to body element and add .container class with element after .wrapper class element. Please chcek teh example file Dashboard_4.html to see code of it.

Layout 2 with example code look like this:

Off canvas menu

Off canvas menu is a menu that not change the width of main wrapper page. It appear on top of the page.

To use off canvas menu you just need to add .canvas-menu to body element:


    <body class="canvas-menu">

And in navigation after element with class .sidebar-collapse add special element to handle hide menu.


            <a class="close-canvas-menu"><i class="fa fa-times"></i></a>

Skins

Inspinai theme has 3 diferent skins

To change skin you just have to add skin class to body element.

For example: to add skin Blue skin you just need to add .skin-1 class to body element.

In LESS files skins.less you can find style for the skin. Below is a representation of css classes demand color skin.

.skin-1 - Blue Light
.skin-2 - Inspinia Ultra {for support with Inspinia Ultra please contact with support@webapplayers.com}
.skin-3 - Yellow/purple
.md-skin - Material Design Skin (In demo Inspinia Material Design version has also fixed sidebar and fixed navbar option)
Defaut skin does not need any class

Theme config

Theme config is the configuration box for setting options in live preview. It is placed in the right side of page with green icon.

We did not want to add code to all pages so we just add js script to append the config box. The function is located in inspinia.js file with comment // Append config box / Only for demo purpose

If you want to remove the config box all you need to do is to remove function below this comment.

Inspinia Seed Project

It is an application skeleton for a typical web app. You can use it to quickly bootstrap your webapp projects. It has all necessary resources/files to help you started new project. As your project will grow you will need to add new resources. Look at the full version to select the elements and resources you want to use.

File strucutre for Seed Project

Static_Seed_Project/
    ├── css/
    ├── font-awsome/
    ├── fonts/
    ├── img/
    ├── js/
    ├── index.html
    ├── minor.html

Change log 2.7.1 -> 2.8

Version 2.8 was fully focused on migration to support Bootstrap 4

Migration to BS4

Change log 2.7 -> 2.7.1

Changed Inspinia js files

inspinia.js - correct typos in fix_height function
inspinia.js - update navbar-minimalize event handler

CSS/LESS/SCSS/SASS

Fix media-body style on right sidebar
Fix form-control style to allow inout sizing
Fix min-height issue with small content
Fix background menu on md-skin
Fix tabs in top-navigation layout
Fix label style to release sizing option

Change log 2.6.2 -> 2.7

New view files

activity_stream.html
password_meter.html
spinners_usage.html
text_spinners.html

Changed views files

All .html files - add new menu elements for new views
All .html files - change script link to new jquery version
icons.html - update font awesome icons to new set
agile_board.html - add support for touch gestures - jquery.ui.touch-punch.min.js
draggable_panels.html - add support for touch gestures - jquery.ui.touch-punch.min.js
resizeable_panels.html - add support for touch gestures - jquery.ui.touch-punch.min.js
form_advanced.html - add new example for switchery control
ladda_buttons.html - update bind method for ladda example buttons
helper_classes.html - change css name in border examples
layouts.html - correct typos in image names and descriptions
mail_compose.html - correct typos in css class
dashboard_3.html - update css class of sidebar

Changed Inspinia js files

inspinia.js - update collapse-link click functions
inspinia.js - update fix_height functions

Updates

js/jquery-3.1.1.min.js
js/plugins/dataTables
js/plugins/switchery
js/plugins/jquery-ui
js/plugins/steps
js/plugins/validation
/font-awesome

New plugins

js/plugins/touchpunch
js/plugins/pwstrength
css/plugins/textSpinners

CSS/LESS/SCSS/SASS

Add styles for new pages
Fix jumping menu on landing page
Fix bg-colors
Remove rules for support old IE
Add styles for third level menu on md-skin
Improve select2 styles
Improve menu style
Clear overwrite native media-body classes
Improve few styles for IE
Improve style for summernote
Correct selected typo
Fix chat-avatar class rules
Fix typo in css preprocessor variables

Change log 2.6 -> 2.6.2

Updates

Bootstrap to 3.3.7

CSS/LESS/SCSS/SASS

Fix the issue with hidden href on mobile mini navbar
Fix the flickering menu
Fix Safari modal issue
Fix Summernote fullscreen mode
Fix css width helper classes
Improve content height on fixed navbar
Improve landing page on mobile view

Change log 2.5 -> 2.6

New view files

datamaps.html
form_autocomplete.html
helper_classes.html
pdf_viewer.html
social_buttons.html

Changed views files

All .html files - add new menu elements for new views
dashboard_2.html - update script for new Chartjs version
dashboard_3.html - update script for new Chartjs version
dashboard_4.html - update script for new Chartjs version
dashboard_4_1.html - update script for new Chartjs version
form_advanced.html - add new features: input tag, dual select
file_upload.html - add new input components, update dropzone
graph_chartjs.html - update script for new Chartjs version
index.html - update script for new Chartjs version
table_data_tables.html - remove jeditable library

New Inspinia files

pdf/example.pdf
js/api/typehead_collection.json

Changed Inspinia js files

inspinia.js - update click functions

Updates

js/dropzone
js/fullcalendar
js/chartJs
js/summernote
css/animate.css

New plugins

js/plugins/bootstrap-taginput
js/plugins/dualListbox
js/plugins/pdfjs
js/plugins/topojson
js/plugins/typehead
css/plugins/bootstrapSocial

CSS/LESS/SCSS/SASS

Add styles for new pages
Fix menu jumping issue
Improve print mode for Firefox
Improve chosen colors
Fix boxes layout with md-skin
Improve custom swithc style
Add few new css classes - helper classes

Change log 2.4 -> 2.5

2.5 version fully focused on update AngularJS projects. New features and views will be added to separate 2.6 version.

Change log 2.3 -> 2.4

New view files

c3.html
clipboard.html
ecommerce-cart.html
form_markdown.html
i18support.html
loading_buttons.html
resizeable_panels.html
tour.html
truncate.html

Changed views files

All .html files - add new menu elements for new views
agile_board.html - add example code for serialize list
form_advanced.html - add new Touch spin control
landing.html - update page-scroll click event to close menu on select in mobile
package.html - add info about new MVC6 project
skin-config.html - add new option for fixed nav bar
table_data_tables.html - replace old swf buttons with new button plugin (update datatables library)
video.html - add script for handle full screen video option

New Inspinia js/json files

locales/en.json
locales/es.json

Changed Inspinia js files

inspinia.js - update fix_height function
inspinia.js - update SmoothlyMenu function

Updates

js/bootstrap - update to 3.3.6
js/plugins/dataTables - create on compact datatables generate in official builder: https://datatables.net/download/index
js/pace - update to 1.0.2

New plugins

js/plugins/c3 (with css files)
js/plugins/bootstrap-markdow (with css files)
js/plugins/d3
js/plugins/clipboard
js/plugins/dotdotdot
js/plugins/i18next
js/plugins/ladda (with css files)
js/plugins/touchspin (with css files)
js/plugins/bootstrapTour (with css files)

New images

imb/flags- Set of flags images

CSS/LESS/SCSS/SASS

Add styles for new pages
Fix buttons shadow on Chrome
Fix dropdown text colour on md-skin
Fix pace.js on fixed navbar option
Fix few glitch animation effect
Improve nav-tabs on mobile devices
Fix second level menu on md-skin
Improve RTL mode
Add new fixed navbar option
Ipmore print mode

Change log 2.2 -> 2.3

New view files

contacts_2.html
dashboard_5.html
ecommerce_payments.html
ecommerce_product_detail.html
masonry.html
profile_2.html
slick_carousel.html
vote_list.html

Changed views files

All .html files - add new menu elements for new views
tabs_panels.html - add example of fullscreen panel and slim scroll panel
index.html - Change color for main charts
dashboard_2.html - Change color for main charts
form_advanced.html - Add select2 examples

New Inspinia js files

No new files

Changed Inspinia js files

inspinia.js - Add function for handle full screen ibox

Updates

js/bootstrap - update to 3.3.5
js/plugins/dataTables - update to 1.10.8

New plugins

js/plugins/select2 (with css files)
js/plugins/slick (with css files)
js/plugins/masonry

New images

css/patterns- Add images for header in Material Design skin

CSS/SCSS/SASS

Add styles for new pages
Add new md-skin styles
Fix ibox-tools when title is large
Fix landing page menu on small devices
Fix modal open backdrop with animate.css effect
Fix dropdown orientation under ibox
Fix profile menu on fixed sidebar

Change log 2.0/2.1 -> 2.2

New view files

graph_chartist.html
metrics.html
social_feed.html
sweetalert.html
table_foo_table.html
tabs.html
landing.html (incorporate to admin)
ecommerce-orders.html
ecommerce_product.html
ecommerce_product_list.html
ecommerce_products_grid.html

Changed views files

All .html files - add new menu elements for new views
All .html files - added ".metismenu" class to nav element id="side-menu" (new version of metisMenu)
tabs_panels.html - add example of footer to panel and initial collapsed panel
chat.html - Add left/right class to chat panels
article.html - Add example of comments section
landing.html - Add new sections: timeline and comments
form_advanced.html - Add new new plugins

New Inspinia js files

No new files

Changed Inspinia js files

inspinia.js - Update fix_height for handle height wrapper on fixed-nav

Updates

js/plugins/metisMenu - update to 2.0.2
js/plugins/slimscrol - update to 1.3.6
js/plugins/jvectormap - update to 2.0.2
js/plugins/fullcalendar/moment.min.js - update to 2.9.0

New plugins

js/plugins/clockpicker (with css files)
js/plugins/daterangepicker (with css files)
js/plugins/footable (with css files)
js/plugins/sweetalert (with css files)
js/plugins/chartist
css/plugins/awesome-bootstrap-checkbox
js/plugins/wow (for animation effect on landing)

New images

img/landing - Full folder of images used in landing page

CSS/SCSS/SASS

Add styles for new pages
Add new metisMenu style
Add landing page styles
Add chat-discussion left/right class
Fix z-index of modal-dialog
Fix margins on wrapper when fixed-nav is enabled

Change log 2.0 - 2.1

Version 2.1 is mainly focused on MeteorJS to provide Meteor version.

Please stay tuned for 2.2 version to get new features for HTML/JS version.

Change log 1.9 -> 2.0

New view files

agile_board.html
article.html
blog.html
clients.html
diff.html
forgot_password.html
full_height.html (Outlook view)
idle_timer.html
issue_tracker.html
off_canvas_menu.html
spinners.html
temas_board.html
tinycon.html

Changed views files

All .html files was changed to add new menu elements
faq.html - Fix the collapse effect - Create new div element .faq-answer before p answer.
chat.html - Add new small-chat element

New Inspinia js files

No new files

Changed Inspinia js files

inspinia.js - Update fix_height function, add local storage handler, add functions for small-chat and right-sidebar

Updates

js/plugins/pace - update Pace to 1.0
bootstrap - update to 3.3.4
js/morris/morris.js - update to 0.5

New plugins

js/plugins/diff_match_patch - Google algorithm for diff functionality
js/plugins/preetyTextDiff - jQuery plugin for dif
js/plugins/idle_timer
js/plugins/tinycon

New images

img/full_height.jpg
img/off_canvas.jpg

CSS/SCSS/SASS

Add styles for new pages
Improve btn-link
Add colapsed class for initial collapsed ibox
Fix margins for footer with sidebar fixed
Fix responsive in login page

Change log 1.9 -> 1.9.2

Version 1.9.2 is mainly focused on Ruby on Rails to provide Rails version.

Please stay tuned for 2.0 version to get new features.

Change log 1.8 -> 1.9

New view files

chat_view.html
dashboard_4.html
dashboard_4_1.html
layouts.html
login_two_columns.html
tree_view.html

Changed views files

All .html files was changed to add new menu
basci_gallery.html - Replace old plugin with new blueimp lightbox gallery

New js files

No new files

Changed js files

No changes

Updates

js/plugins/flot - update Flot chart library to version 0.8.3
font-awesome - update Font awesome to version 4.3.0

New plugins

js/plugins/blueimp - new plugin for lightbox gallery
js/plugins/jsTree - new plugin for tree view

New images

img/gallery - new set of images for lightbox gallery page
img/dashbbard4_1.jpg
img/dashbbard4_2.jpg

Contact

Contact as with email: support@webapplayers.com

INSPINIA - Responsible Admin Theme

Table of Contents

About the template

Structure

Folders and files

Main HTML elements

Layout structure

Main menu - navigation

Second menu

Content

Options

Fixed sidebar

Fixed navbar

Fixed navbar 2

Fixed footer

Right-to-Left Language Support

Layout 2

Off canvas menu

Skins

Theme config

Inspinia Seed Project

Change log 2.7.1 -> 2.8

Change log 2.7 -> 2.7.1

Change log 2.6.2 -> 2.7

Change log 2.6 -> 2.6.2

Change log 2.5 -> 2.6

Change log 2.4 -> 2.5

Change log 2.3 -> 2.4

Change log 2.2 -> 2.3

Change log 2.0/2.1 -> 2.2

Change log 2.0 - 2.1

Change log 1.9 -> 2.0

Change log 1.9 -> 1.9.2

Change log 1.8 -> 1.9

Contact