Stisla

Documentation

Overview

First, thank you for using Stisla. Stisla is a responsive HTML5 admin template based on Bootstrap 4. Using this template you can easily create the components you want.

You can use this template in PHP Native, Laravel Framework, CodeIgniter or the other depending on the skills that you can acquire.

On this page, you will recognize how to use CSS and JavaScript API components.

If you use this template for free then you can create a product using this template and sell it to the marketplace (such as CodeCanyon).

License

We use MIT License for free version.

You are free to use it personally and commercially or you can also create a product using this template and sell it to a marketplace (such as CodeCanyon).

We use our own license for pro version.

The following is the provision for the pro version.

Description Freelancer Author
Create single website/app for personal
Yes
Yes
Create single website/app for client
Yes
Yes
Create website/app multiple times
No
Yes
Create website/app for sale
No
Yes
Create CMS with this template for sale
No
Yes
Create online/offline generators based on our products
No
No
Resale/Redistribute
No
No

Development

Now we will learn how to use this template. Starting from understanding the layout, using components and using JavaScript function.

Layout

Building the layout is very easy, here we have 2 types of layout. First layout without sidebar and header, then layout with sidebar and header.

Use the following structure to create a layout without header and sidebar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
  <title>My Title</title>

  <link rel="stylesheet" href="../dist/modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/modules/ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="../dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="../dist/modules/bootstrap-social/bootstrap-social.css">

  <link rel="stylesheet" href="../dist/css/style.min.css">
</head>

<body>
  <div id="app">
    <section class="section">
      <!-- Your content goes here -->
    </section>
  </div>

  <script src="../dist/modules/jquery.min.js"></script>
  <script src="../dist/modules/popper.js"></script>
  <script src="../dist/modules/tooltip.js"></script>
  <script src="../dist/modules/bootstrap/js/bootstrap.min.js"></script>
  <script src="../dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
  <script src="../dist/modules/moment.min.js"></script>
  <script src="../dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
  <script src="../dist/js/sa-functions.min.js"></script>
  
  <script src="../dist/js/scripts.min.js"></script>
  <script src="../dist/js/custom.js"></script>
</body>
</html>

And here is the layout with header and sidebar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
  <title>My Title</title>

  <link rel="stylesheet" href="../dist/modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/modules/ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="../dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="../dist/modules/bootstrap-social/bootstrap-social.css">

  <link rel="stylesheet" href="../dist/modules/jqvmap/dist/jqvmap.min.css">
  <link rel="stylesheet" href="../dist/modules/fullcalendar/fullcalendar.min.css">
  <link rel="stylesheet" href="../dist/modules/weather-icon/css/weather-icons.min.css">
  <link rel="stylesheet" href="../dist/modules/weather-icon/css/weather-icons-wind.min.css">
  <link rel="stylesheet" href="../dist/modules/summernote/summernote-lite.css">
  <link rel="stylesheet" href="../dist/modules/flag-icon-css/css/flag-icon.min.css">
  <link rel="stylesheet" href="../dist/modules/toastr/build/toastr.min.css">
  <link rel="stylesheet" href="../dist/css/style.min.css">
</head>

