Introduction
The DX 8 Trimeda Theme is a flexible and modern interface theme, now enhanced to reflect the sleek design and seamless functionality of the Joget theme. It offers extensive customization options, enabling users to personalize their experience while delivering a cohesive and contemporary aesthetic.
Configure DX 8 trimeda
To set up a theme DX 8 Trimeda, go to the Theme field in UI settings > Configure Layout and select DX 8 Trimeda.
When you select DX 8 Trimeda, you will see the following properties available for configuration:
| Name | Description |
|---|---|
| Menu Position | Determines the menu position: Side Menu, Minimized Side Menu, Horizontal Menu (below or inline with Header), No Menu |
| Background Image | Upload a custom background image for a personalized look |
| Background | Color Scheme - Background; Choose preset or custom colors via manual input or color picker |
| Content Background | Color Scheme - Content Background; Choose preset or custom colors via manual input or color picker |
| Header Color | Color Scheme - Header Color; Choose preset or custom colors via manual input or color picker |
| Header Font Color | Color Scheme - Header Font Color; Choose preset or custom colors via manual input or color picker |
| Sidebar Background | Color Scheme - Sidebar Background; Choose preset or custom colors via manual input or color picker |
| Sidebar Menu Background | Color Scheme - Sidebar Menu Background; Choose preset or custom colors via manual input or color picker |
| Sidebar Menu Color | Color Scheme - Sidebar Menu Color; Choose preset or custom colors via manual input or color picker |
| Sidebar Icon Color | Color Scheme - Sidebar Icon Color; Choose preset or custom colors via manual input or color picker |
| Sidebar Menu Background (Active) | Color Scheme - Sidebar Menu Background (Active); Choose preset or custom colors via manual input or color picker |
| Sidebar Menu Color (Active) | Color Scheme - Sidebar Menu Color (Active); Choose preset or custom colors via manual input or color picker |
| Sidebar Icon Color (Active) | Color Scheme - Sidebar Icon Color (Active); Choose preset or custom colors via manual input or color picker |
| Sidebar Badge Background | Color Scheme - Sidebar Badge Background; Choose preset or custom colors via manual input or color picker |
| Sidebar Badge Color | Color Scheme - Sidebar Badge Color; Choose preset or custom colors via manual input or color picker |
| Button Background | Color Scheme - Button Background; Choose preset or custom colors via manual input or color picker |
| Button Color | Color Scheme - Button Color; Choose preset or custom colors via manual input or color picker |
| Field Outline Color | Define borders or outlines for input fields; Choose preset or custom colors |
| Main Box Background Color | Set primary container background; Choose preset or custom colors |
| Secondary Box Background Color | Define background for sub-sections; Choose preset or custom colors |
| Dropdown Background Color | Set menu dropdown background; Choose preset or custom colors |
| Highlight Color | Color Scheme - Highlight Color; Choose preset or custom colors via manual input or color picker |
| Highlight Background | Color Scheme - Highlight Background; Choose preset or custom colors via manual input or color picker |
| Heading Font Color | Color Scheme - Heading Font Color; Choose preset or custom colors via manual input or color picker |
| Font Color | Color Scheme - Font Color; Choose preset or custom colors via manual input or color picker |
| Secondary Font Color | Defines the color for supporting text; Choose preset or custom colors |
| General Accent Color | Color Scheme - General Accent Color; Sets accent hue for borders, buttons, icons |
| Content Font Color | Color Scheme - Content Font Color; Choose preset or custom colors via manual input or color picker |
| Link Color | Color Scheme - Link Color; Choose preset or custom colors via manual input or color picker |
| Link Color (Active) | Color Scheme - Link Color (Active); Choose preset or custom colors via manual input or color picker |
| Footer Background | Color Scheme - Footer Background; Choose preset or custom colors via manual input or color picker |
| Footer Color | Color Scheme - Footer Color; Choose preset or custom colors via manual input or color picker |
Advanced
The Advanced settings offer extensive customization for the DX 8 Trimeda Theme. You can define URLs for the favicon and logo, disable user profile photos, and configure the inbox for assignments. Additional features include enabling font size control, dark theme, responsive switch for mobile devices, and adding custom CSS or JavaScript. You can also insert HTML for subheaders, subfooters, and a home banner, and manage user menu shortcuts.
Fields to Configure:
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. Enabling Dark Theme on Chrome:
Dark Theme of DX8 Plain 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
The PWA settings ensure your application supports offline usage and push notifications. You can enable or disable PWA support and web push notifications and specify additional URLs to cache for offline functionality. These settings enhance the user experience by making the app more robust and accessible, even without an internet connection.
Fields to Configure:
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
The Login Page UI settings allow you to customize your application's login page. You can upload a background image and add custom HTML content before and after the login form. These configurations help create a more engaging and personalized login experience for users and ensure that the login page aligns with your application's branding and design.
Fields to Configure:
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 |
Permission settings
Permission settings control who can access and see the UI in the App Center. You can hide the UI from the App Center listing, manage permission types, and temporarily disable permission checking for testing purposes. This ensures that only authorized users can access specific UI elements, maintaining security and appropriate access control.
Fields to Configure:
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 |