Override Default Pages, Styles, and Scripts

Owned by Phillip Hanegan
Feb 29, 2024
2 min read

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.