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:
background - Specifies the logo
background-size - Specifies the size of the background
display - Specifies the box type for the logo
width - Specifies the width of the logo
height - Specifies the height of the logo
text-indent - Specifies the horizontal space the first line of text should be moved from the starting edge
overflow - Specifies what to do when the size of the image is larger than the background
margin-top - Specifies the distance between the logo's top border and the logo's outer edge
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:
From your EmpowerID server, navigate to \Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Themes\EmpowerID\Images. If you are missing any the folders, please create them.
Place your custom logo in the Images folder, as shown by the below image. In the image, the name of the logo is ABLogo; however, the name is not important.
To override the eid-logo CSS class
Using any text editor create a CSS file named overrides.css and place it in the EmpowerID folder that is located within the EmpowerID Web CDN Overrides directory. The path to the file should be "\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Themes\EmpowerID\overrides.css."
Add code to overrides.css to replace the default logo with your custom one. This code needs to override the properties of the eid-logo class that you want to change. In the example, we are changing the following properties:
background - specifying the custom logo
background-size- specifying the size of the background
width - specifying the width of the logo
height - specifying the height of the logo
margin-top - specifying the distance between the logo's top border and the logo's outer edge