Take Advantage of Site-Wide Branding in NEIS 4.0

Since its initial release, the Non-Employee Identity Suite (NEIS) has featured the ability to deeply customize the website to tailor the experience for each installation. You have the ability to fully customize the individual forms, and the text displayed on each screen, as well as the ability to alter the Look & Feel including the site colors, style, and logo.

Version 4.0 of NEIS introduces a refresh of the user interface, which includes – among other changes – a streamlined & simplified approach to customizing the Look & Feel to brand the site.

Prior to NEIS 4.0

Prior to version 4.0 of NEIS, the branding for the Authentication Service portion of the site was configured separately from the branding for the rest of the site.

In addition, providing custom CSS required the user to provide an entire set of replacement CSS rather than only the parts that needed to be changed; tweaking a few colors may require supplying thousands of lines of CSS.

New Experience

Starting with version 4.0 of NEIS, the experience for customizing branding across the entire site has been simplified as follows:

  • There is now a single set of Look & Feel options for configuring the site. These settings apply to the entire site, including the Authentication Service and the ID Portal.
  • The custom CSS supplied by the user now modifies, rather than replaces, the default CSS for the site. This means the user only needs to supply the changes desired rather than an entirely new set of CSS.

To customize branding in NEIS 4.0 (and newer), navigate to Settings > Look & Feel > Site-wide Branding. You can use the on-screen elements to browse for an alternate banner logo and to specify custom CSS.

Out-of-the-box, the field for custom CSS has tweaks to the colors (documented with comments) that can be used as a basis for further changes or removed entirely to revert to a completely unbranded Look & Feel.

/* the portion of the top navbar that appears above the sidebar with the banner logo in it */
header.navbar-dark { background-color: rgb(30,85,152); }
/* the portion of the top navbar that appears above the page content with the menu items in it */
nav.navbar-light, nav.navbar-dark { background-color: rgb(30,85,152); }
nav.navbar-light .navbar-nav-link { color: rgba(255,255,255,.9); }
nav.navbar-light .navbar-nav-link:focus, nav.navbar-light .navbar-nav-link:hover { color: rgb(255,255,255); }
/* the main sidebar shown to the left of the page */
nav.sidebar-dark { background-color: rgb(25, 33, 51); }
nav.sidebar-dark .nav-item > .nav-link.active { background-color: rgb(10, 14, 19) !important; }
/* the items displayed on the admin dashboard */
.dash-col-a > div[id*="dash-item"] { background-color: rgb(28, 106, 163); }
.dash-col-b > div[id*="dash-item"] { background-color: rgb(89, 168, 227); }
.dash-col-c > div[id*="dash-item"] { background-color: rgb(144, 197, 237); }

These changes help to consolidate and simplify the support for Look & Feel customization in NEIS, while forming a basis for future enhancements aimed to further simplify this process.

For more information, please see the NEIS User Guide.