Login Application customization

If you’re using the 10Duke Login Application component, the appearance of the UI pages can be customized to match your brand, and you can provide the UI in the languages needed by your users.

This article provides you an overview of the customizations that can be made. Contact the 10Duke Integration Support team about the changes you want.

The Login Application styles are built on top of Bootstrap 4.6.0 using the Bootstrap Syntactically Awesome Stylesheet (SASS) assets. Many of the Bootstrap SASS variables are available for customization, but the styles have been extended and some values are fixed. The Login Application also provides some custom variables to help with the branding.

See Bootstrap documentation for a full list of Bootstrap variables. Note that some of these cannot be customized in the Login Application. You can discuss any specific needs you have with the 10Duke Integration Support team.

Customization and localization of UI texts

The UI texts are fully customizable. No new text elements can be added, but every existing piece of text in the UI can be overridden.

Note: If you’re providing a localized UI in multiple languages (see more below), make sure you provide an overriding text in all the available languages.

The Login Application provides the standard UI texts localized in 14 languages (the ISO 639‑1 language code and ISO 3166 country code indicated below):

  • Czech, cs-CZ

  • Danish, da-DK

  • Dutch, nl-NL

  • English (American), en-US

  • English (British), en-GB

  • Finnish, fi-FI

  • French, fr-FR

  • German, de-DE

  • Italian, it-IT

  • Norwegian, no-NO

  • Portuguese, pt-PT

  • Slovak, sk-SK

  • Spanish, es-ES

  • Swedish, sv-SE

You can choose which of the supported languages you want to provide in your UI.

New languages can also be added to the Login Application according to your needs. 10Duke provides a translation service with a translation partner. If you prefer to handle the translation work yourself, 10Duke will provide you with the resource files for translation.

Depending on the configuration, the Login Application supports the following ways for the end user to request the UI in a specific language.

  1. The locale can be provided in the URL: /<locale>/user/login. The Login Application tries to find the best possible match for the locale from the available language options.

    If you’re allowing end users to switch their UI language in the Login Application, the locale is written in the URL.

  2. If there’s no locale in the URL, the Login Application shows the UI in the configured default language. If all else fails, American English is used.

The following type of values are supported in <locale> in the URL:

  • A two-letter language code with lowercase characters (a-z), such as en or es

  • A two-letter language code and a two-letter country code separated with a hyphen, with lowercase characters (a-z), such as en-us or es-mx

For more information on localization and the available configuration options, contact the 10Duke Integration Support team.

Basic customizations

With the basic customization options, you can customize the UI colors, fonts, and images to match your brand.

Colors

You can customize the use of colors in the UI as follows. Provide the colors as Hex color codes.

  • Basic colors

    • The primary color used in buttons and active state highlights. Default: #017cb5

    • The secondary color used in buttons. Default: #6e7577

    • The dark color used, for example, to display text on top of a light background. Ideally nearly black but allows for a tint/shade. Default: #333333

    • The light color used, for example, to display text on top of a dark background. Ideally nearly white but allows for a tint/shade. Default: #fafafa

  • Semantically meaningful state colors

    • The success state color used for buttons, success notifications, and valid state indicators. Default: #76ab0d

    • The info color used for additional information notifications and highlights. Default: #0d8ea9

    • The warning state color used for notifications that contain important information that affects the current user flow, such as “password required” or “log in to continue”. Default: #e6a205

    • The danger state color used for delete, remove, and disable buttons, failure notifications, and invalid state indicators. Default: #d9534f

  • Color scheme settings that affect how colors are used

    • The color scheme setting that affects how the color scheme base color and the other colors defined above are applied:

      • Light color scheme (default)

        Applies the defined colors to produce a light-colored UI where the backgrounds are lighter and the content (such as buttons and texts) are darker.

        If you choose the light color scheme, the color scheme base color should define a fairly light color to produce good results.

      • Dark color scheme

        Applies the defined colors to produce a dark-colored UI where the backgrounds are darker and the content (such as buttons and texts) are lighter.

        If you choose the dark color scheme, the base color scheme should define a fairly dark color to produce good results.

    • The color scheme base color used for element backgrounds.

      By default, the element backgrounds vary around this defined base color, some being slightly darker and others slightly lighter. This creates a monochromatic unified appearance while still allowing for elements to be grouped together with a specific background shade.

      The base color should be a light or dark color depending on the selected color scheme.

      Default: With the default light color scheme, this is the light color from basic colors. If you switch to the dark color scheme, the dark color from basic colors is used by default.

Fonts

You can define three types of fonts:

  • A base font used for everything (except when overridden by the other font settings). Default: Source Sans 3 (sans-serif)

  • An optional heading font used for titles that overrides the base font. Default: Montserrat (sans-serif)

  • A monospace font used to display the user’s initials in the circular “profile picture” element on the profile page. Default: Roboto Mono (monospace)

You can define a font in the following formats:

  • A web font import, for example, as a free Google web font import URL or a commercial web font import URL

    Web fonts are externally hosted font assets that are loaded automatically and don’t rely on the user having the specified font installed on their system.

    Example value: https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i&display=swap

  • A fallback list of “built-in” font names such as Arial

    A built-in font fallback list attempts to use the left-most font if it’s installed and available on the user’s system. If the font is not found, the next one is attempted.

    Example value: Arial, Helvetica, sans-serif

Images

You can change the following images:

  • The logo

    • The image should preferably be a transparent SVG or PNG file. Default: 10Duke “D” logo

    • You can also define the preferred logo height. Provide a numeric value that indicates the desired height of the logo. The resulting actual height may be lower depending on the available screen size and the aspect ratio of the logo. Default: 100px

  • The icon used to generate the favicon (the icon displayed on the browser tab) and similar icon images.

    The image should preferably be a rectangular and transparent SVG or PNG file. Default: 10Duke “D” logo

Advanced customizations

For more advanced use cases, you can apply the following customizations to the visual style and effects:

  • Visual style

    • Whether default or outline buttons are used. See Bootstrap button styles. Default: Default button

    • Enable or disable the shadow effect that produces some depth in the appearance. Default: Enabled

    • Enable or disable rounding of corners. Default: Enabled

    • Enable or disable a gradient effect where the background uses a slight 3D effect instead of a solid color. Default: Disabled

    • The alert (notification) style:

      • Solid

        The background has the exact state color 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 above.

  • 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%)

  • Colors

    • The icon highlight color that overrides the color for the icons in the profile section. Default: Info color (see basic customizations above)

  • Effects

    • Enable or disable transition animations, for example, for validation errors and button state transitions. Default: Enabled

      Note that this doesn’t affect page transition animations.

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