Introduction

Hello & Welcome! Thank you for purchasing!

If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form. Thank you so much!

Smart University is a modern, feature‑rich and fully responsive Bootstrap Admin & Dashboard template built specifically for schools, colleges and universities.

The template provides a complete back‑office interface for education institutes: you can manage students, professors, staff, departments, courses, academic years, fees, hostels, library assets, exams, report cards and much more from a single, consistent admin panel.

The layout is built on Bootstrap 5 with clean HTML, CSS and JavaScript, using reusable components, cards, tables, charts and forms. It is ideal for building a Student Information System (SIS), college/university ERP or any education‑focused admin dashboard.

• Built with Bootstrap v5.x and modern HTML5/CSS3
• Clean & modern design for schools, colleges and universities
• Multiple layouts and themes (Light, Dark, RTL)
• Responsive and mobile‑friendly pages
• Student Information Management (add, edit and list students)
• Course, program and department management
• Professor / faculty and staff management modules
• Academic year, timetable and class schedule management
• Library management (books, categories, issue/return pages)
• Hostel and room allocation management
• Fees and payment management (fee setup, collections and reports)
• Attendance, examinations and report card pages
• Full calendar integration for events, holidays and schedules
• Dynamic charts and analytics (ApexCharts, Chart.js, ECharts, etc.)
• Ready‑to‑use forms, validations, wizards and UI components
• Built‑in email, chat and notification UI
• Well‑structured HTML for easy customization to your institution

smart-university\
├── documents\                       Documentation (this guide)
└── source\                          Main HTML admin template
    ├── assets\
    │   ├── css\                     Core styles
    │   │   ├── theme\              Theme variants (light/dark, RTL, etc.)
    │   │   ├── pages\              Page‑level styles
    │   │   ├── plugins.min.css
    │   │   ├── theme_style.css
    │   │   ├── style.css
    │   │   └── responsive.css
    │   ├── js\
    │   │   ├── app.js              General UI behaviour and helpers
    │   │   ├── config.js           Theme configuration (SmartConfig / ThemeStorage)
    │   │   ├── early-theme-init.js Early theme and direction initialisation
    │   │   └── pages\              Page‑specific scripts (charts, tables, forms, etc.)
    │   ├── img\                    Logos, banners, sliders, avatars and flags
    │   └── plugins\                Third‑party libraries (ApexCharts, DataTables, FullCalendar, etc.)
    ├── fonts\                      Icon fonts (Font Awesome, Material Icons, Simple Line Icons)
    ├── index.html                  Main dashboard
    ├── all_students.html           Student listing page
    ├── add_student.html            Add/edit student form
    ├── all_courses.html            Course listing page
    ├── add_course.html             Add course form
    ├── all_professors.html         Professor listing page
    ├── add_professor.html          Add professor form
    ├── add_library.html            Library management pages
    ├── all_hostels.html            Hostel and room allocation pages
    ├── system_settings.html        Global institution settings
    └── ...                         Many other academic and utility pages
                

Smart University is a static HTML/CSS/JS template, so installation is straightforward:

1. Unzip the package: Extract the downloaded zip file to your local drive.
2. Open in Editor: Open the source folder in your favorite code editor (VS Code, Sublime, etc.).
3. Run locally: You can open any .html file directly in your browser. For better performance with modules, use a local server (like Live Server extension in VS Code).

Smart University uses two small configuration scripts located in source/assets/js/:

• config.js stores the current theme in window.SmartConfig and provides a ThemeStorage helper for saving/loading user preferences.
• early-theme-init.js runs early on every page to apply the saved theme and direction before the page is visible.

Template presets (templateConfigs in config.js)

When the template loads for the first time, the default look & feel comes from the templateConfigs object in config.js, not directly from SmartConfig. A simplified version looks like this:

var DEFAULT_TEMPLATE_KEY = "ltr-light";

var templateConfigs = {
  "ltr-light": {
    theme: "light",
    direction: "ltr",
    headerColor: "header-white",
    logoColor: "logo-cyan",
    sidebarColor: "white-sidebar-color"
  },
  "ltr-dark": {
    theme: "dark",
    direction: "ltr",
    headerColor: "header-dark",
    logoColor: "logo-dark",
    sidebarColor: "dark-sidebar-color"
  },
  "rtl-light": {
    theme: "light",
    direction: "rtl",
    headerColor: "header-cyan",
    logoColor: "logo-cyan",
    sidebarColor: "cyan-sidebar-color"
  },
  "rtl-dark": {
    theme: "dark",
    direction: "rtl",
    headerColor: "header-dark",
    logoColor: "logo-dark",
    sidebarColor: "dark-sidebar-color"
  }
};
                

ThemeStorage.init() picks the preset referenced by DEFAULT_TEMPLATE_KEY (for example "ltr-light" or "ltr-dark") and copies its values into SmartConfig for the current user. If you want to change the default theme when the template is first used, adjust DEFAULT_TEMPLATE_KEY and/or the values inside the corresponding entry in templateConfigs, rather than editing SmartConfig directly.

SmartConfig (runtime state)

SmartConfig is a global object that always holds the current theme state for the open page (theme mode, direction, header/sidebar/logo colors). It is updated from templateConfigs on first load and then changed by the theme/RTL toggles and saved via ThemeStorage.saveConfig(). Normally you do not need to edit SmartConfig manually in the code.

ThemeStorage keys (config.js)

ThemeStorage uses dedicated keys in sessionStorage so different theme combinations (and even different browser tabs) do not overwrite each other:

ACTIVE_TEMPLATE_KEY = "smart_active_template"
templateKey = "smart_theme_" + direction + "_" + theme
                

For example, light LTR settings are stored under smart_theme_ltr_light in sessionStorage. Calling ThemeStorage.saveConfig() saves the current SmartConfig, and ThemeStorage.init() restores it when the page loads in that tab.

Early theme initialisation (early-theme-init.js)

This script is included at the top of every page (before styles) and:

• Reads the active theme and direction from smart_active_template in sessionStorage.
• Sets the dir attribute on the <html> element to ltr or rtl.
• Removes any existing header, sidebar, logo and theme classes from <body> and applies the correct ones (for example header-dark, dark-sidebar-color, logo-dark for dark mode).

When the user changes options from the built‑in setting panel, the new values are saved through ThemeStorage so all pages open with the same appearance.

Changing default theme for your institution

1. Open source/assets/js/config.js.
2. Set DEFAULT_TEMPLATE_KEY to one of the available presets: "ltr-light", "ltr-dark", "rtl-light", "rtl-dark".
3. (Optional) In the templateConfigs entry that matches your chosen DEFAULT_TEMPLATE_KEY, adjust headerColor, logoColor and sidebarColor using the built‑in classes: header-white, header-dark, header-blue, header-indigo, header-cyan, header-green, header-red and white-sidebar-color, dark-sidebar-color, blue-sidebar-color, indigo-sidebar-color, cyan-sidebar-color, green-sidebar-color, red-sidebar-color.

These values become the new defaults for all users in your school or college. If you maintain separate “light” and “dark” copies of the template in different folders, you can set a different DEFAULT_TEMPLATE_KEY in each copy so that only this one line changes per variant.

Institution / school settings

Beyond visual settings, institution‑specific details are configured on the System Settings page (system_settings.html):

• Institution name and tagline (for example “Smart University – Excellence in Education”).
• Address, phone number, email and website.
• Default academic year and other global academic preferences.

These values are reused across report cards, headers and printable documents (such as view_report_card.html), so update them first when adapting the template to a new school or college.

We have used the following open-source plugins and resources:

    -----------------------------------------------------------------------------------------
    Version 4.0.0 - March 26th, 2026
    -----------------------------------------------------------------------------------------               
    Added:
    Add 16 new pages for material design components.

    -- New page - schedule calendar page
    -- New page - All schedules page
    -- New page - Add schedule page
    -- New page - Mark attendance page
    -- New page - All attendance page
    -- New page - Student attendance history page
    -- New page - Enter grades page
    -- New page - View grades page
    -- New page - Generate Report Card page
    -- New page - View report cards page
    -- New page - General settings page
    -- New page - Academic Year settings page
    -- New page - All Hostels page
    -- New page - Manage rooms page
    -- New page - Allocate room page
    -- New page - Student accommodation page
    
    Update:
    -- Dashboard design update
    -- Documentation

    -----------------------------------------------------------------------------------------
    Version 3.0.0 - March 04th, 2024
    -----------------------------------------------------------------------------------------
    -- Update Bootstrap and jQuery version
    -- Update Apexchart, amchart and echart version
    -- Update all other dependency to latest version
    -- Minor Bug Solve
    -----------------------------------------------------------------------------------------
    Version 2.1 - March 17th, 2022
    -----------------------------------------------------------------------------------------
    -- Update Bootstrap and jQuery version
    -- Change template Design
    -- Support font awesome 6.1
    -- Minor Bug Solve
    -----------------------------------------------------------------------------------------
    Version 2.0 - February 17th, 2021
    -----------------------------------------------------------------------------------------
    -- Update Bootstrap Version 4.1.3 to Bootstrap 5.0.
    -- Add New Features In Calendar Page
    -- Minor Bug Solve
    -----------------------------------------------------------------------------------------
    Version 1.5 - October 27th, 2018
    -----------------------------------------------------------------------------------------
    -- Add RTL Full Version Template
    -- Add Export Data Table Page
    -- Add Child Row Data Table Page
    -- Minor Bug Solve
    -----------------------------------------------------------------------------------------
    Version 1.4 - September 18th, 2018
    -----------------------------------------------------------------------------------------
    -- Update bootstrap 4.1.3
    -- Change full layout menu options
    -- Date time picker bug solve
    -- Form elements bug solve
    -- Offline simple line icons
    -----------------------------------------------------------------------------------------
    Version 1.3 - June 16th, 2018
    -----------------------------------------------------------------------------------------
     -- Update Bootstrap Version 4.0 to Bootstrap 4.1.1.
     -- Update Jquery version 3.2.1 to 3.3.1.
     -- Add Left Menu Scrollbar.
     -- Data Table Width Bug Solve.
     -- Full Screen Scroll Bug Solve.
     -- Add new pages sign_up.html & forgot_password.html and change extra page design.
    -----------------------------------------------------------------------------------------
    Version 1.2 - March 24rd, 2018
    -----------------------------------------------------------------------------------------
     -- Update Bootstrap Version 4 Beta to Stable Bootstrap 4.
     -- Add new page toast notification.
     -- Add Full Screen Window Button In Header.
     -- Add Offline Fonts.
     -- Chat sidebar close on esc key and focus lost.
     -- Card Refresh Button Bug Solve.
     -- Calendar Button Changes.
     -- Material Date Picker Alignment Bug Solve.
    -----------------------------------------------------------------------------------------
    Version 1.0 - Jan 23rd, 2018
    -----------------------------------------------------------------------------------------
    -- Initial Release
                

If you have any questions or need customization help, please contact our support team.

Contact Support