<body>
  <div id="app">
    <div class="main-wrapper">
      <div class="navbar-bg"></div>
      <nav class="navbar navbar-expand-lg main-navbar">
        <form class="form-inline mr-auto">
          <ul class="navbar-nav mr-3">
            <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="ion ion-navicon-round"></i></a></li>
            <li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="ion ion-search"></i></a></li>
          </ul>
          <div class="search-element">
            <input class="form-control" type="search" placeholder="Search" aria-label="Search">
            <button class="btn" type="submit"><i class="ion ion-search"></i></button>
          </div>
        </form>
        <ul class="navbar-nav navbar-right">
          <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="ion ion-ios-bell-outline"></i></a>
            <div class="dropdown-menu dropdown-list dropdown-menu-right">
              <div class="dropdown-header">Notifications
                <div class="float-right">
                  <a href="#">View All</a>
                </div>
              </div>
              <div class="dropdown-list-content">
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <img src="../dist/img/avatar/avatar-1.jpeg" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
                    <div class="time">10 Hours Ago</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <img src="../dist/img/avatar/avatar-2.jpeg" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Ujang Maman</b> has moved task <b>Fix bug footer</b> to <b>Progress</b>
                    <div class="time">12 Hours Ago</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <img src="../dist/img/avatar/avatar-3.jpeg" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Agung Ardiansyah</b> has moved task <b>Fix bug sidebar</b> to <b>Done</b>
                    <div class="time">12 Hours Ago</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <img src="../dist/img/avatar/avatar-4.jpeg" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Ardian Rahardiansyah</b> has moved task <b>Fix bug navbar</b> to <b>Done</b>
                    <div class="time">16 Hours Ago</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <img src="../dist/img/avatar/avatar-5.jpeg" class="rounded-circle dropdown-item-img">
                  <div class="dropdown-item-desc">
                    <b>Alfa Zulkarnain</b> has moved task <b>Add logo</b> to <b>Done</b>
                    <div class="time">Yesterday</div>
                  </div>
                </a>
              </div>
            </div>
          </li>
          <li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg">
            <i class="ion ion-android-person d-lg-none"></i>
            <div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
            <div class="dropdown-menu dropdown-menu-right">
              <a href="examples/profile.html" class="dropdown-item has-icon">
                <i class="ion ion-android-person"></i> Profile
              </a>
              <a href="#" class="dropdown-item has-icon">
                <i class="ion ion-log-out"></i> Logout
              </a>
            </div>
          </li>
        </ul>
      </nav>
      <div class="main-sidebar">
        <aside id="sidebar-wrapper">
          <div class="sidebar-brand">
            <a href="index.html">Stisla</a>
          </div>
          <div class="sidebar-user">
            <div class="sidebar-user-picture">
              <img src="../dist/img/avatar/avatar-1.jpeg">
            </div>
            <div class="sidebar-user-details">
              <div class="user-name">Ujang Maman</div>
              <div class="user-role">
                Administrator
              </div>
            </div>
          </div>
          <ul class="sidebar-menu">
            <li class="menu-header">Dashboard</li>
            <li class="active">
              <a href="index.html"><i class="ion ion-speedometer"></i><span>Dashboard</span></a>
            </li>
          </ul>
        </aside>
      </div>
      <div class="main-content">
        <section class="section">
          <h1 class="section-header">
            <div>My Title</div>
          </h1>
          <!-- Your content goes here -->
        </section>
      </div>
      <footer class="main-footer">
        <div class="footer-left">
          Copyright © 2018 <div class="bullet"></div> Design By <a href="https://kodinger.com/">Kodinger</a>
        </div>
        <div class="footer-right"></div>
      </footer>
    </div>
  </div>

  <script src="../dist/modules/jquery.min.js"></script>
  <script src="../dist/modules/popper.js"></script>
  <script src="../dist/modules/tooltip.js"></script>
  <script src="../dist/modules/bootstrap/js/bootstrap.min.js"></script>
  <script src="../dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
  <script src="../dist/modules/moment.min.js"></script>
  <script src="../dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
  <script src="../dist/js/sa-functions.min.js"></script>
  
  <script src="../dist/modules/simple-weather/jquery.simpleWeather.min.js"></script>
  <script src="../dist/modules/chart.min.js"></script>
  <script src="../dist/modules/fullcalendar/fullcalendar.min.js"></script>
  <script src="../dist/modules/jqvmap/dist/jquery.vmap.min.js"></script>
  <script src="../dist/modules/jqvmap/dist/maps/jquery.vmap.world.js"></script>
  <script src="../dist/modules/summernote/summernote-lite.js"></script>
  <script src="../dist/modules/chocolat/dist/js/jquery.chocolat.min.js"></script>
  <script src="../dist/modules/toastr/build/toastr.min.js"></script>

  <script src="../dist/js/scripts.min.js"></script>
  <script src="../dist/js/custom.js"></script>
