Customize the Navigation Bar Color
Use the customer.css file to modify the color of your portal navigation bar.
For help choosing colors, see the following CSS Colors page.
-
On the server where your portal is installed,
navigate to Program Files (x86) > Keystyle Data Solutions > Keystyle Data Solutions > HRIM > Custom.
-
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;
}
- To change the background color of the navigation bar color, edit the section called: /*background-color is the color of the background*/.
- 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*/.
- To change the color of the font used in the navigation bar, edit the section called: /*color is the color of the font*/.
-
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;*/
- Save the revised customer.css file, and reload your portal to view the changes.