Customizing the Login Form

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:

  • The background and color of the text
  • The color of the links
  • The border and margin of the option list
  • The padding of each option in the option list
  • The background color of the help and account icons
The styles for the default theme of the EmpowerID Web application are defined by the classes in the design.css file, which is located at: 
\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 path should already exist; if it does not, you need to create it.

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:

To override the CSS

  1. 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."
    2. If overrides.css already exists, you just need to open and edit the file for the header as shown below.

  2. Add code to overrides.css to change the default background and color of the login form with yours. This code needs to override the properties of the eid-login-form class. In the example, we are changing two properties, the background property and the color property. Since we are only changing these two properties, we do not need to add the others to the custom class definition.

    3. 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;
    }
  3. Add code to overrides.css to change the color of the form's links as well as the text decoration when a user hovers over those links.

    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;
    }
  4. Add code to overrides.css to change the border and margin of the login option list as well as the padding between those options.

    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;
    }
  5. Add code to overrides.css to change the background color of the help and account icons.

    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;
    }
  6. Save your changes.

To test the CSS override

  1. Open your browser and navigate to the EmpowerID Web application in your environment.

    2. You should see that the login form has been updated to reflect the changes you made.

    You can revert back to the original login form by removing the classes you changed from the overrides.css file.