Customize the Navigation Bar Color

Use the customer.css file to modify the color of your portal navigation bar.

The customer.css file is located on the server where your portal is installed. When you modify this file, you can change the RGB, color, or HEX values.

For help choosing colors, see the following CSS Colors page.

  1. On the server where your portal is installed, navigate to Program Files (x86) > Keystyle Data Solutions > Keystyle Data Solutions > HRIM > Custom.


  2. Open customer.css using Notepad or Notepad++. You will find the following text in the file (bold used for emphasis only):

    /** apply customer specific styles here **/

    #NavBar

    , .navbar-inverse .navbar-nav>.open>a

    , .navbar-inverse .navbar-nav>.open>a:focus

    , .navbar-inverse .navbar-nav>.open>a:hover

    , .navbar-inverse .navbar-nav>li>a

    , .navbar-inverse .navbar-nav>li>a:hover

    , .navbar-nav>li>span>span>a

    , .navbar-inverse .navbar-brand {


    /** use these selectors to change the navbar formatting per customer specific scheme **/

    /*background-color is the color of the background*/

    /*background-color: rgb(0, 122, 191);*/

    /*background-color: blue;*/

    background-color: #ff66ff;

    /*border-bottom is the color of the border line below the navbar*/

    /*border-bottom: rgb(0, 122, 191);*/

    /*border-bottom: red*/

    border-bottom: #33ff33;


    /*color is the color of the font*/

    /*color: rgb(0,0, 0);*/

    /*color: black*/

    color: #000000;

    }

  3. To change the background color of the navigation bar color, edit the section called: /*background-color is the color of the background*/.
  4. To change the bottom border of the navigation bar, edit the section called: /*border-bottom is the color of the border line below the navbar*/.
  5. To change the color of the font used in the navigation bar, edit the section called: /*color is the color of the font*/.
  6. Depending on whether you edit the RGB, color, or HEX values, ensure that you comment out the unused options by including a /* at the beginning of the line and a */ at the end of the line. Remove these symbols from the beginning and end of the line that you want to use.
    For example, if you edit the RGB value, your lines should look like this (no symbols before or after the RGB line, and the color and HEX values are commented out):

    color: rgb(0,0, 0);

    /*color: black*/

    /*color: #000000;*/

  7. Save the revised customer.css file, and reload your portal to view the changes.