admin

Please wait...

search
close

Overview

Thank you for downloading Otika Bootstrap 5 Admin Template. If you have any queries which can not solve using this document, feel free to email me. I'll happy to help you.

  • Item Name : Otika - Bootstrap 5 Admin Dashboard Template
  • Item Version : v 2.1.0
  • created: 20/11/2019
  • latest update: 17/01/2023
  • by: RedStarTheme
  • email: redstartheme@gmail.com

Introductions

Otika Admin is a fully responsive admin dashboard template based on Bootstrap 5 version. It is fully responsive built using SASS preprocessor, HTML5, CSS3 and jQuery plugins. Otika have lots of components, which you can use in your application. It works natively on mobile devices, making it an accessible way of managing your own website from wherever you are.

Otika Admin comes with many example pages with many ready to use components and easy to customize. Otika offers multiple theme options, you can chose as per your choice.

This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

Dependencies

Installation

Installation Guide

After download package you can find pre build app folder in source/light, source/dark packages. Choose your desire template and you just need to copy and paste app folder in your desire location.

Note: we suggest you to add your code in custom.js & custom.css, so whenever the update of Otika Admin comes it does not affect your code.

Prerequisite

  • Node.js and NPM : You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js.
  • Install gulp locally : You can install gulp in local machine by executing from your terminal npm install gulp -g .
  • Install dependency : After installing Node, npm and gulp run npm install command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file.
  • Build : Run gulp command from project directory to build the project. All require files are compile and place in /app directory.
  • Just copy and paste app folder in your location. That's it!!!

Folder Structure

                         	
+---light
  |   +---app
  |   	+---assets
  |   	  +---bundles
  |   	  +---css
  |   	  +---fonts
  |   	  +---img
  |   	  +---js
  |     +---.html files       
  |   +---scss    
  |   	+---.scss files      
  |   +---gulpfile.js
  |   +---package.json
  +---document
  |   +---assets
  |      +---css
  |   	 +---fonts
  |   	 +---img
  |   	 +---js
  |   +---index.html

Let's get to know the description of each folder.

Folder Name Description
app/ Is a root folder.
app/assets All distribution files are placed here, such as CSS, Images, third-party libraries, fonts and JavaScript.
app/assets/bundles All third-party libraries are placed here, Also, put the library that you want to add in this folder.
app/assets/css All CSS files are placed here, namely app.min.css, components.css, style.css and custom.css. if you want to change the existing CSS rules, please use the custom.css file.
app/assets/fonts All font files are here, the font used by this template.
app/assets/img You can find all the images used by this template in this folder.
app/assets/js All JS files are placed here, namely app.min.js, scripts.js, custom.js and page related js files. If you want to add your own javaScript code please use custom.js file.
app/.html All template HTMl files are placed here.
scss/ All SASS files are placed here.
gulpfile.js/ GULP task related code are written in this file.
package.json/ package.json provides a simple way for people to keep track of packages they use in your application.

Navbar

