| Table of Contents |
|---|
Introduction
| English |
|---|
| DX 8 Color Admin Theme is one of the themes available for Joget DX 8. |
Figure 1: DX 8 Color Admin Theme in desktop view
Changing the Theme
To change the theme, at the UI Builder, click properties then under theme select DX 8 Color Admin Theme ; (UI Builder → Settings→ Theme).
Figure 2: Changing the theme
Theme Properties
Configure Layout
Figure 3: Configure Theme
| Name | Description |
|---|---|
| Menu Position | Determines the position of the menu
|
| Color Scheme | Color Scheme:
|
| Background Image | Upload Background Image |
| Background | Color Scheme-Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Content Background | Color Scheme-Content Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Header Color | Color Scheme-Header Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Header Font Color | Color Scheme-Header Font Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Background | Color Scheme-Sidebar Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Menu Background | Color Scheme-Sidebar Menu Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Menu Color | Color Scheme-Sidebar Menu Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Icon Color | Color Scheme-Sidebar Icon Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Menu Background (Active) | Color Scheme-Sidebar Menu Background (Active) Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Menu Color (Active) | Color Scheme-Sidebar Menu Color (Active) Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Icon Color (Active) | Color Scheme-Sidebar Icon Color (Active) Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Badge Background | Color Scheme-Sidebar Badge Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Badge Color | Color Scheme-Sidebar Badge Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Sidebar Scrollbar Thumb Color | Color Scheme-Sidebar Scrollbar Thumb Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Button Background | Color Scheme-Button Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Button Color | Color Scheme-Button Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Highlight Color | Color Scheme-Highlight Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Highlight Background | Color Scheme-Highlight Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Heading Font Color | Color Scheme-Heading Font Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Font Color | Color Scheme-Font Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Content Font Color | Color Scheme-Content Font Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Link Color | Color Scheme-Link Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Link Color (Active) | Color Scheme-Link Color (Active) Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Footer Background | Color Scheme-Footer Background Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
| Footer Color | Color Scheme-Footer Color Choose from the preset colors or custom, By choosing custom, you can define the color manually or through the color picker. |
Advanced
Figure 4: Advanced
| Name | Description |
|---|---|
| Favicon URL | Define the path to custom Favicon URL. |
| Logo URL | Define the path to custom Logo URL |
| Disable Profile | Disable fetching user's profile photo |
| User Image |
|
| Inbox |
|
| Home Icon URL | Home Icon URL address |
| Shortcut Link Label | Shortcut Link Label |
| Shortcut | Defines links to be parked under Shortcut menu |
| User Menu Shortcut | Defines links to be parked under User menu |
| Enable Font Size Control? | Check this to enable the ability to change the font size on userview runtime. |
| Dark Theme | Check this to enable dark theme.
Figure 4.1: Changing From Light Theme to Dark Theme
Figure 4.2: Dark Theme of DX8 Color Admin Theme |
| Enable Responsive Switch in Mobile Device? | When checked, "Switch to desktop version" link will be shown in mobile device. |
| Remove Auto Title From Process/Assignment form? | When checked, process title and activity name will be removed from assignment form. In the screenshot below, the highlighted red box denotes the process title and activity name. |
| Home Banner | Custom HTML for Home Banner |
Custom CSS | Custom CSS for the theme |
| Custom JavaScript | Custom Javascript for the theme |
| Sub Header | Sub header text |
| Sub Footer | Sub footer text |
| Disable Help Guide Feature? | Click to hide the help guide feature. |
Progressive Web App (PWA) Settings
Figure 5: Progressive Web App (PWA ) Settings
| Name | Description |
|---|---|
| Disable Progressive Web App (PWA) Support | Click the checkbox to disable PWA. Joget DX apps automatically enable Progressive Web Apps (PWA) features in this theme so that all apps will be PWA baseline compliant without requiring additional steps, with features such as adding to home screen, offline support and push notifications. |
| Disable Web Push Notifications | Click to disable web push notification in this UI. |
| Additional URLs to Cache | Enter paths relative to context root. |
Login Page UI
Figure 6: Login Page UI
| Name | Description |
|---|---|
| Login Page Background | Upload Login Page Background |
| Custom HTML (Before Login Form) | Custom HTML to be placed in the login form |
| Custom HTML (After Login Form) | Custom HTML to be placed in the login form |
Configure Permission
Figure 7: Configure Permission
| Name | Description |
|---|---|
| Hide this UI in App Center? | When checked, this particular UI will not be listed in App Center. |
| Permission Type | White list to determine access to this UI. |
| Temporarily disable permission checking for testing? | Click checkbox to disable all category menu permission checking |