Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.
Thank you for showing interest towards our admin template. Feel free to contact us any time. We have a dedicated team to provide you the best support. If you want any queries open support ticket https://support.spruko.com/.
If You Love Our Template Design Please don't forgot to rate it. Thank you so much!
Clont - Admin Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.
If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊
Clont– is a Bootstrap Admin & Dashboard template using modern and minimal design. It is fully flexible user-friendly and responsive. Clont admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 100+ HTML Pages & 50+ Plugins more UI elements . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. Advanced Form-Elements like Date pickers, form elements are included. This template using Bootstrap5 framework. This template is fully 100% Premium Admin Template quality. This template designed for using HTML5,CSS3,Jquery. After Purchased this template you will get All HTML files,CSS, Scss and JS Files.
It has super clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design admin template.
it is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices
Once you Purchase Clont , you will be able to get free download of all future updates.
| Vertical-menu | Horizontal click menu | Horizontal hover menu | RTL ready |
| 100+ HTML Pages | Bootstrap 5 Responsive Framework | Well Commented Code | 24 * 7 Professional Company Support |
| Regular Updates | 45+ Plugins | 6 types of Charts | Select2 |
| About us | Blog | File Manager | Gallery |
| Mail Inbox | Ecommerce Pages | Services Page | Blog page |
| Calendar | Mail Inbox | 11 Types of Icon sets | File upload |
| Message Chat | Form Elements | Month & Date & Year Range Pickers | Form Element and Wizard |
| Data Tables | Lockscreen Page | Error Page | User Profile |
| Invoice Page | Advanced Pricing Tables | Easy to customize | More Widgets |
| Very Easy to Create your Own Site | Neat, clean and simple design | W3C Validated |
style.css is the main CSS file located in assets/css folder of the package. Whole CSS file is well indexed with topic and its related code.
:root {
/* Primary */
--primary-bg-color-rgb: 45, 102, 247;
--primary-bg-color: rgb(var(--primary-bg-color-rgb));
--primary-bg-border: rgb(var(--primary-bg-color-rgb));
--primary-005: rgb(var(--primary-bg-color-rgb), 0.05);
--primary-01: rgb(var(--primary-bg-color-rgb), 0.1);
--primary-02: rgb(var(--primary-bg-color-rgb), 0.2);
--primary-03: rgb(var(--primary-bg-color-rgb), 0.3);
--primary-04: rgb(var(--primary-bg-color-rgb), 0.4);
--primary-05: rgb(var(--primary-bg-color-rgb), 0.5);
--primary-06: rgb(var(--primary-bg-color-rgb), 0.6);
--primary-07: rgb(var(--primary-bg-color-rgb), 0.7);
--primary-08: rgb(var(--primary-bg-color-rgb), 0.8);
--primary-09: rgb(var(--primary-bg-color-rgb), 0.9);
--primary-bg-hover: rgb(var(--primary-bg-color-rgb), 0.5);
--primary-bg-border: rgb(var(--primary-bg-color-rgb));
--primary-transparentcolor: rgb(var(--primary-bg-color-rgb), 0.2);
--custom-white: #fff;
/* Gray Set */
--gray-100: #f9fafb;
--gray-200: #f2f4f5;
--gray-300: #e6eaeb;
--gray-400: #dbdfe1;
--gray-500: #949eb7;
--gray-600: #7987a1;
--gray-700: #4d5875;
--gray-800: #383853;
--gray-900: #323251;
/* White Set */
--white-05: rgba(255, 255, 255, 0.05);
--white-08: rgba(255, 255, 255, 0.08);
--white-1: rgba(255, 255, 255, 0.1);
--white-2: rgba(255, 255, 255, 0.2);
--white-3: rgba(255, 255, 255, 0.3);
--white-4: rgba(255, 255, 255, 0.4);
--white-5: rgba(255, 255, 255, 0.5);
--white-6: rgba(255, 255, 255, 0.6);
--white-7: rgba(255, 255, 255, 0.7);
--white-75: rgba(255, 255, 255, 0.75);
--white-8: rgba(255, 255, 255, 0.8);
--white-9: rgba(255, 255, 255, 0.9);
/* Black Set */
--black-05: rgba(0, 0, 0, 0.05);
--black-03: rgba(0, 0, 0, 0.03);
--black-1: rgba(0, 0, 0, 0.1);
--black-2: rgba(0, 0, 0, 0.2);
--black-3: rgba(0, 0, 0, 0.3);
--black-4: rgba(0, 0, 0, 0.4);
--black-5: rgba(0, 0, 0, 0.5);
--black-6: rgba(0, 0, 0, 0.6);
--black-7: rgba(0, 0, 0, 0.7);
--black-8: rgba(0, 0, 0, 0.8);
--black-9: rgba(0, 0, 0, 0.9);
/* General */
--background: #fcfdff;
--dark-theme: #071331;
--color: #031938;
--white: #fff;
--black: #000;
--muted: #a8b1bd;
--border: #f0f2fd;
--form-border: #e1e1e1;
--card-border-radius: 0.3rem;
--menu-bg: #ffffff;
--menu-primary: rgb(var(--primary-bg-color-rgb));
--header-primary: rgb(var(--primary-bg-color-rgb));
--header-bg: #fff;
--shadow-color: rgba(8, 21, 66, 0.08);
/* Float */
--float-start: left;
--float-end: right;
}
[dir=rtl] {
--float-start: right;
--float-end: left;
}
[data-theme-color=dark] {
--background: #141f3c;
--color: #dde5ed;
--white: #071331;
--black: #fff;
--muted: rgba(255, 255, 255, 0.4);
--light: #17171c;
--primary-bg-hover: rgba(255, 255, 255, 0.05);
--primary-bg-active: rgba(255, 255, 255, 0.1);
--gray-100: #110f0f;
--gray-200: #17171c;
--gray-300: #393946;
--gray-400: #505062;
--gray-500: #73738c;
--gray-600: #e3e3e8;
--gray-700: #ababba;
--gray-800: #c7c7d1;
--gray-900: #e3e3e8;
--border: rgba(255, 255, 255, 0.06);
--form-border: rgba(255, 255, 255, 0.15);
--shadow-color: rgba(8, 21, 66, 0.08);
--bg-hover: rgba(0, 0, 0, 0.2);
--bg-white: rgba(0, 0, 0, 0.2);
--white-1: rgba(0, 0, 0, 0.1);
--white-2: rgba(0, 0, 0, 0.2);
--white-3: rgba(0, 0, 0, 0.3);
--white-4: rgba(0, 0, 0, 0.4);
--white-5: rgba(0, 0, 0, 0.5);
--white-6: rgba(0, 0, 0, 0.6);
--white-7: rgba(0, 0, 0, 0.7);
--white-8: rgba(0, 0, 0, 0.8);
--white-9: rgba(0, 0, 0, 0.9);
--white-05: rgba(0, 0, 0, 0.05);
--white-08: rgba(0, 0, 0, 0.08);
--white-75: rgba(0, 0, 0, 0.075);
--black-1: rgba(255, 255, 255, 0.1);
--black-2: rgba(255, 255, 255, 0.2);
--black-3: rgba(255, 255, 255, 0.3);
--black-4: rgba(255, 255, 255, 0.4);
--black-5: rgba(255, 255, 255, 0.5);
--black-6: rgba(255, 255, 255, 0.6);
--black-7: rgba(255, 255, 255, 0.7);
--black-8: rgba(255, 255, 255, 0.8);
--black-9: rgba(255, 255, 255, 0.9);
--black-03: rgba(255, 255, 255, 0.03);
--black-05: rgba(255, 255, 255, 0.05);
--menu-bg: #071331;
--header-bg: #071331;
}
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
@-ms-viewport {
width: device-width;
}
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 16px;
height: 100%;
direction: ltr;
line-height: 1.15;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
body {
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
-webkit-font-feature-settings: "liga" 0;
font-feature-settings: "liga" 0;
position: relative;
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: var(--color);
text-align: start;
background: var(--background);
}
body *::-webkit-scrollbar {
width: 6px;
height: 6px;
transition: 0.3s background;
}
body *::-webkit-scrollbar-thumb {
background: var(--background);
}
body *:hover::-webkit-scrollbar-thumb {
background: #d4dbe1;
}
@-ms-viewport {
width: device-width;
}
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
p {
margin-block-start: 0;
margin-block-end: 1rem;
}
custom.js is the main javascript file having all the js code. File is located in assets/js/ folder. This file code is also well formatted and section in different respective function names.
Along with this chart library based js code and dashboard based js code are added in separate files for ease of use of user.
(function($) {
"use strict";
// ______________Active Class
$(".app-sidebar .toggle-menu.side-menu a").each(function() {
var pageUrl = window.location.href.split(/[?#]/)[0];
if (this.href == pageUrl) {
$(this).addClass("active");
$(this).parent().addClass("active"); // add active to li of the current link
$(this).parent().parent().prev().addClass("active"); // add active class to an anchor
$(this).parent().parent().prev().click(); // click the item to make it drop
}
});
// ______________ Modal
// $("#myModal").modal('show');
$("a[data-theme]").click(function() {
$("head link#theme").attr("href", $(this).data("theme"));
$(this).toggleClass('active').siblings().removeClass('active');
});
$("a[data-effect]").click(function() {
$("script#effect").attr("src", $(this).data("effect"));
$(this).toggleClass('active').siblings().removeClass('active');
});
// ______________Cover Image
$(".cover-image").each(function() {
var attr = $(this).attr('data-image-src');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).css('background', 'url(' + attr + ') center center');
}
});
// ______________Loader
$(window).on("load", function(e) {
$("#global-loader").fadeOut("slow");
})
// ______________Horizontal-menu Active Class
$(document).ready(function() {
$(".horizontalMenu-list li a").each(function() {
var pageUrl = window.location.href.split(/[?#]/)[0];
if (this.href == pageUrl) {
$(this).addClass("active");
$(this).parent().addClass("active"); // add active to li of the current link
$(this).parent().parent().prev().addClass("active"); // add active class to an anchor
$(this).parent().parent().prev().click(); // click the item to make it drop
}
});
});
--------
---------
-------------