Skip to main content

Override the Default Logo and Navbar Style

You can customize the logo and navbar styling for the EmpowerID Web interface by overriding default CSS rules in the overrides.css file. These changes allow you to apply your own branding without modifying EmpowerID’s installed files.

Update the Logo and Navbar Style​

  1. Open the following file:
webcdn/overrides/themes/empowerid/overrides.css
  1. Add or modify CSS rules to replace the logo, adjust navbar layout, or change background images.

Example CSS​

/* Login icon */
#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 logo */
.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;
}
  1. Save the file.

Any changes made in overrides.css override the default styling when the web interface loads.