Example of Customizing a Login Page

You can add a customized css file to reflect changes for the login pages.

The following sample.css file has been customized for achieving the customized login page in Figure 13-1 for the Acme Group of company.

/* general styles
------------------------------- */
body { 
  margin:0; 
  padding:0; 
  background:#fff url("/osp/TOP/images/login_bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family:Arial, Helvetica, sans-serif; 
}
img { 
  border:none; 
  max-width: 100%;
}
/* login box 
------------------------------- */
div.page-container {
  position:absolute;
  top: 50%;
  left: 0px;
  width:100%;
  margin:-265px auto 0 auto;
}
div.dialog {
  border: 12px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  width: 318px;
  max-width:100%;
  margin:0 auto;
  background-color: transparent;
}
div.dialog-content {
  height:525px;
  padding:0 15px;
  background:url(/osp/TOP/images/acme.png);
  background-color:#414749 ;
  background-position:180px 20px;
  background-repeat:no-repeat;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  }
.dialog-header {
  margin:0; 
  padding: 150px 0 40px 0; 
  color:#48c6e7; 
  font-size:22px; 
  font-weight:100;
  background: none;
}
div.dialog-header-content { 
  display:block; 
  color:#fff; 
  font-weight: 200;
}
p { margin:0; padding:0; }
div.dialog-body {
  padding: 0;
}
.product-name {
  margin: 0;
}
#password, #Ecom_User_ID {
  color: #000 !important;
  background-color: #999; 
  font-size: 13px; 
  line-height: 20px; 
  margin: 0 0 3px 0; 
  padding: 11px 10px 12px; 
  width: 100%; 
  box-sizing: border-box; 
  border: none; 
  border-radius: 0; 
}
.dialog-footer-content {
  display: none;
}
.button-container button, .btn { 
  display: block; 
  text-align: center; 
  color: #fff; 
  font-size: 13px; 
  background-color: #48c6e7; 
  border: none; 
  margin: 30px 0 0 0; 
  padding: 11px 10px 12px; 
  box-sizing: border-box; 
  width: 100%; 
  cursor: pointer; 
  -webkit-appearance: none; 
  text-decoration: none;
}
.button-container button:hover { 
  background-color:#00B4DF;
  border: none;
}
.input-box input {
  box-sizing: border-box;
  background-color: #999;
}
p.error {
    color: #cccccc;
    font-size: 13px;
    margin: 0;
    padding: 0 0 18px;
}
#logoutmsg, #logoutmsgsub { color:#fff; }
.error h1 { padding-bottom:20px; }
.help p { margin:0; padding:20px 0 0 0; font-size:11px; }
.help a { color:#cccccc; text-decoration:none; }
.help a:hover { color:#fff; }
.title {
  display: none;
}
.image-custom-link, .login-custom-link {
  display: inline;
}
.image-custom-link a {
  padding: 0;
}
.image-custom-link a:hover {
  color: #fff;  
  background-color: transparent;
  display: inline;
  padding: 0;
}
.image-custom-link img {
  height: 0;
  width: 0;
}
#loginCustomLink1 {
  float: right;
}
/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width:480px) {
  div.page-container { 
    position: static;
    top: 0;
    margin: 0;
  }
  div.dialog {
    width: auto;
    margin: 0;
  }
}

Perform the following steps to add the sample.css file to the osp-custom-resources.jar file.

You can edit the logo displayed on the login page of web authentication event using the parameter OIDPENDUSER.LoginProductImage available in the Login page properties.

For example, to edit the logo of the login page of an OAuth 2.0 event in the English language, perform the following:

You can edit the copyright text displayed on the login page of web authentication event using the parameter OIDPENDUSER.50004 available under the JSP Strings.

For example, to remove the copyright note that is displayed on the login page of an OAuth 2.0 event in the English language:

You can edit the branding text displayed on the login page of web authentication event using the parameter OIDPENDUSER.LoginProductName available in the Login page properties section of the oidp_enduser_custom_resources_en_US.properties file.

For example, to edit the branding of the company to Acme Group, perform the following:

If you want to remove the branding text Acme Group, perform the following:

This removes the branding text, Acme Group, from the web authentication event - login page.

You can add links for the login page of the web authentication event.

For example, if you want to add the link Forgotten Password that is displayed on the login page in the English language, add the following: