Change the Theme for Tenants

Owned by Phillip Hanegan
Feb 29, 2024
4 min read

The default look and feel of the EmpowerID Web application can be changed by overriding the CSS rules and logos used by EmpowerID. In this way, you can style the Web application to match your corporate brand or that of a partner who uses the Web application. This topic demonstrates this by changing the theme of the EmpowerID Web application based on the FQDN of the server used to access the application. The components of the application that will be changed include the following:

  • The logo used by the Web application

  • The background image that appears on the login page

  • The title and content text that appears on the login page

Changing the theme in this way does not affect the way the application looks to users accessing it apart from the specified FQDN.

To accomplish the above, you do the following:

  • Change the default Web application logo and background image of the login page

  • Create a CSS file that overrides the default CSS rules of login page

  • Test the new theme

To customize the EmpowerID Web application in the manner discussed in this topic, you must first create a new folder named after the FQDN or fully resolvable DNS of the tenant in the Overrides/Tenants directory of the EmpowerID Web CDN. For a typical installation of EmpowerID, the path to the folder is "\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants\CustomTenantFolder," where "CustomTenantFolder" is the name of the folder you are creating. Once you have added the folder, you need to do the following:

  1. Create a child folder named Themes in the custom folder. For example, if you are creating a custom FQDN folder for a Tenant with a FQDN of sso.andysbeans.com, you first create a sso.andysbeans.com folder in the above-mentioned director, then create within that folder the Themes folder.

  2. Create a child folder named EmpowerID in the Themes folder.

  3. Create a child folder named Images in the EmpowerID folder.


Once you have added these folders, you then add the appropriate files needed to customize the look and feel of the Web application. When users access the Web application with the custom FQDN, EmpowerID pulls the files in the custom tenant folder, replacing the default CSS, JavaScript and image files of the Web application with those located in that directory. This allows you to customize the Web application for any number of tenants who access your system without affecting the look and feel of the application in your environment.

 

Change the default Web application logo and login page background image

  1. From your EmpowerID server, navigate to the images folder you created within the custom tenant folder. The path to the folder is:
    \Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants\<YourCustomTenant>\Themes\EmpowerID\Images

  2. Place your custom Web application logo and login page background image in to the folder, as shown in the below image. In the image, the name of the custom logo is ABLogo and the name of the custom background image is ABShop, but the files can be named anything.

Create a CSS file that overrides the default CSS rules of the login page

  1. Open a text editor and create a new CSS file named overrides.css, placing it within the EmpowerID folder you created earlier. The path to the file is
    \Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants\<YourCustomTenant>\Themes\overrides.css.

  2. Add code to overrides.css to replace the default Web application logo and login page background image.

    In the following example, we are adding to overrides.css the CSS classes needed to override EmpowerID and setting the properties of those classes. When adding your code, be sure to name the classes (.eid-logo and .eid-login-custom) exactly as shown. If you do not, EmpowerID ignores them.

    /*custom logo*/ .eid-logo{ background: url(images/ablogo.png) no-repeat; background-size: 240px 63px; display: inline-block; width: 242px; height: 63px; text-indent: -9999px; overflow: hidden; margin-top: 5px; }



    /*custom background image for the login page*/ .eid-login-custom{ background-image: url(images/abshop.png); }

     

  3. Add code to overrides.css to replace the default style of the title and content text of the login page.

    In the following example, we are adding to overrides.css the CSS classes needed to override EmpowerID and setting the properties of those classes. When adding your code, be sure to name the classes (.eid-login-custom-title and .eid-login-custom-content) exactly as shown. If you do not, EmpowerID will ignore them.

    /*custom title on the login page*/ .eid-login-custom-title{ color: #fdeeb4; }



     

  4. Save your changes.

Test the custom theme

  1. Open your browser and navigate to the EmpowerID Web application using the custom FQDN. For example, if you created a custom tenant folder named "sso.andysbeans.com," navigate to "https://sso.andysbeans.com/UI." The default theme of the EmpowerID Web application is updated to reflect the changes you made.

  2. Navigate to the default login page for the EmpowerID Web application in your environment. You should see the default EmpowerID theme.