Personal tools
Namespaces

Variants
Actions

Theme Management Tool

From ModulesGarden Wiki
(Difference between revisions)
Jump to: navigation, search
(→‎Theme Presets)
 
(15 intermediate revisions by one user not shown)
Line 4: Line 4:
 
=About Theme Managemnt Tool=
 
=About Theme Managemnt Tool=
 
{|
 
{|
−
|style="padding: 10px 0px 30px 15px;"|The '''Theme''' management tool allows you to customize the appearance of the module interface using configurable '''Theme Presets'''.<br/> A preset defines colors used across the UI, including backgrounds, text, buttons, inputs, and system messages. Each preset can be applied separately to the admin area, client area, or both. <br/>  
+
|style="padding: 10px 0px 30px 15px;"|The '''Themes''' management tool allows you to customize the appearance of the module interface using configurable templates.<br/> A theme template defines colors used across the UI, including backgrounds, text, buttons, inputs, and system messages. Each template can be applied separately to the admin area, client area, or both. <br/>  
−
Compose your own presets, or use the built-in examples to maintain visual consistency across all ModulesGarden modules.
+
Compose your own theme, or use the built-in examples to maintain visual consistency across all ModulesGarden modules.
 
|}
 
|}
  
Line 17: Line 17:
 
{|
 
{|
 
|style="padding: 10px 0px 15px 15px;"|
 
|style="padding: 10px 0px 15px 15px;"|
−
To access the Theme management section, navigate to your addon module menu: ''Navigation → Tools → Theme.''<br/>
+
To access the Themes management section, navigate to your addon module menu: ''Navigation → Tools/Others → Themes'' or find it directly in the main menu, depending on the module.<br/>
−
The main view displays all available presets along with their status and assigned areas.<br/>
+
The main view displays all available themes along with their status and assigned areas.<br/>
−
The standard theme management includes the following built-in presets:
+
The standard package includes the following built-in themes:
−
* '''Default preset''' – used across all ModulesGarden modules; this preset is protected and cannot be modified or deleted. To make changes, create a new preset based on it.
+
* '''Default''' – used across all ModulesGarden modules; this preset is protected and cannot be modified or deleted. To make changes, create a new preset based on it.
−
* '''Dark preset''' – pre-configured dark theme intended for further customization.
+
* '''Dark''' – pre-configured dark theme intended for further customization.
−
* '''HaX0r''' – sample custom preset available for modification.<br/>
+
* '''Ocean Mint''' – sample custom preset available for modification.<br/>
−
'''''Important:''' The "Default" preset is the only officially supported theme. The remaining presets are provided as examples and may require adjustments before use.''
+
'''''Important:''' The "Default" theme is the only officially supported theme. The remaining ones are provided as examples and may require adjustments before use.''
 
|}
 
|}
 
{|
 
{|
Line 29: Line 29:
 
|}
 
|}
 
{|
 
{|
−
|style="padding: 0px 0px 15px 15px;"|To '''create''' a new preset:
+
|style="padding: 0px 0px 15px 15px;"|
−
* Click '''Create Preset'''
+
To '''create''' a new theme:
 +
* Click '''Create Theme'''
 
* Enter a '''Name'''
 
* Enter a '''Name'''
−
* Select a preset to copy settings from
+
* Select a theme to copy settings from
 
* Confirm creation<br/>
 
* Confirm creation<br/>
−
The newly created preset will appear on the list. You can edit its settings immediately or use it as is.
+
The newly created theme will appear on the list. You can then edit its settings to match your needs.
 
|}
 
|}
 
{|
 
{|
Line 40: Line 41:
 
|}
 
|}
 
{|
 
{|
−
|style="padding: 0px 0px 15px 15px;"|To '''activate''' a selected preset:
+
|style="padding: 0px 0px 15px 15px;"|To '''activate''' a selected theme:
 
* Click '''Activate'''
 
* Click '''Activate'''
 
* Choose the destination:
 
* Choose the destination:
Line 47: Line 48:
 
** Both
 
** Both
 
* Confirm changes<br/>
 
* Confirm changes<br/>
−
You can assign different presets to the admin and client areas to better match your preferred appearance.
+
You can assign different themes to the admin and client areas to better match your preferred appearance.
 
|}
 
|}
 
