Skip to content

Commit acc1ed0

Browse files
author
committed
Deployed fc30e21 with MkDocs version: 1.6.1
1 parent 6a4ab18 commit acc1ed0

File tree

6 files changed

+425
-125
lines changed

6 files changed

+425
-125
lines changed

‎configuration/ui/custom-css/index.html‎

Lines changed: 135 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -137,13 +137,35 @@
137137
</li>
138138
<li class="toctree-l2 current"><a class="reference internal current" href="#">Custom CSS</a>
139139
<ul class="current">
140+
<li class="toctree-l3"><a class="reference internal" href="#overview">Overview</a>
141+
</li>
142+
<li class="toctree-l3"><a class="reference internal" href="#quick-start">Quick Start</a>
143+
</li>
144+
<li class="toctree-l3"><a class="reference internal" href="#how-it-works">How It Works</a>
145+
</li>
146+
<li class="toctree-l3"><a class="reference internal" href="#file-structure">File Structure</a>
147+
</li>
148+
<li class="toctree-l3"><a class="reference internal" href="#example-customizations">Example Customizations</a>
149+
<ul>
150+
<li class="toctree-l4"><a class="reference internal" href="#custom-brand-colors">Custom Brand Colors</a>
151+
</li>
152+
<li class="toctree-l4"><a class="reference internal" href="#custom-logo-area">Custom Logo Area</a>
153+
</li>
154+
<li class="toctree-l4"><a class="reference internal" href="#wider-content-area">Wider Content Area</a>
155+
</li>
156+
</ul>
157+
</li>
158+
<li class="toctree-l3"><a class="reference internal" href="#tips">Tips</a>
159+
</li>
160+
<li class="toctree-l3"><a class="reference internal" href="#benefits">Benefits</a>
161+
</li>
140162
<li class="toctree-l3"><a class="reference internal" href="#available-styles">Available Styles</a>
141163
</li>
142164
<li class="toctree-l3"><a class="reference internal" href="#style-configuration">Style Configuration</a>
143165
</li>
144166
<li class="toctree-l3"><a class="reference internal" href="#theme-and-style-relationship">Theme and Style Relationship</a>
145167
</li>
146-
<li class="toctree-l3"><a class="reference internal" href="#ui-customization-options">UI Customization Options</a>
168+
<li class="toctree-l3"><a class="reference internal" href="#related-documentation">Related Documentation</a>
147169
</li>
148170
</ul>
149171
</li>
@@ -394,40 +416,135 @@
394416
This documentation covers Poweradmin 4.x. Some sections are still being expanded.
395417
</div>
396418

