Changing the Login Page Background Image and Welcome Message

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 background image on the Login page involves overriding the CSS class that defines the image. In EmpowerID, this class is the eid-login-custom class, which contains properties that define the class. When replacing the image, you override the background-image property so that it points to the new image.

To override the default background image, you create an overrides.css file with a custom definition for the eid-login-custom 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 path should already exist; if it does not, you need to create it.

This topic demonstrates how to change the default logo of the EmpowerID Web application and is divided into the following activities:

To add the custom background image to the overrides directory

  1. 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.
  2. Place your custom background image in the Images folder, as shown by the below image. In the image, the name of the background image is coffeeshop; however, the name is not important.

To override the eid-login-custom CSS class

  1. Using any text editor create a CSS file named overrides.css (if it does not already exist) 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".

  2. Add code to overrides.css to replace the default background image on the login page with your custom one. This code needs to override the background-image property of the eid-login-custom class.
    3. Be sure to replace the name of image in the below code example with your image.
    
    /*custom logo*/
    .eid-login-custom{
         background-image: url(images/coffeeshop.png);
    }
  3. Save your changes.

To replace the Welcome Message

The Welcome Message that appears on the Login page is a Localized String object that can be changed to allow you to display a message that reflects your corporate brand. This procedure demonstrates how to do so.

  1. From the Navigation Sidebar, navigate to the Locale Key Entry page by expanding Admin > Miscellaneous and clicking Localized Text.
  2. From the Localized Strings tab of the Locale Key Entry page, search for Welcome to EmpowerID.
  3. From the Search Results grid, click the LoginPageWelcome link.

  4. From the Locale Key Details page that appears, click the Welcome to EmpowerID edit link. Edit links have the Pencil icon.

  5. Replace the text in the Default Value field with your custom message.

  6. Click the Translations tab and edit each translation as needed by clicking the Edit icon to the left of the translation records.

    7. In the Translated Text dialog that appears, replace the text in the Value field and then click Save.

  7. Log out of the Web application and reset IIS.

To test the CSS and text override

  1. From your browser, navigate to the Login page for the EmpowerID Web application.

    2. You should see that the default Welcome Message and background image have been updated to reflect the changes you made.

    You can revert back to the original logo by removing the eid-logo class from the overrides.css file.