</body>
</html>

The important things you need to remember are:

  • .main-wrapper - wrap all elements
  • .navbar - for your navbar
  • .main-sidebar - wrap sidebar content
  • .main-content - wrap the entrie content

Skins

You can set the color scheme on this template, on its default we provide 5 color variants. You can easily change the color of this template. Just call the color CSS file before the </head> tag.

<link rel="stylesheet" href="path/to/skin.css">

Also, you can make your own skin. Use the following CSS code and change 'PRIMARY_COLOR' and 'SECONDARY_COLOR' to the color you want.

.bg-primary {
  background-color: PRIMARY_COLOR !important;
}
.text-primary {
  color: PRIMARY_COLOR !important;
}
a {
  color: PRIMARY_COLOR;
}
a:hover {
  color: SECONDARY_COLOR;
}
.btn-primary {
  background-color: PRIMARY_COLOR;
  border-color: transparent !important;
}
.btn-primary:focus,
.btn-primary:focus:active,
.btn-primary:active,
.btn-primary:hover {
  background-color: SECONDARY_COLOR !important;
}
.btn-primary.disabled, .btn-primary:disabled {
  background-color: PRIMARY_COLOR;
  border-color: PRIMARY_COLOR;
}
.btn-outline-primary {
  color: PRIMARY_COLOR;
  background-color: transparent;
  background-image: none;
  border-color: PRIMARY_COLOR;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: PRIMARY_COLOR;
  border-color: PRIMARY_COLOR;
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: PRIMARY_COLOR;
  background-color: transparent;
}
.btn-outline-primary:not([disabled]):not(.disabled):active, .btn-outline-primary:not([disabled]):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: PRIMARY_COLOR;
  border-color: PRIMARY_COLOR;
}
.btn-link {
  font-weight: 400;
  color: PRIMARY_COLOR;
  background-color: transparent;
}
.btn-link:hover {
  color: SECONDARY_COLOR;
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  background-color: PRIMARY_COLOR;
}
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  background-color: PRIMARY_COLOR;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: PRIMARY_COLOR;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  background-color: PRIMARY_COLOR;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: PRIMARY_COLOR;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: PRIMARY_COLOR;
}
.page-link {
  color: PRIMARY_COLOR;
  background-color: #fff;
  border: 1px solid #ededed;
}
.page-item.active .page-link {
  color: #fff;
  background-color: PRIMARY_COLOR;
  border-color: PRIMARY_COLOR;
}
.page-link:focus, .page-link:hover {
  color: SECONDARY_COLOR;
}

.badge-primary {
  color: #fff;
  background-color: PRIMARY_COLOR;
}
.progress-bar {
  color: #fff;
  background-color: PRIMARY_COLOR;
}
.list-group-item.active {
  color: #fff;
  background-color: PRIMARY_COLOR;
  border-color: PRIMARY_COLOR;
}
.bg-primary {
  background-color: PRIMARY_COLOR !important;
}
.border-primary {
  border-color: PRIMARY_COLOR !important;
}
.text-primary {
  color: PRIMARY_COLOR !important;
}

.navbar.active {
  background-color: PRIMARY_COLOR;
}
.navbar-bg {
  background-color: PRIMARY_COLOR;
}
.form-control:focus {
  border-color: PRIMARY_COLOR;
}
.main-sidebar .sidebar-menu li.active a {
  background-color: #f9f9f9;
  color: PRIMARY_COLOR;
}
.main-sidebar .sidebar-menu li ul.menu-dropdown li a:hover {
  color: PRIMARY_COLOR;
}

