...
Info |
---|
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:
|
...
Change the default Web application logo and login page background image
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\ImagesPlace 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
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.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.
Code Block language css /*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; }
Code Block language css /*custom background image for the login page*/ .eid-login-custom{ background-image: url(images/abshop.png); }
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.
Code Block language css /*custom title on the login page*/ .eid-login-custom-title{ color: #fdeeb4; }
Code Block language css /*custom title and content text for the login page*/ .eid-login-custom-content{ color: #fff; text-shadow: 1px 1px #663300; }
Save your changes.
Test the custom theme
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.
Navigate to the default login page for the EmpowerID Web application in your environment. You should see the default EmpowerID theme.
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|