Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

NameDescription
Menu Position

Determines the position of the menu

  • Side Menu
  • Minimized Side Menu
  • Horizontal Menu below Header
  • Horizontal Menu inline with Header
  • No Menu
Color Scheme

Color Scheme:

Background ImageUpload 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

Panel
borderColorpurple
bgColorwhite
titleColorblack
borderWidth1
titleBGColor#ddccff
borderStylesolid
titleNew feature

This is a new feature in Joget DX 8 version 8.1 onwards

UI Theme Compact UI support

  • A new theme provide feature like Gmail density setting like Compact, Default & Comfortable
  • This setting will adjust the white space, padding & margin
  • The Compact Theme can be enabled in UI builder, under Settings, in Configure Layout > Configure (Selected theme) > Advanced.

    Image Added

Figure 4: Advanced

NameDescription
Favicon URLDefine the path to custom Favicon URL.
Logo URLDefine the path to custom Logo URL
Disable ProfileDisable fetching user's profile photo
User Image
  • Hide
  • Gravatar Service
  • Using Hash Variable
    • Define Hash Variable To Retrieve User Image URL

    • #form.user_profile.image[{currentUser.id}]#
Inbox
  • No Inbox
  • Show all assignments
  • Show current App assignment only
Home Icon URLHome Icon URL address
Shortcut Link LabelShortcut Link Label
ShortcutDefines links to be parked under Shortcut menu
User Menu ShortcutDefines 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.

Image Added

Figure 4.1: Changing From Light Theme to Dark Theme


Image Added

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 BannerCustom HTML for Home Banner

Custom CSS

Custom CSS for the theme
Custom JavaScriptCustom Javascript for the theme
Sub HeaderSub header text
Sub FooterSub footer text
Disable Help Guide Feature?Click to hide the help guide feature.

...