For navbar we use the following structure.

                         	
<nav class="navbar navbar-expand-lg main-navbar sticky">
    <div class="form-inline mr-auto">
        <ul class="navbar-nav mr-3">
        <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg
                                collapse-btn"> <i data-feather="align-justify"></i></a></li>
        <li><a href="#" class="nav-link nav-link-lg fullscreen-btn">
            <i data-feather="maximize"></i>
            </a></li>
        <li>
            <form class="form-inline mr-auto">
            <div class="search-element">
                <input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="200">
                <button class="btn" type="submit">
                <i class="fas fa-search"></i>
                </button>
            </div>
            </form>
        </li>
        </ul>
    </div>
    <ul class="navbar-nav navbar-right">
        <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown"
            class="nav-link nav-link-lg message-toggle"><i data-feather="mail"></i>
            <span class="badge headerBadge1">
            6 </span> </a>
        <div class="dropdown-menu dropdown-list dropdown-menu-right pullDown">
            <div class="dropdown-header">
            Messages
            <div class="float-right">
                <a href="#">Mark All As Read</a>
            </div>
            </div>
            <div class="dropdown-list-content dropdown-list-message">
            <a href="#" class="dropdown-item"> <span class="dropdown-item-avatar
                                        text-white"> <img alt="image" src="assets/img/users/user-1.png" class="rounded-circle">
                </span> <span class="dropdown-item-desc"> <span class="message-user">John
                    Deo</span>
                <span class="time messege-text">Please check your mail !!</span>
                <span class="time">2 Min Ago</span>
                </span>
            .....
            </div>
            <div class="dropdown-footer text-center">
            <a href="#">View All <i class="fas fa-chevron-right"></i></a>
            </div>
        </div>
        </li>
        <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown"
            class="nav-link notification-toggle nav-link-lg"><i data-feather="bell" class="bell"></i>
        </a>
        <div class="dropdown-menu dropdown-list dropdown-menu-right pullDown">
            <div class="dropdown-header">
            Notifications
            <div class="float-right">
                <a href="#">Mark All As Read</a>
            </div>
            </div>
            <div class="dropdown-list-content dropdown-list-icons">
            <a href="#" class="dropdown-item dropdown-item-unread"> <span
                class="dropdown-item-icon bg-primary text-white"> <i class="fas
                                            fa-code"></i>
                </span> <span class="dropdown-item-desc"> Template update is
                available now! <span class="time">2 Min
                    Ago</span>
                </span>
            .....
            </div>
            <div class="dropdown-footer text-center">
            <a href="#">View All <i class="fas fa-chevron-right"></i></a>
            </div>
        </div>
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown"
            class="nav-link dropdown-toggle nav-link-lg nav-link-user"> <img alt="image" src="assets/img/user.png"
            class="user-img-radious-style"> <span class="d-sm-none d-lg-inline-block"></span></a>
        <div class="dropdown-menu dropdown-menu-right pullDown">
            <div class="dropdown-title">Hello Sarah Smith</div>
            <a href="profile.html" class="dropdown-item has-icon"> <i class="far
                                    fa-user"></i> Profile
            </a> <a href="timeline.html" class="dropdown-item has-icon"> <i class="fas fa-bolt"></i>
            Activities
            </a> <a href="" class="dropdown-item has-icon"> <i class="fas fa-cog"></i>
            Settings
            </a>
            <div class="dropdown-divider"></div>
            <a href="auth-login.html" class="dropdown-item has-icon text-danger"> <i class="fas fa-sign-out-alt"></i>
            Logout
            </a>
        </div>
        </li>
    </ul>
</nav>

Left Sidebar

Below code is used for left sidebar menu. 

                         	
<div class="main-sidebar sidebar-style-2">
    <aside id="sidebar-wrapper">
        <div class="sidebar-brand">
        <a href="index.html"> <img alt="image" src="assets/img/logo.png" class="header-logo" /> <span
            class="logo-name">Otika</span>
        </a>
        </div>
        <ul class="sidebar-menu">
            <li class="menu-header">Main</li>
            <li class="dropdown">
                <a href="index.html" class="nav-link"><i data-feather="monitor"></i><span>Dashboard</span></a>
            </li>
            <li class="dropdown">
                <a href="#" class="menu-toggle nav-link has-dropdown"><i
                    data-feather="briefcase"></i><span>Widgets</span></a>
                <ul class="dropdown-menu">
                    <li><a class="nav-link" href="widget-chart.html">Chart Widgets</a></li>
                    <li><a class="nav-link" href="widget-data.html">Data Widgets</a></li>
                </ul>
            </li>
        ....... 
        </ul>
    </aside>
</div>

Right Sidebar