{|
 
{|
Line 53: Line 54:
 
|}
 
|}
 
{|
 
{|
−
|style="padding: 0px 0px 15px 15px;"|Presets can be '''saved as files''' and reused across environments.
+
|style="padding: 0px 0px 15px 15px;"|Themes can be '''saved as files''' and reused across environments.
−
* '''Export''' - download a preset as a JSON file for reuse in another module
+
* '''Export''' - download a theme as a JSON file for reuse in another module
 
|}
 
|}
 
{|
 
{|
Line 61: Line 62:
 
{|
 
{|
 
|style="padding: 0px 0px 15px 15px;"|
 
|style="padding: 0px 0px 15px 15px;"|
−
* '''Import''' - upload an existing preset file and optionally rename it for the current module
+
* '''Import''' - upload an existing theme file and optionally rename it for the current module
 
|}
 
|}
 
{|
 
{|
Line 67: Line 68:
 
|}
 
|}
 
{|
 
{|
−
|style="padding: 0px 0px 15px 15px;"|'''1. Edit''' presets to adjust the module display.<br/>
+
|style="padding: 0px 0px 15px 15px;"|
−
'''2. Remove''' any unused presets. Note that a preset currently assigned to an area cannot be deleted.
+
'''1. Edit''' theme to adjust the module appearance.<br/>
 +
'''2. Remove''' any unused themes. Note that the "Default" theme and any theme currently assigned to an area cannot be deleted.
 
|}
 
|}
 
{|
 
{|
Line 76: Line 78:
 
==Editing in Basic Mode==
 
==Editing in Basic Mode==
 
{|
 
{|
−
|style="padding: 10px 0px 15px 15px;"|When editing a preset, you can switch between two modes depending on the level of control required:
+
|style="padding: 10px 0px 15px 15px;"|When editing a theme, you can switch between two modes depending on the level of control required:
 
* '''Basic Mode''' - simplified configuration
 
* '''Basic Mode''' - simplified configuration
 
* '''Expert Mode''' - detailed customization
 
* '''Expert Mode''' - detailed customization
Line 83: Line 85:
 
* On the left side, you will find specific areas with default colors configured.<br/>  
 
* On the left side, you will find specific areas with default colors configured.<br/>  
 
* On the right side, you will find a live preview of the display modification.<br/> Whenever you change a color on the left, its live preview will display the change. To '''revert to default''' colours, just press the 'Reset to default' icon next to each setting.<br/>
 
* On the right side, you will find a live preview of the display modification.<br/> Whenever you change a color on the left, its live preview will display the change. To '''revert to default''' colours, just press the 'Reset to default' icon next to each setting.<br/>
−
Remember to save the changes when your custom preset is ready.<br/>
+
Remember to save the changes when your custom theme is ready.<br/>
  
 
For your convenience, each option includes a tooltip with the corresponding CSS variable name. This makes it easy to identify which variable controls a given element and locate it directly in the configuration.
 
For your convenience, each option includes a tooltip with the corresponding CSS variable name. This makes it easy to identify which variable controls a given element and locate it directly in the configuration.
Line 99: Line 101:
 
* Component background - Background used for containers like tables and cards.
 
* Component background - Background used for containers like tables and cards.
 
* Component border - Border color for containers and separators.
 
* Component border - Border color for containers and separators.
−
* Icons - Color of icons used in navigation and UI elements.<br/>
+
* Module name - Color of the module name next to the logo (logo colors do not apply to changes).
 +
* Module version - text with the used version number located at the very bottom of each module page.
 +
* Headers - Color of header texts.
 +
* Icons - Color of icons used in navigation and UI elements.
 
|}
 
|}
 
{|
 
{|
Line 134: Line 139:
 
* Warning
 
* Warning
 
* Danger
 
* Danger
 +
* Critical
  
 
Each type includes the following states:
 
Each type includes the following states:
Line 148: Line 154:
 
|}
 
|}
  
−
===Other===
+
===Others===
 
{|
 
{|
 
|style="padding: 0px 0px 20px 15px;"|
 
|style="padding: 0px 0px 20px 15px;"|
−
'''Other''' with tooltip appearance settings:
+
'''Others''' with tooltip appearance settings:
 
* Icon - Color of the tooltip icon.
 
* Icon - Color of the tooltip icon.
 
* Text - Text color inside tooltips.
 
* Text - Text color inside tooltips.
Line 175: Line 181:
 
{|
 
{|
 
|style="padding: 10px 0px 20px 15px;"|
 
|style="padding: 10px 0px 20px 15px;"|
−
*'''Base Styles''' - default text and page background
+
* '''Base Styles''' – default text and page background
−
** Default Texts - default text color used across the interface.
+
** '''Default Texts''' – default text color used across the interface
−
** Page Background -  background color of the entire page.
+
** '''Page Background''' – background color of the entire page
−
** Module Name - module name text style
+
** '''Module Name''' – module name text style
−
** Module Version - module version style
+
** '''Module Version''' – module version text style
−
** Headers - header texts style
+
** '''Headers''' – header text style
−
*'''Containers'''  
+
 
−
** Table Dividers - lines separating rows and columns in tables,
+
* '''Containers''' – text, background, and borders
−
** Text, background, and borders
+
 
−
*'''Modals''' - text, background, and borders
+
* '''Tables'''
−
*'''Dropdowns'''
+
** '''Dividers''' – lines separating table sections
−
**Selected Text - text of the currently selected value
+
** '''Mass Action Bar Background''' – background of the mass action bar
−
**Background and borders
+
** '''Pagination Text''' – pagination text color
 +
** '''Pagination Text (Active)''' – active pagination text color
 +
** '''Pagination Icons''' – pagination icon color
 +
 
 +
* '''Modals''' – text, background, and borders
 +
 
 +
* '''Dropdowns'''
 +
** '''Selected Text''' – text of the currently selected value
 +
** '''Background and Borders''' – dropdown background and border styling
 
|}
 
|}
 
{|
 
{|
Line 199: Line 213:
 
{|
 
{|
 
|style="padding: 10px 0px 20px 15px;"|
 
|style="padding: 10px 0px 20px 15px;"|
−
'''Navigation''' - text, icons, background, and active text color ''(text color of the currently selected menu item).''
+
'''Navigation''' – controls the appearance of the menu and its elements:
 +
* '''Text''' – main navigation text color
 +
* '''Icons''' – navigation icon color
 +
* '''Background''' – background of the navigation bar
 +
* '''Text (Active)''' – text color of the currently selected menu item
 +
* '''Submenu Text''' – default submenu item text color
 +
* '''Submenu Text (Hover)''' – submenu text color on hover
 +
* '''Submenu Text (Active)''' – active submenu item text color
 +
* '''Submenu Background''' – background of the submenu area
 
|}
 
|}
 
{|
 
{|
Line 211: Line 233:
 
{|
 
{|
 
|style="padding: 10px 0px 15px 15px;"|
 
|style="padding: 10px 0px 15px 15px;"|
−
*'''General Fields''' - text, background, and border
+
* '''General Fields''' – text, background, and border
−
*'''Switchers''' - knob, background (inactive), and background (active)
+
* '''Labels''' - text & background
−
*'''Checkboxes''' - background (active), border (active), and checkmark color ''(color of the checkmark inside the checkbox).''
+
* '''Switchers''' – knob, background (inactive), and background (active)
−
*'''Selects''' - text, active text, background along with:
+
* '''Checkboxes''' – background (active), border (active), and checkmark color ''(color of the checkmark inside the checkbox)''
−
**Option Text - text color of options in the dropdown list.
+
* '''Select''' – dropdown text, active text, and background, along with:
−
**Option Background - background of options in the dropdown list.
+
** '''Option Text''' – text color of options in the dropdown list
−
**Remove Button - color of the remove button in multi-select fields.
+
** '''Option Background''' – background of options in the dropdown list
 +
** '''Remove Button''' – color of the remove button in multi-select fields
 
|}
 
|}
 
{|
 
{|
Line 228: Line 251:
 
===Text===
 
===Text===
 
{|
 
{|
−
|style="padding: 10px 0px 15px 15px;"|Text color variants:
+
|style="padding: 10px 0px 15px 15px;"|
−
* Primary (link, hover, active)
+
Text color variants used across the interface:
−
* Secondary
+
* '''Primary''' – used for general texts
−
* Info
+
* '''Secondary''' – supporting or less prominent text
−
* Success
+
* '''Info''' – informational messages and highlights
−
* Warning
+
* '''Success''' – success states and confirmations
−
* Danger
+
* '''Warning''' – warnings and important notices
 +
* '''Danger''' – errors and critical messages
 
|}
 
|}
 
{|
 
{|
Line 245: Line 269:
 
===Buttons===
 
===Buttons===
 
{|
 
{|
−
|style="padding: 10px 0px 15px 15px;"|'''Buttons''' - plain, outline, link, and icon styles<br/>
+
|style="padding: 10px 0px 15px 15px;"|'''Buttons''' - plain, outline, link, and icon styles.<br/>
−
Available types:
+
Each style includes the following types:
 
* Default
 
* Default
 
* Primary
 
* Primary
Line 259: Line 283:
 
* Text - Text color displayed inside the button.
 
* Text - Text color displayed inside the button.
 
* Background - Default background color of the button.
 
* Background - Default background color of the button.
−
* Background (Hover) - Background color when the button is hovered.
+
* Background (Hover) - Background color on hover.
 
* Background (Active) - Background color when the button is clicked.
 
* Background (Active) - Background color when the button is clicked.
 
|}
 
|}
Line 267: Line 291:
 
{|
 
{|
 
|style="padding: 0px 0px 30px 25px;"|[[File:TH_16_1.png]]
 
|style="padding: 0px 0px 30px 25px;"|[[File:TH_16_1.png]]
 +
|}
 +
 +
===Tile Buttons===
 +
{|
 +
|style="padding: 10px 0px 15px 15px;"|
 +
Icon color variants for standard and on hover views:
 +
* Text
 +
* Background
 +
* Border
 +
|}
 +
{|
 +
|style="padding: 0px 0px 20px 25px;"|[[File:TH_16_2.png]]
 +
|}
 +
{|
 +
|style="padding: 0px 0px 30px 25px;"|[[File:TH_16_3.png]]
 
|}
 
|}
  
Line 280: Line 319:
 
* Warning
 
* Warning
 
* Danger
 
* Danger
 +
* Critical
 
|}
 
|}
 
{|
 
{|
Line 404: Line 444:
 
{|
 
{|
 
|style="padding: 10px 0px 20px 15px;"|
 
|style="padding: 10px 0px 20px 15px;"|
−
Code text display styling options.
+
Code text box display styling options.
 
|}
 
|}
 
{|
 
{|
Line 410: Line 450:
 
|}
 
|}
 
{|
 
{|
−
|style="padding: 0px 0px 20px 25px;"|[[File:TH_24_1.png]]
+
|style="padding: 0px 0px 30px 25px;"|[[File:TH_24_1.png]]
 
|}
 
|}
 +
 
===URLs===
 
===URLs===
 
{|
 
{|

Latest revision as of 14:35, 30 April 2026

Contents

[edit] About Theme Managemnt Tool

The Themes management tool allows you to customize the appearance of the module interface using configurable templates.
A theme template defines colors used across the UI, including backgrounds, text, buttons, inputs, and system messages. Each template can be applied separately to the admin area, client area, or both.

Compose your own theme, or use the built-in examples to maintain visual consistency across all ModulesGarden modules.

[edit] Management

The Theme section in your addon allows you to create, manage, and apply visual configurations for ModulesGarden modules wherever they are accessible.

[edit] Theme Presets

To access the Themes management section, navigate to your addon module menu: Navigation → Tools/Others → Themes or find it directly in the main menu, depending on the module.
The main view displays all available themes along with their status and assigned areas.
The standard package includes the following built-in themes:

  • Default – used across all ModulesGarden modules; this preset is protected and cannot be modified or deleted. To make changes, create a new preset based on it.
  • Dark – pre-configured dark theme intended for further customization.
  • Ocean Mint – sample custom preset available for modification.

Important: The "Default" theme is the only officially supported theme. The remaining ones are provided as examples and may require adjustments before use.

TH 1.png

To create a new theme:

  • Click Create Theme
  • Enter a Name
  • Select a theme to copy settings from
  • Confirm creation

The newly created theme will appear on the list. You can then edit its settings to match your needs.

TH 2.png
To activate a selected theme:
  • Click Activate
  • Choose the destination:
    • Admin Area
    • Client Area
    • Both
  • Confirm changes

You can assign different themes to the admin and client areas to better match your preferred appearance.

TH 3.png
Themes can be saved as files and reused across environments.
  • Export - download a theme as a JSON file for reuse in another module
TH 5.png
  • Import - upload an existing theme file and optionally rename it for the current module
TH 4.png

1. Edit theme to adjust the module appearance.
2. Remove any unused themes. Note that the "Default" theme and any theme currently assigned to an area cannot be deleted.

TH 6.png

[edit] Editing in Basic Mode

When editing a theme, you can switch between two modes depending on the level of control required:
  • Basic Mode - simplified configuration
  • Expert Mode - detailed customization

Basic Mode allows you to quickly define a consistent appearance using global color groups.

  • On the left side, you will find specific areas with default colors configured.
  • On the right side, you will find a live preview of the display modification.
    Whenever you change a color on the left, its live preview will display the change. To revert to default colours, just press the 'Reset to default' icon next to each setting.

Remember to save the changes when your custom theme is ready.

For your convenience, each option includes a tooltip with the corresponding CSS variable name. This makes it easy to identify which variable controls a given element and locate it directly in the configuration.

TH 7.png

[edit] General

General settings include:

  • Default text - Default text color used across the interface.
  • Page background - Background color of the entire page.
  • Component background - Background used for containers like tables and cards.
  • Component border - Border color for containers and separators.
  • Module name - Color of the module name next to the logo (logo colors do not apply to changes).
  • Module version - text with the used version number located at the very bottom of each module page.
  • Headers - Color of header texts.
  • Icons - Color of icons used in navigation and UI elements.
TH 8.png
TH 8 1.png

[edit] Inputs

Input element settings:

  • Knob
  • Background (Inactive)
  • Background (Active)
TH 9.png
TH 9 1.png

[edit] Color Types

Color Types define the main color variants for texts, buttons, icons, labels, badges, alerts and hints:

  • Default
  • Primary
  • Secondary
  • Info
  • Success
  • Warning
  • Danger
  • Critical

Each type includes the following states:

  • Base
  • Hover
  • Active
  • Faded
TH 10.png
TH 10 1.png

[edit] Others

Others with tooltip appearance settings:

  • Icon - Color of the tooltip icon.
  • Text - Text color inside tooltips.
  • Background - Background color of tooltips.
TH 11.png
TH 11 1.png

[edit] Editing in Expert Mode

Expert Mode provides full control over every interface element, allowing you to customize the module's appearance in detail.
Each option includes a tooltip with the assigned CSS variable name, allowing you to clearly identify which variable controls a specific element and reference it in the configuration.
Use the target icon to locate the currently customized item with its live preview on the right side.
To revert to default colours, just press the 'Reset to default' icon next to each setting.

[edit] General

  • Base Styles – default text and page background
    • Default Texts – default text color used across the interface
    • Page Background – background color of the entire page
    • Module Name – module name text style
    • Module Version – module version text style
    • Headers – header text style
  • Containers – text, background, and borders
  • Tables
    • Dividers – lines separating table sections
    • Mass Action Bar Background – background of the mass action bar
    • Pagination Text – pagination text color
    • Pagination Text (Active) – active pagination text color
    • Pagination Icons – pagination icon color
  • Modals – text, background, and borders
  • Dropdowns
    • Selected Text – text of the currently selected value
    • Background and Borders – dropdown background and border styling
TH 12.png
TH 12 1.png

[edit] Navigation

Navigation – controls the appearance of the menu and its elements:

  • Text – main navigation text color
  • Icons – navigation icon color
  • Background – background of the navigation bar
  • Text (Active) – text color of the currently selected menu item
  • Submenu Text – default submenu item text color
  • Submenu Text (Hover) – submenu text color on hover
  • Submenu Text (Active) – active submenu item text color
  • Submenu Background – background of the submenu area
TH 13.png
TH 13 1.png

[edit] Inputs

  • General Fields – text, background, and border
  • Labels - text & background
  • Switchers – knob, background (inactive), and background (active)
  • Checkboxes – background (active), border (active), and checkmark color (color of the checkmark inside the checkbox)
  • Select – dropdown text, active text, and background, along with:
    • Option Text – text color of options in the dropdown list
    • Option Background – background of options in the dropdown list
    • Remove Button – color of the remove button in multi-select fields
TH 14.png
TH 14 1.png

[edit] Text

Text color variants used across the interface:

  • Primary – used for general texts
  • Secondary – supporting or less prominent text
  • Info – informational messages and highlights
  • Success – success states and confirmations
  • Warning – warnings and important notices
  • Danger – errors and critical messages
TH 15.png
TH 15 1.png

[edit] Buttons

Buttons - plain, outline, link, and icon styles.

Each style includes the following types:

  • Default
  • Primary
  • Secondary
  • Success
  • Info
  • Warning
  • Danger
  • Critical

Each type includes color settings for:

  • Text - Text color displayed inside the button.
  • Background - Default background color of the button.
  • Background (Hover) - Background color on hover.
  • Background (Active) - Background color when the button is clicked.
TH 16.png
TH 16 1.png

[edit] Tile Buttons

Icon color variants for standard and on hover views:

  • Text
  • Background
  • Border
TH 16 2.png
TH 16 3.png

[edit] Icons

Icon color variants:

  • Default
  • Primary
  • Secondary
  • Info
  • Success
  • Warning
  • Danger
  • Critical
TH 17.png
TH 17 1.png

[edit] Labels

Set colors for text and background of plain, outline, and status type labels:

  • Default
  • Primary
  • Secondary
  • Info
  • Success
  • Warning
  • Danger
TH 18.png
TH 18 1.png

[edit] Badges

Text, background, and border for standard badges and outline badges:

  • Default
  • Primary
  • Secondary
  • Info
  • Success
  • Warning
  • Danger
TH 19.png
TH 19 1.png

[edit] Alerts

Text and background for alerts and outline alerts of following types:

  • Default
  • Info
  • Success
  • Warning
  • Danger
TH 20.png
TH 20 1.png

[edit] Hints

Define color pattern for hints:

  • Default
  • Info
  • Success
  • Warning
  • Danger
TH 21.png
TH 21 1.png

[edit] Progress Bars

Configure progress bar colors, including:
  • Fill - the portion representing the current value
  • Track - the background representing the remaining value

Available color variants:

  • Default
  • Primary
  • Info
  • Success
  • Warning
  • Danger
TH 22.png
TH 22 1.png

[edit] Sliders

Configure slider colors (Primary and Danger), including:

  • Fill - color of the filled portion of the slider track
  • Background - background of the slider track
  • Thumb - color of the draggable slider handle
  • Thumb Border - border color of the slider handle
  • Thumb (Hover) - color of the slider handle when hovered
  • Thumb Border (Hover) - border color of the slider handle when hovered
  • Marks Text - color of the labels displayed below the slider
  • Marks Ticks - color of the tick marks on the slider scale
  • Value Text - color of the currently selected value displayed above the slider
TH 23.png
TH 23 1.png

[edit] Code Box

Code text box display styling options.

TH 24.png
TH 24 1.png

[edit] URLs

Styling options for links, links on hover and active (pressed) ones.

TH 24 2.png
TH 24 3.png

[edit] Others

Tooltip elements:

  • Icon - color of the tooltip icon
  • Text - text color inside tooltips
  • Background - background color of tooltips
TH 25.png
TH 25 1.png

[edit] Examples

Here we are illustrating how a module display may change when a fully customized theme is used across the admin and client areas.

Proxmox VE VPS & Cloud For WHMCS module addon view:

TH 26.png
TH 26 1.png
Proxmox VE VPS & Cloud client area product view:
TH 27.png
TH 27 1.png

[edit] Tips

1. Export presets to keep backup copies of your configurations and reuse them across other ModuelsGarden modules.
2. Test changes in both admin and client areas, using separate presets is often more effective due to different user needs.
3. Built-in presets are provided as examples and can be freely modified. They are not officially supported or guaranteed to be fully compatible with all ModulesGarden modules.
If you encounter any issues, adjust the styles as needed.
Retrieved from "https://www.docs.modulesgarden.com/index.php?title=Theme_Management_Tool&oldid=79566"
Navigation
WHMCS Modules
WHMCS Module Bundles
WHMCS Widgets
Tools And Applications
Translations
General
FAQ
Community