Skip to content

Commit 188244d

Browse files
puikinshpuikinsh
committed
Removed inline CSS
1 parent f9802c1 commit 188244d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1554
-214
lines changed

‎README.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,80 @@ Built with mobile-first approach:
160160
}
161161
```
162162

163+
### Color Schemes (2026 Modern Collection)
164+
165+
Gentelella includes 10 professionally designed color schemes that users can switch between at runtime. Each theme is carefully crafted for accessibility and modern aesthetics.
166+
167+
#### Available Themes
168+
169+
| Theme | Primary Color | Description | Best For |
170+
| ------------- | ------------------- | ---------------------- | -------------------------- |
171+
| **Default** | Emerald `#10b981` | Modern emerald green | General purpose |
172+
| **Ocean** | Sky `#0ea5e9` | Deep blue professional | Corporate, enterprise |
173+
| **Sunset** | Orange `#f97316` | Warm coral/orange | Creative, marketing |
174+
| **Lavender** | Violet `#8b5cf6` | Soft purple/violet | Design tools, SaaS |
175+
| **Forest** | Green `#22c55e` | Natural green tones | Health, environmental |
176+
| **Midnight** | Cyan `#22d3ee` | Dark mode optimized | Developer tools, night use |
177+
| **Rose** | Pink `#ec4899` | Modern pink/magenta | Fashion, lifestyle |
178+
| **Slate** | Slate `#64748b` | Neutral monochrome | Content-focused apps |
179+
| **Indigo** | Indigo `#6366f1` | Classic tech blue | Tech, productivity |
180+
| **Teal** | Teal `#14b8a6` | Calming teal | Healthcare, wellness |
181+
182+
#### Usage
183+
184+
##### HTML Attribute (Recommended)
185+
186+
```html
187+
<html data-theme="ocean">
188+
```
189+
190+
##### CSS Class
191+
192+
```html
193+
<body class="theme-ocean">
194+
```
195+
196+
##### JavaScript Theme Switcher
197+
198+
```javascript
199+
// Set theme
200+
function setTheme(themeName) {
201+
document.documentElement.setAttribute('data-theme', themeName);
202+
localStorage.setItem('theme', themeName);
203+
}
204+
205+
// Load saved theme on page load
206+
function loadTheme() {
207+
const savedTheme = localStorage.getItem('theme');
208+
if (savedTheme) {
209+
document.documentElement.setAttribute('data-theme', savedTheme);
210+
}
211+
}
212+
213+
// Initialize
214+
loadTheme();
215+
216+
// Switch to ocean theme
217+
setTheme('ocean');
218+
```
219+
220+
##### Theme Selector Dropdown Example
221+
222+
```html
223+
<select onchange="setTheme(this.value)">
224+
<option value="">Default (Emerald)</option>
225+
<option value="ocean">Ocean</option>
226+
<option value="sunset">Sunset</option>
227+
<option value="lavender">Lavender</option>
228+
<option value="forest">Forest</option>
229+
<option value="midnight">Midnight (Dark)</option>
230+
<option value="rose">Rose</option>
231+
<option value="slate">Slate</option>
232+
<option value="indigo">Indigo</option>
233+
<option value="teal">Teal</option>
234+
</select>
235+
```
236+
163237
### Adding Features
164238

165239
```javascript

‎production/calendar.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ <h3>Live On</h3>
163163
<i class="fas fa-envelope"></i>
164164
<span class="badge bg-success">6</span>
165165
</a>
166-
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list" style="min-width: 320px;" role="menu" aria-labelledby="navbarDropdown1">
166+
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list dropdown-menu-lg" role="menu" aria-labelledby="navbarDropdown1">
167167
<li class="nav-item">
168168
<a class="dropdown-item">
169169
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
@@ -221,7 +221,7 @@ <h3>Live On</h3>
221221
<a href="#" role="button" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
222222
<img src="images/img.jpg" alt="">John Doe
223223
</a>
224-
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu" style="min-width: 200px;" aria-labelledby="navbarDropdown">
224+
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu dropdown-menu-sm" aria-labelledby="navbarDropdown">
225225
<a class="dropdown-item" href="#" role="button"> Profile</a>
226226
<a class="dropdown-item" href="#" role="button">
227227
<span class="badge bg-danger float-end">50%</span>

‎production/chartjs.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ <h3>Live On</h3>
172172
<i class="fas fa-envelope"></i>
173173
<span class="badge bg-green">6</span>
174174
</a>
175-
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list" style="min-width: 320px;" role="menu" aria-labelledby="navbarDropdown1">
175+
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list dropdown-menu-lg" role="menu" aria-labelledby="navbarDropdown1">
176176
<li class="nav-item">
177177
<a class="dropdown-item">
178178
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
@@ -235,7 +235,7 @@ <h3>Live On</h3>
235235
<a href="#" role="button" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
236236
<img src="images/img.jpg" alt="">John Doe
237237
</a>
238-
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu" style="min-width: 200px;" aria-labelledby="navbarDropdown">
238+
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu dropdown-menu-sm" aria-labelledby="navbarDropdown">
239239
<a class="dropdown-item" href="#" role="button">Profile</a>
240240
<a class="dropdown-item" href="#" role="button">Settings</a>
241241
<a class="dropdown-item" href="#" role="button">Help</a>

‎production/contacts.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ <h3>Live On</h3>
156156
<i class="fas fa-envelope"></i>
157157
<span class="badge bg-green">6</span>
158158
</a>
159-
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list" style="min-width: 320px;" role="menu" aria-labelledby="navbarDropdown1">
159+
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list dropdown-menu-lg" role="menu" aria-labelledby="navbarDropdown1">
160160
<li class="nav-item">
161161
<a class="dropdown-item">
162162
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
@@ -214,7 +214,7 @@ <h3>Live On</h3>
214214
<a href="#" role="button" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
215215
<img src="images/img.jpg" alt="">John Doe
216216
</a>
217-
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu" style="min-width: 200px;" aria-labelledby="navbarDropdown">
217+
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu dropdown-menu-sm" aria-labelledby="navbarDropdown">
218218
<a class="dropdown-item" href="#" role="button"> Profile</a>
219219
<a class="dropdown-item" href="#" role="button">
220220
<span class="badge bg-danger float-end">50%</span>

‎production/e_commerce.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ <h3>Live On</h3>
156156
<i class="fas fa-envelope"></i>
157157
<span class="badge bg-green">6</span>
158158
</a>
159-
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list" style="min-width: 320px;" role="menu" aria-labelledby="navbarDropdown1">
159+
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list dropdown-menu-lg" role="menu" aria-labelledby="navbarDropdown1">
160160
<li class="nav-item">
161161
<a class="dropdown-item">
162162
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
@@ -214,7 +214,7 @@ <h3>Live On</h3>
214214
<a href="#" role="button" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
215215
<img src="images/img.jpg" alt="">John Doe
216216
</a>
217-
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu" style="min-width: 200px;" aria-labelledby="navbarDropdown">
217+
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu dropdown-menu-sm" aria-labelledby="navbarDropdown">
218218
<a class="dropdown-item" href="#" role="button"> Profile</a>
219219
<a class="dropdown-item" href="#" role="button">
220220
<span class="badge bg-danger float-end">50%</span>
@@ -489,35 +489,35 @@ <h2 class="text-warning">4.5</h4>
489489
<div class="rating-breakdown">
490490
<div class="d-flex align-items-center mb-1">
491491
<span class="me-2">5</span>
492-
<div class="progress flex-grow-1 me-2" style="height: 8px;">
492+
<div class="progress flex-grow-1 me-2 progress-sm">
493493
<div class="progress-bar bg-warning" style="width: 70%"></div>
494494
</div>
495495
<span class="text-muted small">70%</span>
496496
</div>
497497
<div class="d-flex align-items-center mb-1">
498498
<span class="me-2">4</span>
499-
<div class="progress flex-grow-1 me-2" style="height: 8px;">
499+
<div class="progress flex-grow-1 me-2 progress-sm">
500500
<div class="progress-bar bg-warning" style="width: 20%"></div>
501501
</div>
502502
<span class="text-muted small">20%</span>
503503
</div>
504504
<div class="d-flex align-items-center mb-1">
505505
<span class="me-2">3</span>
506-
<div class="progress flex-grow-1 me-2" style="height: 8px;">
506+
<div class="progress flex-grow-1 me-2 progress-sm">
507507
<div class="progress-bar bg-warning" style="width: 7%"></div>
508508
</div>
509509
<span class="text-muted small">7%</span>
510510
</div>
511511
<div class="d-flex align-items-center mb-1">
512512
<span class="me-2">2</span>
513-
<div class="progress flex-grow-1 me-2" style="height: 8px;">
513+
<div class="progress flex-grow-1 me-2 progress-sm">
514514
<div class="progress-bar bg-warning" style="width: 2%"></div>
515515
</div>
516516
<span class="text-muted small">2%</span>
517517
</div>
518518
<div class="d-flex align-items-center mb-1">
519519
<span class="me-2">1</span>
520-
<div class="progress flex-grow-1 me-2" style="height: 8px;">
520+
<div class="progress flex-grow-1 me-2 progress-sm">
521521
<div class="progress-bar bg-warning" style="width: 1%"></div>
522522
</div>
523523
<span class="text-muted small">1%</span>

‎production/echarts.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ <h3>Live On</h3>
158158
<i class="fas fa-envelope"></i>
159159
<span class="badge bg-green">6</span>
160160
</a>
161-
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list" style="min-width: 320px;" role="menu" aria-labelledby="navbarDropdown1">
161+
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list dropdown-menu-lg" role="menu" aria-labelledby="navbarDropdown1">
162162
<li class="nav-item">
163163
<a class="dropdown-item">
164164
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
@@ -216,7 +216,7 @@ <h3>Live On</h3>
216216
<a href="#" role="button" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
217217
<img src="images/img.jpg" alt="">John Doe
218218
</a>
219-
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu" style="min-width: 200px;" aria-labelledby="navbarDropdown">
219+
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu dropdown-menu-sm" aria-labelledby="navbarDropdown">
220220
<a class="dropdown-item" href="#" role="button"> Profile</a>
221221
<a class="dropdown-item" href="#" role="button">
222222
<span class="badge bg-red float-end">50%</span>
@@ -443,7 +443,7 @@ <h4>Horizontal Bar</h4>
443443
</div>
444444
<div class="x_content">
445445

446-
<div id="echart_bar_horizontal" style="height:370px;"></div>
446+
<div id="echart_bar_horizontal" class="chart-lg"></div>
447447

448448
</div>
449449
</div>
@@ -467,7 +467,7 @@ <h4>World Map</h4>
467467
</div>
468468
<div class="x_content">
469469

470-
<div id="echart_world_map" style="height:370px;"></div>
470+
<div id="echart_world_map" class="chart-lg"></div>
471471

472472
</div>
473473
</div>
@@ -492,7 +492,7 @@ <h4>Pyramid</h4>
492492
</div>
493493
<div class="x_content">
494494

495-
<div id="echart_pyramid" style="height:400px;"></div>
495+
<div id="echart_pyramid" class="chart-xl"></div>
496496

497497
</div>
498498
</div>
@@ -516,7 +516,7 @@ <h4>Sonar</h4>
516516
</div>
517517
<div class="x_content">
518518

519-
<div id="echart_sonar" style="height:370px;"></div>
519+
<div id="echart_sonar" class="chart-lg"></div>
520520

521521
</div>
522522
</div>

‎production/fixed_footer.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ <h3>Live On</h3>
157157
<i class="fas fa-envelope"></i>
158158
<span class="badge bg-green">6</span>
159159
</a>
160-
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list" style="min-width: 320px;" role="menu" aria-labelledby="navbarDropdown1">
160+
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list dropdown-menu-lg" role="menu" aria-labelledby="navbarDropdown1">
161161
<li class="nav-item">
162162
<a class="dropdown-item">
163163
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
@@ -215,7 +215,7 @@ <h3>Live On</h3>
215215
<a href="#" role="button" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
216216
<img src="images/img.jpg" alt="">John Doe
217217
</a>
218-
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu" style="min-width: 200px;" aria-labelledby="navbarDropdown">
218+
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu dropdown-menu-sm" aria-labelledby="navbarDropdown">
219219
<a class="dropdown-item" href="#" role="button"> Profile</a>
220220
<a class="dropdown-item" href="#" role="button">
221221
<span class="badge bg-red float-end">50%</span>

‎production/fixed_sidebar.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ <h3>Live On</h3>
157157
<i class="fas fa-envelope"></i>
158158
<span class="badge bg-green">6</span>
159159
</a>
160-
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list" style="min-width: 320px;" role="menu" aria-labelledby="navbarDropdown1">
160+
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list dropdown-menu-lg" role="menu" aria-labelledby="navbarDropdown1">
161161
<li class="nav-item">
162162
<a class="dropdown-item">
163163
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
@@ -215,7 +215,7 @@ <h3>Live On</h3>
215215
<a href="#" role="button" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
216216
<img src="images/img.jpg" alt="">John Doe
217217
</a>
218-
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu" style="min-width: 200px;" aria-labelledby="navbarDropdown">
218+
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu dropdown-menu-sm" aria-labelledby="navbarDropdown">
219219
<a class="dropdown-item" href="#" role="button"> Profile</a>
220220
<a class="dropdown-item" href="#" role="button">
221221
<span class="badge bg-red float-end">50%</span>

‎production/form.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ <h3>Live On</h3>
156156
<i class="fas fa-envelope"></i>
157157
<span class="badge bg-green">6</span>
158158
</a>
159-
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list" style="min-width: 320px;" role="menu" aria-labelledby="navbarDropdown1">
159+
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list dropdown-menu-lg" role="menu" aria-labelledby="navbarDropdown1">
160160
<li class="nav-item">
161161
<a class="dropdown-item">
162162
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
@@ -214,7 +214,7 @@ <h3>Live On</h3>
214214
<a href="#" role="button" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
215215
<img src="images/img.jpg" alt="">John Doe
216216
</a>
217-
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu" style="min-width: 200px;" aria-labelledby="navbarDropdown">
217+
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu dropdown-menu-sm" aria-labelledby="navbarDropdown">
218218
<a class="dropdown-item" href="#" role="button"> Profile</a>
219219
<a class="dropdown-item" href="#" role="button">
220220
<span class="badge bg-red float-end">50%</span>

‎production/form_advanced.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ <h3>General</h3>
153153
<i class="fas fa-envelope"></i>
154154
<span class="badge bg-green">6</span>
155155
</a>
156-
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list" style="min-width: 320px;" role="menu" aria-labelledby="navbarDropdown1">
156+
<ul class="dropdown-menu dropdown-menu-end list-unstyled msg_list dropdown-menu-lg" role="menu" aria-labelledby="navbarDropdown1">
157157
<li class="nav-item">
158158
<a class="dropdown-item">
159159
<span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
@@ -216,7 +216,7 @@ <h3>General</h3>
216216
<a href="#" role="button" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
217217
<img src="images/img.jpg" alt="">John Doe
218218
</a>
219-
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu" style="min-width: 200px;" aria-labelledby="navbarDropdown">
219+
<div class="dropdown-menu dropdown-menu-end dropdown-usermenu dropdown-menu-sm" aria-labelledby="navbarDropdown">
220220
<a class="dropdown-item" href="#" role="button">Profile</a>
221221
<a class="dropdown-item" href="#" role="button">Settings</a>
222222
<a class="dropdown-item" href="#" role="button">Help</a>

0 commit comments

Comments
 (0)