Below code is used for develop right sidebar panel.

                         	
<div class="settingSidebar">
    <a href="javascript:void(0)" class="settingPanelToggle"> <i class="fa fa-spin fa-cog"></i>
    </a>
    <div class="settingSidebar-body ps-container ps-theme-default">
        <div class=" fade show active">
        <div class="setting-panel-header">Setting Panel
        </div>
        <div class="p-15 border-bottom">
            <h6 class="font-medium m-b-10">Select Layout</h6>
            <div class="selectgroup layout-color w-50">
            <label class="selectgroup-item">
                <input type="radio" name="value" value="1" class="selectgroup-input-radio select-layout" checked>
                <span class="selectgroup-button">Light</span>
            </label>
            <label class="selectgroup-item">
                <input type="radio" name="value" value="2" class="selectgroup-input-radio select-layout">
                <span class="selectgroup-button">Dark</span>
            </label>
            </div>
        </div>
        <div class="p-15 border-bottom">
            <h6 class="font-medium m-b-10">Sidebar Color</h6>
            <div class="selectgroup selectgroup-pills sidebar-color">
            <label class="selectgroup-item">
                <input type="radio" name="icon-input" value="1" class="selectgroup-input select-sidebar">
                <span class="selectgroup-button selectgroup-button-icon" data-toggle="tooltip"
                data-original-title="Light Sidebar"><i class="fas fa-sun"></i></span>
            </label>
            <label class="selectgroup-item">
                <input type="radio" name="icon-input" value="2" class="selectgroup-input select-sidebar" checked>
                <span class="selectgroup-button selectgroup-button-icon" data-toggle="tooltip"
                data-original-title="Dark Sidebar"><i class="fas fa-moon"></i></span>
            </label>
            </div>
        </div>
        <div class="p-15 border-bottom">
            <h6 class="font-medium m-b-10">Color Theme</h6>
            <div class="theme-setting-options">
            <ul class="choose-theme list-unstyled mb-0">
                <li title="white" class="active">
                <div class="white"></div>
                </li>
                <li title="cyan">
                <div class="cyan"></div>
                </li>
                <li title="black">
                <div class="black"></div>
                </li>
                <li title="purple">
                <div class="purple"></div>
                </li>
                <li title="orange">
                <div class="orange"></div>
                </li>
                <li title="green">
                <div class="green"></div>
                </li>
                <li title="red">
                <div class="red"></div>
                </li>
            </ul>
            </div>
        </div>
        <div class="p-15 border-bottom">
            <div class="theme-setting-options">
            <label class="m-b-0">
                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input"
                id="mini_sidebar_setting">
                <span class="custom-switch-indicator"></span>
                <span class="control-label p-l-10">Mini Sidebar</span>
            </label>
            </div>
        </div>
        <div class="p-15 border-bottom">
            <div class="theme-setting-options">
            <label class="m-b-0">
                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input"
                id="sticky_header_setting">
                <span class="custom-switch-indicator"></span>
                <span class="control-label p-l-10">Sticky Header</span>
            </label>
            </div>
        </div>
        <div class="mt-4 mb-4 p-3 align-center rt-sidebar-last-ele">
            <a href="#" class="btn btn-icon icon-left btn-primary btn-restore-theme">
            <i class="fas fa-undo"></i> Restore Default
            </a>
        </div>
        </div>
    </div>
</div>

Content

Below code is used for add content.

                         	
 <section class="section">
    <div class="section-body">
      <!-- add content here -->
    </div>
  </section>

Card

Below code is used for basic card examples. You can check more examples on our card.html page.

                         	
<!-- card wrapper -->
  <div class="card">
    <!-- card header -->
    <div class="card-header">
      <!-- card title -->
      <h4>Card title</h4>
    </div>
    <!-- card body -->
    <div class="card-body">
      Card content
    </div>
    <!-- card footer -->
    <div class="card-footer">
      Card footer
    </div>
  </div>

Theme Setting

1. Light Or Dark Template


For theme related configurations changes, you have to just change in variable value in one file assets/js/scripts.js. At the beginning of scripts.js file you can see following variables declaration.

Note: we store theme related data in localstorage in browser, so whenever you chagne in config file please clear your browser data first. 

    var themeType = "light"; // light or dark
    var sidebarColor = "light-sidebar"; // light-sidebar or dark-sidebar
    var themeColor = "theme-white"; // theme-black",theme-white",theme-purple,theme-blue,theme-cyan,theme-green,theme-orange

Options Description
themeType For use light template layout set themeType value light & for dark template layout set themeType value dark.
sidebarColor For use light color sidebar menu set sidebarColor value light-sidebar & for dark color sidebar menu set sidebarColor value dark-sidebar.
themeColor You have multiple theme color options, you can chose any theme color from white, black, purple, blue, cyan, green, orange. set themeColor value theme-black for black theme, same as others.

2. Collapsed Sidebar