.main-sidebar .sidebar-menu li ul.menu-dropdown li.active a {
  color: PRIMARY_COLOR;
}
.alert.alert-primary {
  background-color: PRIMARY_COLOR;
}
.card.card-primary {
  border-top: 2px solid PRIMARY_COLOR;
}
.fc button.fc-state-active {
  background-color: PRIMARY_COLOR;
  color: #fff;
}
.jqvmap-circle {
  background-color: PRIMARY_COLOR;
  border: 1px solid #000;
}
.weather ul li {
  border: 2px solid PRIMARY_COLOR;
  color: PRIMARY_COLOR;
}
.card-chat .chat-content .chat-item.chat-right .chat-details .chat-text {
  background-color: PRIMARY_COLOR;
  color: #fff;
}
.nav-tabs .nav-item .nav-link {
  color: PRIMARY_COLOR;
}
.nav-pills .nav-item .nav-link {
  color: PRIMARY_COLOR;
}
.swal-button.swal-button--confirm {
  background-color: PRIMARY_COLOR;
}
.page-item .page-link {
  color: PRIMARY_COLOR;
}
.page-item.active .page-link {
  background-color: PRIMARY_COLOR;
  border-color: PRIMARY_COLOR;
}
.btn-group .btn.active {
  background-color: PRIMARY_COLOR;
  color: #fff;
}
.media .media-right {
  color: PRIMARY_COLOR;
}
.selectric-items li.selected,
.selectric-items li.highlighted {
  background-color: PRIMARY_COLOR;
  color: #fff;
}
.dropzone {
  border: 2px dashed PRIMARY_COLOR;
}
.accordion .accordion-header[aria-expanded="true"] {
  background-color: PRIMARY_COLOR;
  color: #fff;
}
.bootstrap-tagsinput .tag {
  background-color: PRIMARY_COLOR;
}

And also you can customize other properties in the above code.

Sidebar

As we mentioned before, we have provided layouts with sidebar and header. In this section you will gain more knowledge about the sidebar.

Sidebar in this template is written as follows.

<!-- Sidebar outter -->
<div class="main-sidebar"> 
  <!-- sidebar wrapper -->
  <aside id="sidebar-wrapper">
    <!-- sidebar brand -->
    <div class="sidebar-brand">
      <a href="index.html">Stisla</a>
    </div>
    <!-- sidebar user information -->
    <div class="sidebar-user">
      <div class="sidebar-user-picture">
        <img src="../dist/img/avatar/avatar-1.jpeg">
      </div>
      <div class="sidebar-user-details">
        <div class="user-name">Ujang Maman</div>
        <div class="user-role">
          Administrator
        </div>
      </div>
    </div>
    <!-- sidebar menu -->
    <ul class="sidebar-menu">
      <!-- menu header -->
      <li class="menu-header">Dashboard</li>
      <!-- menu item -->
      <li class="active">
        <a href="index.html"><i class="ion ion-speedometer"></i><span>Dashboard</span></a>
      </li>
    </ul>
  </aside>
</div>

And to create the sidebar toggle, use the following code.

<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="ion ion-navicon-round"></i></a></li>

You can also hide the sidebar by adding the sidebar-gone class in the <body> tag

<body class="sidebar-gone">

Navbar

For navbar we use the following structure.

<!-- navbar background color -->
<div class="navbar-bg"></div>
<!-- navbar -->
<nav class="navbar navbar-expand-lg main-navbar">
  <!-- navbar nav left -->
  <form class="form-inline mr-auto">
    <!-- navbar toggler -->
    <ul class="navbar-nav mr-3">
      <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="ion ion-navicon-round"></i></a></li>
      <li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="ion ion-search"></i></a></li>
    </ul>
    <!-- navbar search -->
    <div class="search-element">
      <input class="form-control" type="search" placeholder="Search" aria-label="Search">
      <button class="btn" type="submit"><i class="ion ion-search"></i></button>
    </div>
  </form>
  <!-- navbar right -->
  <ul class="navbar-nav navbar-right">
    <!-- navbar notification toggle -->
    <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="ion ion-ios-bell-outline"></i></a>
      <!-- navbar notification dropdown -->
      <div class="dropdown-menu dropdown-list dropdown-menu-right">
        <div class="dropdown-header">Notifications
          <div class="float-right">
            <a href="#">View All</a>
          </div>
        </div>
        <!-- navbar notification dropdown content -->
        <div class="dropdown-list-content">
          <!-- navbar notification dropdown item -->
          <a href="#" class="dropdown-item">
            <img src="../dist/img/avatar/avatar-5.jpeg" class="rounded-circle dropdown-item-img">
            <div class="dropdown-item-desc">
              <b>Alfa Zulkarnain</b> has moved task <b>Add logo</b> to <b>Done</b>
              <div class="time">Yesterday</div>
            </div>
          </a>
          ...
          ..
        </div>
      </div>
    </li>
    <!-- navbar right item -->
    <li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg">
      <i class="ion ion-android-person d-lg-none"></i>
      <div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
      <div class="dropdown-menu dropdown-menu-right">
        <!-- navbar right dropdown item -->
        <a href="examples/profile.html" class="dropdown-item has-icon">
          <i class="ion ion-android-person"></i> Profile
        </a>
        ...
        ..
      </div>
    </li>
  </ul>
</nav>

Content

For content we use the following structure.

<!-- Content wrapper -->
<div class="main-content">
  <!-- Content inner -->
  <section class="section">
    <!-- Content header -->
    <h1 class="section-header">
      <div>Title</div>
    </h1>
    <!-- Your content goes here -->
  </section>
</div>

Card

This template is Bootstrap 4 based, so we use the card to make the grouping in the layout.

We also changed a little style on this Bootstrap built-in card. To create a card use the following structure.

<!-- 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>

You can also customize the border-top color of the card by adding additional classes as follows.

<div class="card card-primary">
  ...
  ..
</div>

Here are the colors supported on the card.

.card-primary
.card-secondary
.card-success
.card-danger
.card-warning
.card-info
.card-dark

In addition, you can also create a collapsable card.

<div class="card">
  <div class="card-header">
    <!-- card toggle -->
    <div class="float-right">
      <a data-collapse="#mycard-collapse" class="btn btn-icon"><i class="ion ion-minus"></i></a>
    </div>
    <h4>Show/Hide</h4>
  </div>
  <!-- card collapsable content -->
  <div class="collapse show" id="mycard-collapse">
    <div class="card-body">
      You can show or hide this card.
    </div>
    <div class="card-footer">
      Card Footer
    </div>
  </div>
</div>

Lastly, you can also create a dismissible card.

<div class="card" id="mycard-dimiss">
  <div class="card-header">
    <!-- card dismiss toggle -->
    <div class="float-right">
      <a data-dismiss="#mycard-dimiss" class="btn btn-icon"><i class="ion ion-close"></i></a>
    </div>
    <h4>Dismiss</h4>
  </div>
  <div class="card-body">
    You can dimiss this card.
  </div>
  <div class="card-footer">
    Card Footer
  </div>
</div>
More Information
You can see other examples of card usage in the file pages/components.html

JavaScript

Previously, we didn't discuss much about the component, just explained the key and important things you need to know about this template. Because of the rest you can see the code for each component on each component file.

In this section we will discuss about the JavaScript APIs available in this template. We create some JavaScript functions that will certainly allow you to interact with components.

JavaScript: Card

In the card component we have created a simple API to change the card mode into progress.

Of course, this will make it easier for you when you want to create a form with AJAX and when the form is submitted then the card will display loading on the card.

<div class="card" id="mycard-form">
  <div class="card-header">
    <h4>Card title</h4>
  </div>
  <div class="card-body">
    <button class="btn btn-primary" onclick="$.cardProgress('#mycard-form')">Progress</button>
  </div>
  <div class="card-footer">
    Card Footer
  </div>
</div>

Card title

And use $.cardProgressDismiss(selector, callback); to remove progress on card.

Usage

Syntax
$.cardProgress(selector, options)

Options

Options Type Default Description
dismiss
Boolean
false
Displaying the dismiss button
dismissText
String
Cancel
Text form dismiss button
onDismiss(card)
Function
null
Callback when the dismiss button is clicked

JavaScript: Modal
PRO!

As we know, to create a modal in Bootstrap requires the HTML structure to be a modal. It might be easy if we just make some modals. But, if we want to make a lot of modals would require a lot of HTML structure as well.

In this template we have provided a simple plugin to create a reusable modal. So you no longer need the HTML structure for every time you want to create a modal.

Here is a simple modal example.

<button class="btn btn-primary" id="toggle-modal">Launch Modal</button>
<script>
  $('#toggle-modal').fireModal({
    title: 'My Modal',
    content: 'Hello!'
  });
</script>

Also, you can add buttons on modal.

<button class="btn btn-primary" id="toggle-modal-1">Launch Modal</button>
<script>
  $('#toggle-modal-1').fireModal({
    title: 'My Modal',
    body: 'Hello, dude!',
    buttons: [
      {
        text: 'Close',
        class: 'btn btn-secondary',
        handler: function(current_modal) {
        $.destroyModal(current_modal);
        }
      }
    ]
  });
</script>

In addition, you can also create a simple confirmation box by using this attribute on your button.

<button class="btn btn-danger" data-confirm="Are you sure?|This action can't be undone">Delete</button>

To close the current modal, you can use the function $.destroyModal(modal);.

Usage

Syntax
$('#toggle').fireModal(options);

Options

Options Type Default Description
size
String
modal-md
Class for modal size
center
Boolean
false
Modal position in the middle
animation
Boolean
true
Modal animation
title
String
Modal Title
Title on modal
closeButton
Boolean
true
Show close button
header
Boolean
true
Show modal header
body
String
null
Modal content
buttons
Object
null
Modal buttons
created
Function
null
Callback when the modal has been generated
appended
Function
null
Callback when modal has been appended to body
modal
Object
null
You can provide the default option of the Bootstrap modal

JavaScript: Chat
PRO!

In this template we provide chat box components and also we have created a simple API for you to interact with the components of the chat box.

Create a chat box component with a structure like the following.

<div class="card card-chat" id="mychatbox">
  <div class="card-header">
    <h4>Chat with Dad</h4>
  </div>
  <div class="card-body chat-content">
  </div>
  <div class="card-footer chat-form">
    <form>
      <input type="text" class="form-control" placeholder="Type a message">
      <button class="btn btn-primary">
        <i class="ion ion-paper-airplane"></i>
      </button>
    </form>
  </div>
</div>

Chat with Dad

To add a new chat to the chat box above then use the following code.

$.chatCtrl('#mychatbox', {
  text: 'Halo',
  picture: '../dist/img/avatar/avatar-1.jpeg'
});

And To make it on the left then use the position: 'chat-left' key.

$.chatCtrl('#mychatbox', {
  position: 'chat-left',
  text: 'Halo',
  picture: '../dist/img/avatar/avatar-1.jpeg'
});

Here is an example of a chat box that will display when the form is submitted..

$("#chat-form").submit(function() {
  var me = $(this),
      this_text = me.find('input').val(),
      this_picture = '../dist/img/avatar/avatar-1.jpeg';

  $.chatCtrl({
    text: this_text,
    picture: this_picture
  });
  return false;
});

Chat with Dad

Usage

Syntax
$.chatCtrl(selector, object);

Options

Options Type Default Description
position
String
chat-right
Class for chat position
text
String
null
Chat content
time
String
now
Chat time
picture
String
null
Chat user picture
type
String
text
Chat type, set to 'typing' to give 'typing' mode
timeout
Number
0
Delay displaying chat
onShow
Function
null
Callback when chat are displayed
Important
This component requires other libraries such as 'NiceScroll' and 'Moment.js'. So, do not forget to include those libraries.

JavaScript: Gallery
PRO!

In addition to some previous components, we also create another component that is gallery.

Gallery is a component of Stisla that will allow you to create a picture presentation. Let's try this code.

<!-- gallery wrapper -->
<div class="gallery">
  <!-- gallery item -->
  <div class="gallery-item" data-image="../dist/img/news/img05.jpg" data-title="Image 1"></div>
  <div class="gallery-item" data-image="../dist/img/news/img08.jpg" data-title="Image 2"></div>
  <div class="gallery-item" data-image="../dist/img/news/img03.jpg" data-title="Image 3"></div>
  <div class="gallery-item" data-image="../dist/img/news/img09.jpg" data-title="Image 4"></div>
  <div class="gallery-item" data-image="../dist/img/news/img10.jpg" data-title="Image 5"></div>
  <div class="gallery-item" data-image="../dist/img/news/img12.jpg" data-title="Image 6"></div>
  <div class="gallery-item" data-image="../dist/img/news/img14.jpg" data-title="Image 7"></div>
  <div class="gallery-item" data-image="../dist/img/news/img16.jpg" data-title="Image 8"></div>
  <div class="gallery-item" data-image="../dist/img/news/img11.jpg" data-title="Image 9"></div>
</div>
FYI
This component uses the 'Chocolat' library. For further use you can read their official documentation.

Go

JavaScript: Follow Button
PRO!

Next is the JavaScript for follow button. We've created a simple function to make the 'follow button' running.

Here is an example of a follow button.

<a href="#" class="btn btn-primary mt-3 follow-btn" data-follow-action="alert('follow clicked');" data-unfollow-action="alert('unfollow clicked');">Follow</a>

Or like this.

<a href="#" class="btn btn-primary mt-3 follow-btn" data-follow-action="alert('follow clicked');" data-unfollow-action="alert('unfollow clicked');">Follow</a>

JavaScript: Custom Tab

In addition to Bootstrap's own tabs, we also create simple functions for creating tabs.

We create this function so you can create tabs on every element you want. Here is a sample code to create a custom tab.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-tab="mygroup-tab" href="#tab-home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-tab="mygroup-tab" href="#tab-profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-tab="mygroup-tab" href="#tab-contact">Contact</a>
  </li>
</ul>
<div id="tab-home" class="active" data-tab-group="mygroup-tab">
  Home
</div>
<div id="tab-profile" data-tab-group="mygroup-tab">
  Profile
</div>
<div id="tab-contact" data-tab-group="mygroup-tab">
  Contact
</div>
Home
Profile
Contact

JavaScript: Utilities

Finally, you can also use the following JavaScript functions.

Sidebar Toggler

To create a sidebar toggle use the attribute data-toggle="sidebar" on your button.

<a href="#" data-toggle="sidebar">Toggle Sidebar</a>

Search Toggler

To create a search toggle use the attribute data-toggle="search" on your button. This function only applies to mobile view.

<a href="#" data-toggle="search">Toggle Search</a>

Tooltip

Here is an example of using tooltip.

<a href="#" data-toggle="tooltip" title="Hello">Tooltip</a>

Popover

Here is an example of using a popover.

<a href="#" data-toggle="popover" title="Hello">Popover</a>

Selectric
PRO!

Here is an example of using selectric. Use the selectric class on your select element.

<select class="form-control selectric">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
</select>

Select2
PRO!

Here is an example of using select2. Use the class select2 on your select element.

<select class="form-control select2">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
</select>

Summernote

The following is an example of summernote usage. Use the summernote or summernote-simple class on your textarea element.

<textarea class="form-control summernote"></textarea>

Code Editor / CodeMirror
PRO!

Here is an example of using a code editor. Use the class codeeditor on your textarea element.

<textarea class="form-control codeeditor"></textarea>

Other

For how to use other libraries, you can read the official documentation from the library because that's better.