Skip to main content

Change the Theme for Tenants

You can customize the EmpowerID Web application's appearance for individual tenants by creating overrides that apply only when users access the system through a specific fully qualified domain name (FQDN). When EmpowerID detects a matching FQDN, it loads CSS rules and image files from that tenant’s override directory instead of the defaults. This allows you to apply branding for partners or customers without affecting how EmpowerID appears under other hostnames.

info

Theme overrides are FQDN-specific. If a user accesses EmpowerID through a different hostname, the system displays the default theme.

Before You Begin​

Tenant theme overrides require a specific folder structure under:

C:\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants

To prepare the file structure:

  1. Under Tenants, create a folder named with the tenant’s FQDN (for example: yourtenant.contoso.com).
  2. Inside that folder, create a Themes directory.
  3. Inside Themes, create an EmpowerID directory.
  4. Inside EmpowerID, create an Images directory.

The resulting structure should look like:

Overrides
 └─ Tenants
     └─ yourtenant.contoso.com
         └─ Themes
             └─ EmpowerID
                 └─ Images

Add Custom Images​

  1. Place your custom images—such as logos or login background images—inside the tenant image directory:
...\Overrides\Tenants\yourtenant.contoso.com\Themes\EmpowerID\Images
  1. You may choose any file names. Your CSS must reference these file names exactly.

Create overrides.css​

  1. In the Themes folder for the tenant, create a file named:
overrides.css
  1. Add CSS rules to override the default EmpowerID logo and login background:
/* Custom logo for authenticated pages */
.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 login background */
.eid-login-custom {
    background-image: url(images/abshop.png);
}
  1. Add optional CSS for login page text styling:
/* Custom login page title color */
.eid-login-custom-title {
    color: #fdeeb4;
}

/* Custom login page content text */
.eid-login-custom-content {
    color: #fff;
    text-shadow: 1px 1px #663300;
}
  1. Save the file.

Test the Tenant Theme​

  1. Open a browser and access EmpowerID using the custom FQDN. The customized branding should appear.
  2. Access EmpowerID using a different FQDN. The default EmpowerID theme should display instead.

This confirms the tenant-specific theme override is functioning correctly.