Override the Default Logo and Navbar Style

This topic demonstrates how to override the default logo and style of the navbar for the EmpowerID Web interface.

How to override the default logo and navbar style

1. Go to overrides.css inside webcdn/overrides/themes/empowerid

2. Pick the sections from below text to customize those corresponding items on the page and change the values accordingly.
   
   

   /* ----------------------------------- Login ----------------------------------- */ #empowerId-login .login-icon { vertical-align: middle; display: flex; background: url(images/logo-empowerid.svg); width: 25px; height: 24px; } /* ----------------------------------- Login Custom Navbar ----------------------------------- */ #empowerId-login .custom-login-navbar { padding: 20px 20px; } #empowerId-login .custom-login-navbar-brand { display: inline-block; padding-top: .3125rem; padding-bottom: .3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; white-space: nowrap; } #empowerId-login .custom-login-navbar-logo { background-image: url(''); background-repeat: no-repeat; background-size: 100%; float: left; height: 48px; margin-top: 10px; width: 142px; } /* ----------------------------------- Login Custom Background ----------------------------------- */ #empowerId-login { background-image: url(images/login-bg.jpg); } /* ----------------------------------- Authenticated ----------------------------------- */ .eid-logo { background: url(images/empower-id-logo.svg); display: inline-block; width: 131px; margin-top: 17px; height: 14px; text-indent: -9999px; overflow: hidden; vertical-align: middle; background-repeat: no-repeat; }

3. Copy and paste the modified class into overrides.css.