gentelella

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-default.css"> <link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet"> <style id="jtd-nav-activation"> .site-nav > ul.nav-list:first-child > li:not(:nth-child(7)) > a, .site-nav > ul.nav-list:first-child > li > ul > li a { background-image: none; } .site-nav > ul.nav-list:not(:first-child) a, .site-nav li.external a { background-image: none; } .site-nav > ul.nav-list:first-child > li:nth-child(7) > a { font-weight: 600; text-decoration: none; }.site-nav > ul.nav-list:first-child > li:nth-child(7) > button svg { transform: rotate(-90deg); }.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(7) > ul.nav-list { display: block; } </style> <script src="/gentelella/assets/js/vendor/lunr.min.js"></script> <script src="/gentelella/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="/gentelella/favicon.ico" type="image/x-icon">  <title>Customization Guide | Gentelella Admin Template</title> <meta name="generator" content="Jekyll v3.9.5" /> <meta property="og:title" content="Customization Guide" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" /> <meta property="og:description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" /> <link rel="canonical" href="http://localhost:4000/gentelella/customization/" /> <meta property="og:url" content="http://localhost:4000/gentelella/customization/" /> <meta property="og:site_name" content="Gentelella Admin Template" /> <meta property="og:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" /> <meta property="twitter:title" content="Customization Guide" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"Customization Guide","image":"http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg","url":"http://localhost:4000/gentelella/customization/"}</script>  </head> <body> <a class="skip-to-main" href="#main-content">Skip to main content</a> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol>  <symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"> <title id="svg-external-link-title">(external link)</title> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol>  <symbol id="svg-copy" viewBox="0 0 16 16"> <title>Copy</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> </svg> </symbol> <symbol id="svg-copied" viewBox="0 0 16 16"> <title>Copied</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16"> <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header" role="banner"> <a href="/gentelella/" class="site-title lh-tight"> Gentelella Admin Template </a> <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false"> <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg> </button> </div> <nav aria-label="Main" id="site-nav" class="site-nav"> <ul class="nav-list"><li class="nav-list-item"><a href="/gentelella/" class="nav-list-link">Gentelella Admin Template Documentation</a></li><li class="nav-list-item"><a href="/gentelella/installation/" class="nav-list-link">Installation Guide</a></li><li class="nav-list-item"><a href="/gentelella/configuration/" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/gentelella/components/" class="nav-list-link">Components Guide</a></li><li class="nav-list-item"><a href="/gentelella/performance/" class="nav-list-link">Performance Guide</a></li><li class="nav-list-item"><a href="/gentelella/deployment/" class="nav-list-link">Deployment Guide</a></li><li class="nav-list-item"><a href="/gentelella/customization/" class="nav-list-link">Customization Guide</a></li><li class="nav-list-item"><a href="/gentelella/api-integration/" class="nav-list-link">API Integration</a></li></ul> </nav> <footer class="site-footer"> This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll. </footer> </div> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search" role="search"> <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gentelella Admin Template" aria-label="Search Gentelella Admin Template" autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> <nav aria-label="Auxiliary" class="aux-nav"> <ul class="aux-nav-list"> <li class="aux-nav-list-item"> <a href="//github.com/puikinsh/gentelella" class="site-button" > Gentelella on GitHub </a> </li> <li class="aux-nav-list-item"> <a href="//colorlib.com" class="site-button" > Colorlib </a> </li> </ul> </nav> </div> <div class="main-content-wrap"> <div id="main-content" class="main-content"> <main> <h1 class="no_toc" id="customization-guide"> <a href="#customization-guide" class="anchor-heading" aria-labelledby="customization-guide"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Customization Guide </h1> Learn how to customize and extend Gentelella Admin Template to match your brand and requirements <h2 class="no_toc text-delta" id="table-of-contents"> <a href="#table-of-contents" class="anchor-heading" aria-labelledby="table-of-contents"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Table of contents </h2> <ol id="markdown-toc"> <li><a href="#branding-and-theming" id="markdown-toc-branding-and-theming">Branding and Theming</a> <ol> <li><a href="#color-scheme-customization" id="markdown-toc-color-scheme-customization">Color Scheme Customization</a> <ol> <li><a href="#primary-colors" id="markdown-toc-primary-colors">Primary Colors</a></li> <li><a href="#dark-theme-support" id="markdown-toc-dark-theme-support">Dark Theme Support</a></li> <li><a href="#theme-toggle-implementation" id="markdown-toc-theme-toggle-implementation">Theme Toggle Implementation</a></li> </ol> </li> <li><a href="#logo-and-branding" id="markdown-toc-logo-and-branding">Logo and Branding</a> <ol> <li><a href="#custom-logo-implementation" id="markdown-toc-custom-logo-implementation">Custom Logo Implementation</a></li> </ol> </li> <li><a href="#typography-customization" id="markdown-toc-typography-customization">Typography Customization</a> <ol> <li><a href="#custom-font-integration" id="markdown-toc-custom-font-integration">Custom Font Integration</a></li> </ol> </li> </ol> </li> <li><a href="#layout-customization" id="markdown-toc-layout-customization">Layout Customization</a> <ol> <li><a href="#sidebar-modifications" id="markdown-toc-sidebar-modifications">Sidebar Modifications</a> <ol> <li><a href="#collapsible-sidebar" id="markdown-toc-collapsible-sidebar">Collapsible Sidebar</a></li> <li><a href="#custom-menu-items" id="markdown-toc-custom-menu-items">Custom Menu Items</a></li> </ol> </li> <li><a href="#header-customization" id="markdown-toc-header-customization">Header Customization</a> <ol> <li><a href="#custom-navigation-bar" id="markdown-toc-custom-navigation-bar">Custom Navigation Bar</a></li> <li><a href="#search-functionality" id="markdown-toc-search-functionality">Search Functionality</a></li> </ol> </li> </ol> </li> <li><a href="#component-customization" id="markdown-toc-component-customization">Component Customization</a> <ol> <li><a href="#custom-dashboard-widgets" id="markdown-toc-custom-dashboard-widgets">Custom Dashboard Widgets</a> <ol> <li><a href="#widget-factory" id="markdown-toc-widget-factory">Widget Factory</a></li> <li><a href="#widget-configuration" id="markdown-toc-widget-configuration">Widget Configuration</a></li> </ol> </li> <li><a href="#form-builder" id="markdown-toc-form-builder">Form Builder</a> <ol> <li><a href="#dynamic-form-generator" id="markdown-toc-dynamic-form-generator">Dynamic Form Generator</a></li> </ol> </li> </ol> </li> <li><a href="#advanced-customization" id="markdown-toc-advanced-customization">Advanced Customization</a> <ol> <li><a href="#plugin-system" id="markdown-toc-plugin-system">Plugin System</a> <ol> <li><a href="#plugin-architecture" id="markdown-toc-plugin-architecture">Plugin Architecture</a></li> <li><a href="#example-plugin" id="markdown-toc-example-plugin">Example Plugin</a></li> </ol> </li> </ol> </li> <li><a href="#next-steps" id="markdown-toc-next-steps">Next Steps</a></li> </ol><hr /> <h2 id="branding-and-theming"> <a href="#branding-and-theming" class="anchor-heading" aria-labelledby="branding-and-theming"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Branding and Theming </h2> <h3 id="color-scheme-customization"> <a href="#color-scheme-customization" class="anchor-heading" aria-labelledby="color-scheme-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Color Scheme Customization </h3> <h4 id="primary-colors"> <a href="#primary-colors" class="anchor-heading" aria-labelledby="primary-colors"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Primary Colors </h4> Override Bootstrap variables in <code class="language-plaintext highlighter-rouge">src/scss/variables.scss</code>: <div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Brand colors $primary: #73879C; // Main brand color $secondary: #6c757d; // Secondary color $success: #26B99A; // Success actions $info: #3498DB; // Information $warning: #F39C12; // Warnings $danger: #E74C3C; // Errors // Sidebar colors $sidebar-bg: #2A3F54; $sidebar-text: #E7E7E7; $sidebar-text-hover: #ffffff; $sidebar-active-bg: $primary; // Dashboard colors $dashboard-bg: #F7F7F7; $card-bg: #ffffff; $card-border: #E6E9ED; // Text colors $text-primary: #73879C; $text-secondary: #ABB1B7; $text-dark: #566573; </code></pre></div></div> <h4 id="dark-theme-support"> <a href="#dark-theme-support" class="anchor-heading" aria-labelledby="dark-theme-support"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Dark Theme Support </h4> Create <code class="language-plaintext highlighter-rouge">src/scss/themes/_dark.scss</code>: <div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Dark theme variables [data-theme="dark"] { --bs-body-bg: #1a1a1a; --bs-body-color: #ffffff; --bs-card-bg: #2d2d2d; --bs-border-color: #404040; // Sidebar dark theme .left_col { background: #0F1419; .nav-link { color: #CCCCCC; &:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } &.active { background: var(--bs-primary); color: #ffffff; } } } // Cards and panels .x_panel { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); .x_title { border-bottom: 1px solid var(--bs-border-color); h2 { color: var(--bs-body-color); } } } // Tables .table { --bs-table-bg: var(--bs-card-bg); --bs-table-border-color: var(--bs-border-color); color: var(--bs-body-color); } // Forms .form-control { background-color: #3d3d3d; border-color: var(--bs-border-color); color: var(--bs-body-color); &:focus { background-color: #4d4d4d; border-color: var(--bs-primary); } } } </code></pre></div></div> <h4 id="theme-toggle-implementation"> <a href="#theme-toggle-implementation" class="anchor-heading" aria-labelledby="theme-toggle-implementation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Theme Toggle Implementation </h4> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/js/theme-toggle.js class ThemeToggle { constructor() { this.theme = localStorage.getItem('theme') || 'light'; this.init(); } init() { // Apply saved theme document.documentElement.setAttribute('data-theme', this.theme); // Create toggle button this.createToggleButton(); // Listen for toggle events document.addEventListener('theme-toggle', this.toggle.bind(this)); } createToggleButton() { const button = document.createElement('button'); button.className = 'btn btn-outline-secondary theme-toggle'; button.innerHTML = this.theme === 'dark' ? '' : ''; button.addEventListener('click', () => this.toggle()); // Add to navbar const navbar = document.querySelector('.navbar-nav'); if (navbar) { const li = document.createElement('li'); li.className = 'nav-item'; li.appendChild(button); navbar.appendChild(li); } } toggle() { this.theme = this.theme === 'light' ? 'dark' : 'light'; document.documentElement.setAttribute('data-theme', this.theme); localStorage.setItem('theme', this.theme); // Update button icon const button = document.querySelector('.theme-toggle'); if (button) { button.innerHTML = this.theme === 'dark' ? '' : ''; } // Trigger custom event document.dispatchEvent(new CustomEvent('theme-changed', { detail: { theme: this.theme } })); } getTheme() { return this.theme; } } // Initialize theme toggle new ThemeToggle(); </code></pre></div></div> <h3 id="logo-and-branding"> <a href="#logo-and-branding" class="anchor-heading" aria-labelledby="logo-and-branding"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Logo and Branding </h3> <h4 id="custom-logo-implementation"> <a href="#custom-logo-implementation" class="anchor-heading" aria-labelledby="custom-logo-implementation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Logo Implementation </h4> <div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/scss/components/_logo.scss .site_title { display: flex; align-items: center; padding: 15px 20px; color: $sidebar-text; text-decoration: none; .logo { width: 32px; height: 32px; margin-right: 10px; img { width: 100%; height: 100%; object-fit: contain; } } .brand-text { font-size: 18px; font-weight: 600; .brand-suffix { font-size: 12px; font-weight: 400; opacity: 0.8; display: block; line-height: 1; } } } // Responsive logo @media (max-width: 768px) { .site_title { .brand-text { display: none; } } } </code></pre></div></div> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <a href="index.html" class="site_title"> <div class="logo"> <img src="/images/logo.svg" alt="Your Brand"> </div> <span class="brand-text"> Your Brand <small class="brand-suffix">Admin Panel </a> </code></pre></div></div> <h3 id="typography-customization"> <a href="#typography-customization" class="anchor-heading" aria-labelledby="typography-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Typography Customization </h3> <h4 id="custom-font-integration"> <a href="#custom-font-integration" class="anchor-heading" aria-labelledby="custom-font-integration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Font Integration </h4> <div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/scss/base/_typography.scss // Import custom fonts @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); // Typography variables $font-family-base: 'Inter', 'Segoe UI', Roboto, sans-serif; $font-family-heading: 'Inter', 'Segoe UI', Roboto, sans-serif; $font-family-monospace: 'SF Mono', Monaco, 'Cascadia Code', monospace; // Font sizes $font-size-xs: 0.75rem; // 12px $font-size-sm: 0.875rem; // 14px $font-size-base: 1rem; // 16px $font-size-lg: 1.125rem; // 18px $font-size-xl: 1.25rem; // 20px // Font weights $font-weight-light: 300; $font-weight-normal: 400; $font-weight-medium: 500; $font-weight-semibold: 600; $font-weight-bold: 700; // Line heights $line-height-tight: 1.25; $line-height-normal: 1.5; $line-height-relaxed: 1.75; // Apply typography body { font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-normal; line-height: $line-height-normal; } // Headings h1, h2, h3, h4, h5, h6 { font-family: $font-family-heading; font-weight: $font-weight-semibold; line-height: $line-height-tight; margin-bottom: 0.5em; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; } // Code and monospace code, pre { font-family: $font-family-monospace; } </code></pre></div></div><hr /> <h2 id="layout-customization"> <a href="#layout-customization" class="anchor-heading" aria-labelledby="layout-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Layout Customization </h2> <h3 id="sidebar-modifications"> <a href="#sidebar-modifications" class="anchor-heading" aria-labelledby="sidebar-modifications"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Sidebar Modifications </h3> <h4 id="collapsible-sidebar"> <a href="#collapsible-sidebar" class="anchor-heading" aria-labelledby="collapsible-sidebar"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Collapsible Sidebar </h4> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/js/sidebar.js class Sidebar { constructor() { this.sidebar = document.querySelector('.left_col'); this.mainContent = document.querySelector('.right_col'); this.toggleBtn = document.querySelector('.sidebar-toggle'); this.isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true'; this.init(); } init() { // Apply saved state if (this.isCollapsed) { this.collapse(); } // Create toggle button if it doesn't exist if (!this.toggleBtn) { this.createToggleButton(); } // Add event listeners this.toggleBtn?.addEventListener('click', () => this.toggle()); // Handle responsive behavior this.handleResize(); window.addEventListener('resize', () => this.handleResize()); } createToggleButton() { const button = document.createElement('button'); button.className = 'btn btn-link sidebar-toggle'; button.innerHTML = ''; // Add to navbar const navbar = document.querySelector</