Advanced UI customization for 10Duke My Licenses and 10Duke OrgAdmin

The styles in 10Duke My Licenses and 10Duke OrgAdmin 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.

Customizations are implemented separately for My Licenses and for OrgAdmin. 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 of these two UI applications.

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

Implementation options

For both My Licenses and OrgAdmin, 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 and data is rendered inside tables. In OrgAdmin, tables always come 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.

Both UI applications also provide some custom variables that allow you, for example, to easily override the colors, fonts, sizing, and responsive layout. 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, My Licenses and OrgAdmin follow the user’s preferences and select 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, My Licenses and OrgAdmin also support 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.

Screen width

The minimum screen width: the narrowest possible width into which My Licenses and OrgAdmin try to fit all content before starting to show a horizontal scrollbar.

Default: 23.75rem (by default, 1rem = 16px)
Note that My Licenses also has a maximum content width, which follows the Bootstrap fluid container breakpoints. This keeps the content in a compact and readable size even with bigger screen sizes.

The light or dark mode selection for the header (the top toolbar).

Default: Dark
The light or dark mode selection for the header drop-down menus.

Default: Follows the header setting
The breakpoint name below which the header’s navigation items are collapsed into a drop-down or “hamburger” menu. See more about Bootstrap breakpoints.

My Licenses default: sm

OrgAdmin default: lg

Icons

My Licenses and OrgAdmin use two types of icons: basic and two-tone. For example, OrgAdmin uses basic icons in the sidebar, and two-tone icons in buttons in the modal dialogs that open from 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. In addition, icons can be used with state colors, for example, to indicate success or error status.

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.

Spinner

To indicate something is loading or being processed, My Licenses and OrgAdmin use 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, 1rem = 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).
The UI applications also support a custom size variant large, which is 4 × normal size. This is used the most in combination with the backdrop to cover, for example, modals, summary cards, and other larger sections while processing data.

OrgAdmin-specific customizations

The following additional customizations can be made in OrgAdmin.

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

Default: lg
The sidebar width.

Default: 15rem (by default, 1rem = 16px)
The sidebar background and border. The OrgAdmin sidebar always follows the application-level color mode.

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.

Column reordering

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.