For set sidebar in collapsed mode you need to add class .sidebar-mini in body tag.

Utilities

Utilities classes are very reusable classes with a single purpose to reduce the frequency of highly repetitive declarations.

Class Description Value
.m-l- Margin left 0|5|10|15|20|25
.m-r- Margin Right 0|5|10|15|20|25
.m-t- Margin Top 0|5|10|15|20|25
.m-b- Margin Bottom 0|5|10|15|20|25
.p-l- Padding Left 0|5|10|15|20|25
.p-r- Padding Right 0|5|10|15|20|25
.p-t- Padding Top 0|5|10|15|20|25
.p-b- Padding Bottom 0|5|10|15|20|25
.margin- Margin 0|5|10|15|20|25
.padding- Padding 0|5|10|15|20|25
.font- Font Size 5 To 49
.bg- Background Color red|pink|purple|deep-purple|indigo|blue|light-blue|cyan|teal|green|light-green|lime|yellow|amber|orange|deep-orange|brown|grey|blue-grey|black|white|dark-gray
.l-bg-- Linear Background Color green|orange|cyan|red|purple|purple-dark
.col- Set Font Color red|pink|purple|deep-purple|indigo|blue|light-blue|cyan|teal|green|light-green|lime|yellow|amber|orange|deep-orange|brown|grey|blue-grey|black|white|dark-gray

New Page

To create a new page, you can use blank.html page, which provides basic page layout which you can extend and modify further.

Credits

Below is the list of all plugins and external resources used to power this template.

Plugins Link
Bootstrap https://getbootstrap.com/
jQuery http://jquery.com/
Bootstrap Colorpicker https://github.com/farbelous/bootstrap-colorpicker
Amchart 4 https://www.amcharts.com/
Light Gallery http://sachinchoolur.github.io/lightGallery/
Apex chart https://apexcharts.com/
Bootstrap Social https://github.com/lipis/bootstrap-social/
Bootstrap Select https://silviomoreto.github.io/bootstrap-select//
Bootstrap Tagsinput https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/
Bootstrap Date Range Picker http://www.daterangepicker.com//
Bootstrap Time Picker http://jdewit.github.io/bootstrap-timepicker/
ChartJs https://github.com/chartjs/Chart.js/
CKeditor https://ckeditor.com/
cleave.js https://github.com/nosir/cleave.js/
codemirror https://codemirror.net/
Datatables https://datatables.net/
dropzonejs https://www.dropzonejs.com/
echart https://ecomfe.github.io/echarts-examples/public/index.html
editable-table https://github.com/mindmup/editable-table
flag icon css https://github.com/lipis/flag-icon-css/
fontawesome icon https://fontawesome.com/
Full Calendar https://fullcalendar.io/
Ion Icons https://github.com/ionic-team/ionicons/
Izitoast http://izitoast.marcelodolza.com/
jQuery Pwstrength http://matoilic.github.io/jquery.pwstrength/
jQuery Steps https://github.com/rstaib/jquery-steps
jQuery UI http://jqueryui.com/
Vector Maps http://jvectormap.com/
Material Icons https://material.io/tools/icons/?style=baseline/
Morris Chart https://github.com/morrisjs/morris.js/
nicescroll https://nicescroll.areaaperta.com/
Owl Carousel https://owlcarousel2.github.io/OwlCarousel2/
pretty checkbox https://github.com/lokesh-coder/pretty-checkbox
select2 https://select2.org/
Sweet Alert https://github.com/t4t5/sweetalert/
Sparkline http://omnipotent.net/jquery.sparkline//
Google Maps https://hpneo.github.io/gmaps/

Changelog

Version 2.1.0- 17 Jan 2023 
                         	
-- Update bootstrap to latest version
-- Update jQuery to latest version
-- minor bug fixed
Version 2.0- 13 Aug 2021 
                         	
-- Update bootstrap 4 to bootstrap 5
-- Update all dependencies to latest verison
-- minor bug fixed
Version 1.1.0- 15 Nov 2019 
                         	
--Initial released

Support

Once again thank you for purchasing the theme. I am always available to help you.

If you have any type of query or support needed, feel free to contact us by mail or message to redstartheme@gmail.com