Skip to main content

Override Default Pages, Styles, and Scripts

The EmpowerID Web application allows administrators to override default UI pages, stylesheets, and JavaScript files without modifying deployed product files. Overrides let you replace or extend the behavior and appearance of pages while preserving upgrade compatibility.

To override a page, script, or stylesheet, create a file with the same name and path—mirroring the application's internal folder structure—inside the Overrides directory. When EmpowerID detects an override file, it loads that file instead of the default.

Override .cshtml Pages​

Create the Overrides Directory​

If it does not already exist, create the following directory:

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

Matching the Folder Structure​

To override a .cshtml page, replicate the structure of the original application folder under the Overrides directory.

For example, to override a page located in:

EmpowerID.Web.PortableAreas.Common\Views\Pages\ITShop.cshtml

Create the corresponding override path:

EmpowerID.Web.Overrides\Areas\Common\Views\Pages\ITShop.cshtml

Removing Prefixes for Other Web Sites​

For areas such as EmpowerID.Web.IdP.Forms, remove both EmpowerID and the period when creating the override folder.

Example:

  • Original file:
    EmpowerID.Web.IdP.Forms\Views\Home\Login.cshtml
  • Override path:
    EmpowerID.Web.Overrides\WebIdPForms\Views\Home\Login.cshtml

Override Styles and Scripts​

EmpowerID loads up to one CSS override file and one JavaScript override file:

File Locations​

FilePath
overrides.js...\Overrides\Scripts\overrides.js
overrides.css...\Overrides\Themes\EmpowerID\overrides.css
Images...\Overrides\Images\

Any images referenced by CSS or HTML should be placed inside the Images directory.

Writing Overrides​

CSS Example​

.navbar-brand {
    background-color: #002244;
}

JavaScript Example​

$(document).ready(function () {
    console.log("Custom JS loaded");
});

Some EmpowerID JavaScript bundles use Immediately Invoked Function Expressions (IIFEs). To override individual functions inside them, you must replicate the full IIFE wrapper in your override script.

Notes​

  • Overrides take effect immediately after saving the files.
  • If changes do not appear, clear both browser and server caches.
  • Remove an override file at any time to restore the default behavior.