You are viewing an earlier version of the admin guide. For the latest version, please visit EmpowerID Admin Guide v7.211.0.0.
Override Default Pages, Styles, and Scripts
Overview
It is possible to override the default pages, styles, and scripts that are shipped with EmpowerID. Follow the instructions below to override those files.
Overriding .cshtml Pages
Most pages in EmpowerID can be overridden by copying the original file to the appropriate folder in the overrides directory to override the original page. Follow the appropriate folder structure detailed below.
Create the Overrides Directory
Path = C:\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Overrides
The EmpowerID.Web.Overrides folder is not included in the install and must be created manually.
Path for EmpowerID.Web.PortableAreas.Common Overrides
~EmpowerID.Web.Overrides\Areas\Common\[original folder structure]
Example:
Original =
~Web Sites\EmpowerID.Web.PortableAreas.Common\Views\Pages\ITShop.cshtml
Override =
~Web Sites\EmpowerID.Web.Overrides\Areas\Common\Views\Pages\ITShop.cshtml
Path for all other sites
~EmpowerID.Web.Overrides\[name of the original folder without the periods and 'EmpowerID']\[original folder structure]
Example:
Original =
~Web Sites\EmpowerID.Web.IdP.Forms\Views\Home\Login.cshtml
Override =
~Web Sites\EmpowerID.Web.Overrides\WebIdPForms\Views\Home\Login.cshtml
Overriding Styles and Scripts
Styles and scripts can be overridden in the overrides.css and overrides.js files, respectively. A basic knowledge of CSS and/or JavaScript is required to create overrides. For more information, refer to the MDN Web Docs.
Paths for Override Files
C:\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Scripts\overrides.js
C:\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Themes\EmpowerID\overrides.css
C:\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Images: a folder to place images referenced in overrides.js or overrides.css
Note: only use one overrides.js file and one overrides.css file. CSS or JS files with other names in these folders will have no affect on the site.
CSS Overrides
To overrides existing styles, simply target the existing CSS selectors in the overrides.css.
Javascript Overrides
To create custom or overwrite existing JavaScript, save your code to the overrides.js file.
To override existing JavaScript (e.g., properties in eid-nav.js), one must override (that is, copy) the entire IIFE in which the code is encapsulated into the overrides.js file. For more information refer to IIFE on MDN.
The EmpowerID web app uses an MVVM pattern that uses Knockout.js to create View Models. For more information, refer to the Knockout.js docs.
Always remember to clear cache and reload the page after every change to these files.