EmpowerID provides an overrides directory within the EmpowerID Web CDN that can be used to customize the theme of the Web site. This allows you to change the default look and feel of the site to match your corporate brand or that of a partner who uses the site. To do so, you place the appropriate CSS files, images and scripts within the specified folders of the overrides directory. EmpowerID then "picks up" your files from the overrides directory, replacing the application's default files with them. This topic demonstrates this by showing you how to customize the appearance of the login form. Specifically, the elements of the login form that will be changed include the following:
\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Themes\EmpowerID
Customizing the login form involves overriding the CSS classes that define the elements of the form. For the items mentioned above, these classes include the eid-login-form class, the eid-icon-help class, the eid-icon-account class, and the eid-login-option-list class. You override these classes by creating an overrides.css file with custom definitions for those classes and place that file within the above-mentioned overrides directory. The path to the file is critical as EmpowerID will not incorporate your changes if the path is incorrect. In a default installation of EmpowerID, the path looks as follows:
\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Themes\EmpowerID
This topic demonstrates how to customize the appearance of the login form that is used in the EmpowerID Web application and is divided into the following activities:
When adding your code, be sure to name the class exactly as shown. If you do not, EmpowerID will ignore your changes.
/*custom login form background and color*/
.eid-login-form{
background: #fff;
background: -webkit-linear-gradient(top, #1a82f7, #fff);
background: -moz-linear-gradient(top, #1a82f7, #2f2727);
background: linear-gradient(bottom, #1a82f7, #2f2727);
color: #000;
}
When adding your code, be sure to name the class exactly as shown. If you do not, EmpowerID will ignore your changes.
/*custom login form link color*/
.eid-login-form a{
color: #d66800;
}
/*custom login form link behavior on hover*/
.eid-login-form a:hover{
text-decoration: underline;
}
When adding your code, be sure to name the class exactly as shown. If you do not, EmpowerID will ignore your changes.
/*custom login option list border and margin*/
.eid-login-option-list{
border: 1px solid #d66800;
margin-bottom: 3px;
}
/*custom login options padding*/
.eid-login-option-list li{
padding: 3px;
}
When adding your code, be sure to name the classes exactly as shown. If you do not, EmpowerID will ignore your changes.
/*custom help icon background color*/
.eid-icon-help{
background-color: #d66800;
}
/*custom account icon background color*/
.eid-icon-account{
background-color: #d66800;
}
You should see that the login form has been updated to reflect the changes you made.