This topic demonstrates how to override the default logo and style of the navbar for the EmpowerID Web interface.
Go to overrides.css inside webcdn/overrides/themes/empowerid
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; } |
Copy and paste the modified class into overrides.css.