Advanced UI customization for 10Duke OrgAdmin

10Duke OrgAdmin styles are built on Bootstrap 5 Sass themes, and the default 10Duke look and feel is provided as a Bootstrap theme.

The Bootstrap-based implementation offers a wide range of possibilities for customization, from simple modifications to Bootstrap Sass variables to a partial or complete replacement of the default look and feel.

This article provides an overview of the implementation options and information on some of the more advanced UI customizations that can be made to the look and feel.

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

Implementation options

You can build your customizations either on top of the built-in 10Duke theme, or you can drop the 10Duke theme and start building your own look and feel on top of the standard Bootstrap 5 styles.

Even if you drop the 10Duke look and feel, the overall layout still remains. For example, there’s always a header bar at the top, data is rendered inside tables with a set of tools available for controlling the table settings, and the features for modifying data are rendered into modal dialogs.

Whichever option you choose, the majority of the Bootstrap Sass variables can be customized as needed.

OrgAdmin also provides some custom variables that allow you, for example, to easily override the header or sidebar colors, size, and availability. The default values of these custom variables follow standard Bootstrap Sass variables. This means that when you use your own theme, these variables are updated to match but can still be easily overridden when needed.

The built-in 10Duke theme consists of separate SCSS partials. This allows you to pick the parts of the 10Duke theme that you like, and drop the ones that you don’t want to use.

For example, OrgAdmin uses custom input and label styling that is defined in an SCSS partial. An empty input field shows the label as placeholder text, and after input has been entered, the label is rendered in a tab-like style at the top of the input field. If you prefer a normal “label above input field” layout or Bootstrap’s floating label styles, you can drop this SCSS partial and update the Bootstrap Sass variables as needed.

Light and dark mode

By default, OrgAdmin follows the user’s preferences and selects the Bootstrap light or dark mode automatically. You can also disable the automatic selection and set the UI to always use light or dark mode.

In addition to the application-level light and dark mode, OrgAdmin also supports these separately for the header. This means you can define the light mode for the application while still having a dark background for the header, or the other way around.

Colors

All of the colors defined by Bootstrap can be overridden to match your brand. For example, you can set the primary color to red instead of the default blue.

In addition to changing the colors, you can control how and where they are used. For example, by default the header background follows the primary color, which means any change in the primary color value is applied to the header. You can override this and set the header background to any color, or reference to another Bootstrap color.

Application-level settings

  • The minimum screen width: the narrowest possible width into which OrgAdmin tries to fit all content before starting to show a horizontal scrollbar.

    Default: 23.75rem (by default, 1 rem = 16px)

  • The page padding to control the amount of empty space surrounding the page content.

    Default: 1.5rem

Header and sidebar

  • The light or dark mode selection for the header (the top toolbar). The sidebar always follows the application-level color mode.

    Default: Dark

  • The light or dark mode selection for the header drop-down menus.

    Default: Follows the header setting

  • The header padding.

    Default: Follows the application-level setting

  • The breakpoint name below which the sidebar navigation is replaced with a header navigation.

    Default: lg

  • The breakpoint name below which the header’s navigation items are collapsed into a “hamburger” or drop-down menu.

    Default: lg

  • The sidebar width.

    Default: 15rem (by default, 1 rem = 16px)

  • The sidebar background and border.

    Default: Follows the settings for cards, which in turn inherit the body background and translucent border color. The card settings are also used, for example, by the cards on the OrgAdmin dashboard.

Object state

OrgAdmin uses the Bootstrap 5 theme colors to highlight various object states, such as whether a license is valid or invalid, or whether an invitation is pending or has been accepted, or what the status of a user is.

For this, OrgAdmin uses mappings that bind each state of an object to a Bootstrap-based theme color. For example, a user’s Suspended state is mapped to the danger color and the Admin state to the primary color.

These mappings can be freely customized, and the colors don’t need to be unique. The mapped state colors can be used as element backgrounds or text colors depending on the case.

The state highlights are mostly used in the status column found in many OrgAdmin tables. The state can be displayed as a Bootstrap badge in the mapped color, or as text accompanied by a “dot” icon that uses the mapped color.

Alerts

OrgAdmin alerts (notifications) follow the styling of Bootstrap alerts and related Sass variables.

OrgAdmin also provides extended support for icons. Before the notification message, OrgAdmin can optionally display an icon block that uses the corresponding Bootstrap theme color as the background. The notification message itself follows the Bootstrap styling.

Icons

OrgAdmin uses two types of icons: basic and two-tone. Basic icons are used, for example, in the sidebar, and two-tone icons in buttons in the modal dialogs that open from OrgAdmin tables.

For both types of icons, one icon color is defined for normal usage, and optionally a secondary icon color can be defined for usage on top of a background. For example, a blue icon works nicely on top of a white or black application background, but a secondary color is needed when the icon is displayed, for example, on top of colored buttons, or on top of the highlighted background for the selected item in the sidebar.

Two-tone icon graphics have two parts, a foreground element and a background element. By default, both parts use the same icon color but the background element is partially transparent, providing a two-toned effect for the icon. For the background element, the color and opacity can be customized, and optionally a secondary color can be defined for usage on top of a background.

Effects

  • To indicate something is loading or being processed, OrgAdmin uses the Bootstrap border spinner. This is extended with support for a backdrop (similar to Bootstrap’s modal backdrop), which is used when it’s necessary to block user interaction with the UI while processing.

    The color and size of both the spinner and the backdrop can be customized.

    • The spinner color is by default inherited from the parent so it’s usually the same as the body color, but the default can be overridden, for example, to use the primary brand color. The opacity can be controlled separately, with 0.25 as the default.

    • The default spinner backdrop color is the body background color. The opacity can be controlled separately, and matches the Bootstrap modal backdrop opacity by default.

    • The spinner size is based on the two size variants supported by Bootstrap:

      • small: 1rem (by default, 1 rem = 16px). Not used by the default styling.

      • normal: 2rem. Used by default, for example, with the infinite scrolling table (when the table is loading more items after you scrolled to the bottom).

      OrgAdmin also supports a custom size variant large, which is 4 × normal size. OrgAdmin uses this the most in combination with the backdrop to cover, for example, modals, summary cards, and other larger sections while processing data.

  • OrgAdmin tables support column reordering by dragging and dropping the column header.

    By default, OrgAdmin uses the primary color to highlight the dragged element and the drop position.

On this page