Versions Compared

Key

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

...

DX 8 Color Admin Theme is one of the theme themes available for Joget DX 8.

Figure 1: DX 8 Color Admin Theme in desktop view

...

To change the theme, at the UI Builder, click properties then under theme select DX 8 Color Admin Theme ; (UI Builder → Properties → Settings→ Theme).

Image RemovedImage Added

Figure 2: Changing the theme

Theme Properties

Configure Layout

Image RemovedImage Added

Figure 3: Configure Theme

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

plain theme fig 3.pngImage RemovedImage Added

Figure 4: Advanced

...

Progressive Web App (PWA) Settings

Image RemovedImage Added

Figure 5: Progressive Web App (PWA ) Settings

NameDescription
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 NotificationsClick to disable web push notification in this UI.
Additional URLs to CacheEnter paths relative to context root.

Login Page UI

Image RemovedImage Added

Figure 6: Login Page UI

NameDescription
Login Page BackgroundUpload 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

Image RemovedImage Added

Figure 7: Configure Permission

...