Advanced UI customization for 10Duke Login Application

This article provides information on some of the more advanced UI customizations that can be made to the look and feel of 10Duke Login Application.

Contact the 10Duke Integration Support team to find out more about the customizations available and to discuss the changes you want.

Visual style

  • Use default or outline buttons. See Bootstrap button styles.

    Default: Default buttons

  • Enable a shadow effect that produces some depth in the appearance.

    Default: Enabled

  • Enable the rounding of corners.

    Default: Enabled

  • Enable a gradient effect where the background uses a slight 3D effect instead of a solid color.

    Default: Disabled

  • Select the icon highlight color that overrides the color for the icons in the profile section.

    Default: Info color (see basic customizations)

  • The alert (notification) style:

    • Solid

      The background has the exact defined state color (see basic customizations), and the foreground is either light or dark.

    • Faded

      The background has a lighter or darker shade of the defined state color, depending on the color scheme, and the foreground is either light or dark.

    • Solid icon (default)

      The notification has two parts: an icon part that behaves like the solid option above, and a copy part that behaves like the faded option.

Images and icons

  • Show or hide icons.

    Default: Shown

    Regardless of this setting, some icons are always shown, because in some cases there’s not enough space to show a text label.

  • The profile picture background image used as the background for the user’s profile picture element on the profile page.

    The value can be an actual image file, a plain color, or an (S)CSS gradient.

    Default: linear-gradient(165deg, rgba(#FFF, 0.1) 0%, rgba(#FFF, 0.25) 49%, rgba(#FFF, 0) 51%), linear-gradient(75deg, #18a19c 0%, #027db5 100%)

Effects

  • Enable transition animations, for example, for validation errors and button state transitions. Doesn’t affect page transitions.

    Default: Enabled

Custom CSS

If the above customizations are not sufficient for your needs, a custom (S)CSS can be appended to the build that overrides the Login Application styles.

On this page