Global Properties

DX9 Base Theme

• Menu Position: Determines the position of the menu
  • Dark Sidebar: A sidebar with a dark color design.
  • Light Sidebar: A sidebar with a light color design.
  • Dark Minimized: A minimized sidebar with a dark color design. 
  • Light Minimized: A minimized sidebar with a light color design. 
  • Dark Header: A dark horizontal header for navigation. 
  • Light Header: A light horizontal header for navigation. 
  • Dark Below Header: A dark horizontal header with two layers: the first layer for the app name label and the second layer for navigation. 
  • Light Below Header: A light horizontal header with two layers: the first layer for the app name label and the second layer for navigation. 
• Background Image: Theme background image added to the body of the page.
• Hide Sidebar User Menu: Check this option to hide the sidebar user menu.

Customize Color

• Background Image: Upload a theme background image added to the body of the page.
• Hide Sidebar User Menu: Check this option to hide the sidebar user menu.
• Primary Color:
  Color Scheme-Primary Color.
  Choose from the preset colors or custom. By choosing a custom color, you can define the color manually or through the color picker. 
• Background:
  Color Scheme-Background.
  Choose a body background color.
• Content Background:
  Color Scheme-Content Background.
  Select a main body content background color.
• Header Color:
  Color Scheme-Header color.
  Select a header bar background color.
• Header Font Color:
  Color Scheme-Header Font Color.
  Select a header bar font color.
• Sidebar Background:
  Color Scheme-Sidebar Background Color.
  Sidebar background color.
• Sidebar Font Color:
  Color Scheme-Sidebar Font Color.
  Sidebar/horizontal menu font color.
• Sidebar Icon Color:
  Color Scheme-Sidebar Icon Color.
  Sidebar/horizontal menu icon color.
• Submenu Background Color:
  Color Scheme Color-Sidebar Submenu Background.
  Sidebar/horizontal menu badge background color.
• Active Sidebar Background (Active):
  Color Scheme Color-Sidebar Active Background.
  Select a sidebar/horizontal menu hover/active background color.
• Sidebar Font Color (Active):
  Color Scheme-Sidebar Active Font.
  Select a sidebar/horizontal menu hover/active font color.
• Sidebar Icon Color (Active):
  Color Scheme-Sidebar Active Icon.
  Select a sidebar/horizontal menu hover/active icon color.
• Sidebar Badge Color:
  Color Scheme-Sidebar Badge Font.
  Select a Sidebar/horizontal menu badge font color.
• Sidebar Scrollbar Thumb Color:
  Color Scheme-Sidebar Scrollbar Thumb. Select a scroll bar background color.
• Footer Background:
  Color Scheme-Footer Background.
  Select a footer background color.
• Footer Color:
  Color Scheme-Footer Font.
  Select a footer font color.
• Border Color:
  Color Scheme-Border.
  Select a border color.

Size

• Sidebar Width: Width of the sidebar menu.
• Content Max Width: Max width of the main content.
• Content Padding Inline: Div padding left and right of the main content.
• Content Padding (Mobile): Div padding left and right of the main content during mobile view.
• Footer Height: Footer height.
• Footer Padding: Full footer padding (e.g., 16px 50px).
• Header Height: Height of the header.
• Header Padding: Full header padding (e.g., 24px 40px).
• Icon Margin Inline: Horizontal space around an icon, controlling left and right margins.
• Icon Size: Dimensions of the icon, ensuring consistent appearance.
• Item Height: Total height of an item, ensuring uniformity.
• Item Margin Block: Vertical space around an item, controlling margins above and below.
• Item Margin Inline: Horizontal space around an item, affecting left and right margins.
• Control Height: Height of interactive elements like buttons or input fields.
• Padding: Space between content inside an element and its boundary.

Style

• Border Radius: Deifnes the border radius. Default value is 6px.
• Border Radius LG: Horizontal inner menu border radius. Default value is 8px.
• Box Shadow Secondary: Horizontal inner menu box shadow. Default value is 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05).

Advanced

• Favicon URL: Define the path to custom Favicon URL.
• Logo URL: Define the path to custom Logo URL.
• Disable Profile: Option to remove the user's profile photo display.
• User Image: 
  • Hide
  • Gravatar Service
  • Using Hash Variable
    • Define Hash Variable To Retrieve User Image URL
    • #form.user_profile.image[{currentUser.id}]#
• Inbox: Manage how assignments are displayed.
  • No Inbox
  • Show all assignments
  • Show current App assignment only
• Home Icon URL: Home Icon URL address.
• Shortcut Link Label: Name for the shortcut link.
• Shortcut: Defines links to be parked under the Shortcut menu.
• User Menu Shortcut: Defines links to be parked under the User menu.
• Enable Font Size Control?: Check this to enable the ability to change the font size on UI runtime.
• Enable Responsive Switch in Mobile Device?: When checked, the Switch to the Desktop version link will be shown on the mobile device.
• Remove Auto Title from Process/Assignment form?: Process title and activity name will be removed from the assignment form when checked.
• Home Banner:  Insert custom HTML for Home Banner
• Custom CSS: Add custom CSS to style the UI.
• Custom JavaScript: Add custom Javascript for the theme.
• Sub header: Insert HTML for a subheader.
• Sub footer: Insert HTML for a subfooter.
• Disable Help Guide Feature?: Click to hide the help guide feature.

Progressive Web App (PWA) Settings

Fields to Configure:

• 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 the home screen, offline support, and push notifications.
• Disable Web Push Notifications: Click to disable web push notifications in this user view.
• Additional URLs to Cache: Enter paths relative to the context root.