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 change the logo that appears on each page of the Web site.
Changing the logo involves overriding the CSS class that defines the image. In EmpowerID, this class is the eid-logo class, which contains properties that define the class, such as the background and the background size. When replacing the logo, you override the properties of the class, replacing the default values with yours. For eid-logo, these properties are as follows:
To override the logo, you create an overrides.css file with a custom definition for the eid-logo class and place that file within the overrides directory mentioned above. 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 change the default logo of the EmpowerID Web application and is divided into the following activities:
/*custom logo*/
.eid-logo{
background: url(images/ablogo.png) no-repeat;
background-size: 240px 63px;
width: 242px;
height: 63px;
margin-top: 5px;
}
You should see that the default logo has been updated to reflect the changes you made.