397-
<h1 id="ui-styling">UI Styling</h1>
398-
<p>Poweradmin uses built-in themes for its user interface styling. Currently, the application does not support custom CSS files for styling customization.</p>
419+
<h1 id="custom-css">Custom CSS</h1>
420+
<p>Poweradmin supports custom CSS files that allow you to customize the interface styling while surviving application updates.</p>
421+
<p><em>Added in version 4.1.0</em></p>
422+
<h2 id="overview">Overview</h2>
423+
<p>Each theme includes support for custom CSS extension files that are automatically loaded alongside the base theme styles. This allows you to:</p>
424+
<ul>
425+
<li>Customize colors, fonts, and spacing</li>
426+
<li>Add your organization's branding</li>
427+
<li>Override specific UI elements</li>
428+
<li>Keep customizations separate from core files</li>
429+
</ul>
430+
<h2 id="quick-start">Quick Start</h2>
431+
<ol>
432+
<li>
433+
<p>Navigate to your theme's style directory:
434+
<code>templates/default/style/</code></p>
435+
</li>
436+
<li>
437+
<p>Copy the example files:
438+
<code>bash
439+
cp custom_light.css.example custom_light.css
440+
cp custom_dark.css.example custom_dark.css</code></p>
441+
</li>
442+
<li>
443+
<p>Edit the CSS files to match your preferences</p>
444+
</li>
445+
<li>
446+
<p>Refresh your browser - custom styles are automatically loaded</p>
447+
</li>
448+
</ol>
449+
<h2 id="how-it-works">How It Works</h2>
450+
<table>
451+
<thead>
452+
<tr>
453+
<th>File</th>
454+
<th>Description</th>
455+
</tr>
456+
</thead>
457+
<tbody>
458+
<tr>
459+
<td><code>custom_light.css</code></td>
460+
<td>Loaded automatically when using Light style</td>
461+
</tr>
462+
<tr>
463+
<td><code>custom_dark.css</code></td>
464+
<td>Loaded automatically when using Dark style</td>
465+
</tr>
466+
</tbody>
467+
</table>
468+
<ul>
469+
<li>Custom stylesheets override base theme styles using CSS cascade</li>
470+
<li>Files are only loaded if they exist (no errors if missing)</li>
471+
<li>Works with the existing light/dark theme switcher</li>
472+
</ul>
473+
<h2 id="file-structure">File Structure</h2>
474+
<pre><code>templates/default/style/
475+
├── light.css # Base light theme (don't modify)
476+
├── dark.css # Base dark theme (don't modify)
477+
├── custom_light.css.example # Light theme customization examples
478+
├── custom_dark.css.example # Dark theme customization examples
479+
├── custom_light.css # Your light theme customizations (create this)
480+
└── custom_dark.css # Your dark theme customizations (create this)
481+
</code></pre>
482+
<h2 id="example-customizations">Example Customizations</h2>
483+
<h3 id="custom-brand-colors">Custom Brand Colors</h3>
484+
<pre><code class="language-css">/* custom_light.css */
485+
:root {
486+
--bs-primary: #0066cc;
487+
--bs-primary-rgb: 0, 102, 204;
488+
}
489+
490+
.navbar {
491+
background-color: #0066cc !important;
492+
}
493+
</code></pre>
494+
<h3 id="custom-logo-area">Custom Logo Area</h3>
495+
<pre><code class="language-css">/* custom_light.css */
496+
.navbar-brand {
497+
font-weight: bold;
498+
color: #333 !important;
499+
}
500+
</code></pre>
501+
<h3 id="wider-content-area">Wider Content Area</h3>
502+
<pre><code class="language-css">/* custom_light.css */
503+
.container-fluid {
504+
max-width: 1600px;
505+
}
506+
</code></pre>
507+
<h2 id="tips">Tips</h2>
508+
<ul>
509+
<li>Use <code>!important</code> when needed to ensure your styles override base theme styles</li>
510+
<li>Test with both light and dark themes if you use theme switching</li>
511+
<li>Remove example styles you don't need before deploying to production</li>
512+
<li>Keep customizations minimal for easier maintenance during upgrades</li>
513+
</ul>
514+
<h2 id="benefits">Benefits</h2>
515+
<ul>
516+
<li><strong>Update-safe</strong>: Your customizations survive all Poweradmin updates</li>
517+
<li><strong>Automatic loading</strong>: No configuration changes needed</li>
518+
<li><strong>Theme switching</strong>: Works with existing light/dark theme switcher</li>
519+
<li><strong>CSS cascade</strong>: Your styles naturally override base themes</li>
520+
</ul>
399521
<h2 id="available-styles">Available Styles</h2>
400-
<p>Poweradmin comes with the following styles, which can be selected in the configuration file:</p>
522+
<p>Poweradmin comes with the following base styles:</p>
401523
<ul>
402524
<li><strong>light</strong> (default): A clean, bright interface style</li>
403525
<li><strong>dark</strong>: A darker interface style that reduces eye strain in low-light environments</li>
404526
</ul>
405527
<h2 id="style-configuration">Style Configuration</h2>
406-
<p>To change the style, update the <code>style</code> setting in the <code>settings.php</code> file under the <code>interface</code> section:</p>
528+
<p>To change the default style, update the <code>style</code> setting in <code>config/settings.php</code>:</p>
407529
<pre><code class="language-php">return [
408530
'interface' =&gt; [
409-
'theme' =&gt; 'default', // The theme to use (default, custom)
531+
'theme' =&gt; 'default', // The theme to use (default, modern)
410532
'style' =&gt; 'dark', // Options: 'light', 'dark'
411533
],
412534
];
413535
</code></pre>
414536
<h2 id="theme-and-style-relationship">Theme and Style Relationship</h2>
415537
<p>In Poweradmin, the visual appearance is controlled by two settings:</p>
416538
<ol>
417-
<li><strong>theme</strong>: Controls the template structure</li>
418-
<li><strong>style</strong>: Controls the color scheme and visual appearance</li>
539+
<li><strong>theme</strong>: Controls the template structure (default, modern)</li>
540+
<li><strong>style</strong>: Controls the color scheme (light, dark)</li>
419541
</ol>
420542
<p>This separation allows for maximum flexibility in customizing the interface.</p>
421-
<h2 id="ui-customization-options">UI Customization Options</h2>
422-
<p>Without custom CSS, you can still customize the UI using:</p>
423-
<ol>
424-
<li><strong>Custom themes</strong>: Create custom templates in your theme directory</li>
425-
<li><strong>Style selection</strong>: Choose between light and dark styles</li>
426-
<li><strong>Layout settings</strong>: Configure which UI elements are shown and their positioning</li>
427-
</ol>
428-
<p>For more information about UI customization, see:
429-
- <a href="../themes/">Themes documentation</a>
430-
- <a href="../layout/">Layout documentation</a> (includes custom header and footer setup)</p>
543+
<h2 id="related-documentation">Related Documentation</h2>
544+
<ul>
545+
<li><a href="../themes/">Themes</a></li>
546+
<li><a href="../layout/">Layout</a> (includes custom header and footer setup)</li>
547+
</ul>
431548

432549

433550
</div>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -504,5 +504,5 @@ <h2 id="license-and-disclaimer">License and Disclaimer</h2>
504504

505505
<!--
506506
MkDocs version : 1.6.1
507-
Build Date UTC : 2026-01-27 08:43:27.586356+00:00
507+
Build Date UTC : 2026-01-28 09:45:11.359987+00:00
508508
-->

‎search/search_index.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)