Changing the Navigation Sidebar

EmpowerID provides an overrides directory within the EmpowerID Web CDN that can be used to customize the theme of the Web site. This allows you to change the default look and feel of the site to match your corporate brand or that of a partner who uses the site. To do so, you place the appropriate CSS files, images and scripts within the specified folders of the overrides directory. EmpowerID then "picks up" your files from the overrides directory, replacing the application's default files with them. This topic demonstrates this by showing you how to change the color of the navigation sidebar used to navigate the Web application.

The styles for the default theme of the EmpowerID Web application are defined by the classes in the default.css file, which is located at "\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Themes\EmpoweID."

Changing the color of the navigation sidebar involves overriding the CSS classes that define it. In EmpowerID, these classes are the eid-navbar-nav, the eid-navbar-active, and the eid-navbar-link classes. When changing the navigation sidebar, you can override the current properties of these classes, replacing the default values with yours. You can also add new properties to the class, as long as those properties are legitimate CSS properties that make sense for the object.

To override the navigation sidebar, you create an overrides.css file with custom definitions for the eid-navbar-nav, the eid-navbar-active, and the eid-navbar-link classes and place that file within the above-mentioned overrides directory. The path to the file is critical as EmpowerID will not incorporate your changes if the path is incorrect. In a default installation of EmpowerID, the path looks as follows: 

\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Themes\EmpowerID
This path should already exist; if it does not, you need to create it.

This topic demonstrates how to change the color of the header used in the EmpowerID Web application and is divided into the following activities:

To override the CSS

  1. Using any text editor create a CSS file named overrides.css and place it in the EmpowerID folder that is located within the EmpowerID Web CDN Overrides directory. The path to the file should be "\Program Files\TheDotNetFactory\EmpowerID\Web Sites\EmpowerID.Web.Cdn\Overrides\Themes\EmpowerID\overrides.css."
    2. If overrides.css already exists, you just need to open and edit the file for the navigation sidebar as shown below.

  2. Add code to overrides.css to change the default color of the navigation sidebar with yours. This code needs to override the properties of the eid-navbar-nav class. In the example, we are changing one property, the background property, specifying a different color and changing it to a linear gradient background. We are also changing the background color for active sidebar nodes.
    3. When adding your code, be sure to name the classes exactly as shown. If you do not, EmpowerID will ignore your changes. 
    /* custom navigation sidebar color */
    .eid-navbar-nav{
         background: #2f2727;
         background: -webkit-linear-gradient(bottom, #1a82f7, #2f2727);
         background: -moz-linear-gradient(bottom, #1a82f7, #2f2727);
         background: linear-gradient(bottom, #1a82f7, #2f2727);
     }
    
    /* custom background for active sidebar nodes */
    .eid-navbar-active{
        background: #d86800;
    }
    
    /* custom background for active sidebar list items */
    li.eid-navbar-active{
        background: #d86800 !important;
    }
  3. Save your changes.

To test the CSS override

  1. Open your browser and navigate to the EmpowerID Web application in your environment.
  2. Log in to the EmpowerID Web application and then click the hamburger icon in the header to open the navigation sidebar (if it is closed).

    3. You should see that the navigation sidebar has been updated to reflect the changes you made.

    You can revert back to the original sidebar by removing your custom class definitions from the overrides.css file.