Versions Compared

Old Version 1

changes.mady.by.user Phillip Hanegan

Saved on

compared with

New Version Current

changes.mady.by.user Phillip Hanegan

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

    Code Block
    languagecss
    /*	-----------------------------------
	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.

...