v4.4Django & HTML
Bootstrap 5 responsive admin template
documented by Sean Ngu
Last Updated on: 12/July/2024
By: Sean Ngu
Thank you for purchasing my theme. I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
When you only need to include Studio compiled CSS or JS, below is the required core css and javascript.
<!-- Core CSS --> <link href="assets/css/vendor.min.css" rel="stylesheet"> <link href="assets/css/app.min.css" rel="stylesheet"> <!-- Core JS --> <script src="assets/js/vendor.min.js"></script> <script src="assets/js/app.min.js"></script>
If you wish to configure the scss files settings, follow the following step to install gulp in your operating system.
You may refer to their official documentation for how to setup the development environment.
Setup Guide
cd /your-path-url/template_html/ npm install gulp // generate plugins command gulp plugins
Make sure that you are running at least node 20.x and npm 10.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
File structure overview for Studio
template_html/
├── dist/ // generated html / css / js files
├── gulpfile.js // gulp settings
├── package.json // npm package installed
└── src/
├── html/ // html source files
├── img/ // image source files
├── js/ // javascript source files
└── scss/ // Studio scss files
Below is the general page structure and the required core css / js files for Studio Admin Template. The css / js files can be found via /dist/assets/ folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Studio</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
name="viewport">
<!-- core-css -->
<link href="assets/css/vendor.min.css" rel="stylesheet">
<link href="assets/css/app.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="app">
<!-- app-header -->
<header id="header" class="app-header">... </header>
<!-- app-top-nav -->
<top-nav id="top-nav" class="app-top-nav">... </top-nav>
<!-- app-sidebar -->
<sidebar id="sidebar" class="app-sidebar">... </sidebar>
<!-- app-content -->
<div id="content" class="app-content">...</div>
<!-- btn-scroll-top -->
<a href="#" data-toggle="scroll-to-top" class="btn-scroll-top fade"><i class="fa fa-arrow-up"></i></a>
</div>
<!-- BEGIN core-js -->
<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/app.min.js"></script>
</body>
</html>
All the css files used in Studio has been compiled into two files app.min.css and vendor.min.css by using gulp. If you are not using gulp, copy over the folder /dist/assets/css and /dist/assets/webfonts into your application assets folder.
vendor.min.cssapp.min.css<!-- core-css --> <link href="assets/css/vendor.min.css" rel="stylesheet"> <link href="assets/css/app.min.css" rel="stylesheet"> <!-- OR without vendor.min.css --> <link href="assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"> <link href="assets/plugins/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> <link href="assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet"> <link href="assets/plugins/animate.css/animate.min.css" rel="stylesheet"> <link href="assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet"> <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet"> <link href="assets/css/app.min.css" rel="stylesheet"> <!-- core-css required folder --> /dist/assets/css /dist/assets/webfonts
This theme compiles 6 javascript library into two files app.min.js and vendor.min.js by using gulp. If you are not using gulp, copy over the folder /dist/assets/js into your application assets folder.
vendor.min.jsapp.min.js<!-- core-js --> <script src="assets/js/vendor.min.js"></script> <script src="assets/js/app.min.js"></script> <!-- OR without vendor.min.js --> <script src="assets/plugins/pace-js/pace.min.js"></script> <script src="assets/plugins/jquery/dist/jquery.min.js"></script> <script src="assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script> <script src="assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script> <script src="assets/plugins/js-cookie/dist/js.cookie.min.js"></script> <script src="assets/js/app.min.js"></script> <!-- core-js required folder --> /dist/assets/js
Sidebar minified:
<div id="app" class="app app-sidebar-minified"> ... </div>
Full height:
<div id="app" class="app app-content-full-height">
...
<div id="content" class="app-content" data-scrollbar="true" data-height="100%"
data-skip-mobile="true">
...
</div>
</div>
Full width:
<div id="app" class="app app-content-full-width"> ... </div>
Fixed footer:
<div id="app" class="app app-footer-fixed">
...
<div id="footer" class="app-footer">
© 2024 seanTheme All Right Reserved
</div>
</div>
Pace Loading Bar at Top
<body class="pace-top"> ... </body>
Boxed Layout
<body class="app-with-bg pace-top">
<div id="app" class="app app-boxed-layout">
...
</div>
</body>
Top Nav (without Sidebar)
<body>
<div id="app" class="app app-with-top-nav app-without-sidebar">
...
</div>
</body>
Top Nav (with Sidebar)
<body>
<div id="app" class="app app-with-top-nav">
...
</div>
</body>
Boxed Layout with Top Nav & Sidebar
<body class="app-with-bg pace-top">
<div id="app" class="app app-with-top-nav app-boxed-layout">
...
</div>
</body>
Add the theme class to the <body> tag in order to change the theme color.
<body class="theme-red">...</body> <body class="theme-pink">...</body> <body class="theme-orange">...</body> <body class="theme-yellow">...</body> <body class="theme-lime">...</body> <body class="theme-green">...</body> <body class="theme-teal">...</body> <body class="theme-cyan">...</body> <body class="theme-blue">...</body> <body class="theme-purple">...</body> <body class="theme-indigo">...</body> <body class="theme-black">...</body> <body class="theme-gray-100">...</body> <body class="theme-gray-200">...</body> <body class="theme-gray-300">...</body> <body class="theme-gray-400">...</body> <body class="theme-gray-500">...</body> <body class="theme-gray-600">...</body> <body class="theme-gray-700">...</body> <body class="theme-gray-800">...</body> <body class="theme-gray-900">...</body>
If you wish to enable the dark mode instead, you can easily do so by adding the data-bs-theme="dark" attribute from the HTML tag.
This will disable the default dark mode and enable the light mode theme.
Please note that once you add the data-bs-theme="dark" attribute,
the dark mode theme will persist even if the user refreshes the page or navigates to a different page within the application.
<!DOCTYPE html> <html lang="en"> </html>to
<!DOCTYPE html> <html lang="en" data-bs-theme="dark"> </html>
With this example, the data-bs-theme="dark" attribute has been added to html tag. This will enable the dark mode to the entire page.
OR
If you want to apply dark / light mode to a single component only, you can add the data-bs-theme="dark|light" attribute to that component.
<div class="card" data-bs-theme="dark">
<div class="card-body">
<!-- your component content here -->
</div>
</div>
To enable RTL mode, follow these steps:
/src/_variables.scss file in your code editor.$enable-rtl variable and change its value to true:
$enable-rtl: true;This will enable RTL mode for your application.
app.min.css file:
gulp cssThis will regenerate the app.min.css file with the changes you made to the
$enable-rtl variable.
Global Variables
The /src/_variables.scss file contains the variables that control the styles of your application.
To edit these variables, navigate to the /src/_variables.scss file in your code editor and modify the values of the variables to suit your needs.
<!-- global variable --> /src/_variables.scss
Dark Mode Variables
The /src/_variables-dark.scss file contains the variables that control the styles for dark mode.
These variables are used in conjunction with the variables in the /src/_variables.scss file to provide different values for light and dark modes.
<!-- dark mode variable --> /src/_variables-dark.scss
I've used the following images, icons or other files as listed.
jQuery Plugins
Photos