Advanced CSS

You can use advanced CSS to further customize the look of your portal brand. To use advanced CSS, copy and paste the code that is shown here into a text editor, edit it, then paste the edited code into the Advanced CSS area, overwriting any code that was already present. You may include the commented text without affecting the look of your portal.

/* Header Settings */

/* 01 This sets the image on the right hand side of the Home page banner */ #PageHeaderWrapper {background: url(/orgimages/HCMKB104/inforgraphicright85.png) no-repeat right bottom; background-color: #fff;}

/* 02 This sets the image on the left side of the Home page banner */ #PageHeaderBranding {background: url(/orgimages/HCMKB104/InforLogo.png) no-repeat left top;}

/* 03 This sets the color of the word logout on the Home page banner */ #PageHeaderLogout a {color: #000000;}

/* 04 This sets the color of the users name on the Home page banner */ #PageHeaderLogout {color:#000000;}

/* Search Settings */

/* 01 This sets the background color of the Search area on the Home page */ #PageHeaderToolbar { background: none; background-color: #e6e6e6; }

/* 02 This sets the color of the word Home on the left hand side of the Search area */ #PageHeaderMainMenuText SPAN, #PageHeaderMainText SPAN:hover {color: #13a3f7;}

/* Breadcrumb Area */

/* 01 This sets the background color of the breadcrumb area */ #PageHeaderBreadcrumb {background-color: #e6e6e6; padding-bottom: 1px; border-bottom-color: #e6e6e6; }

/* 02 This sets the color of the arrow on the breadcrumb */ #PageHeaderBreadcrumb {color: #51535d; }

/* 03 This sets the color of the page name links in the breadcrumb area */ #PageHeaderBreadcrumb a {color: #51535d;}

/* Main Nav */

/* 01 This sets the Main Navigation background color on the main panel */ #PageHeaderNavMenu, #PageHeaderMainMenu-benefit, #PageHeaderMainMenu-lifeevent, #PageHeaderMainMenu-bna, #PageHeaderMainMenu-timepay, #PageHeaderMainMenu-admin, #PageHeaderMainMenu-totalrewards, #PageHeaderMainMenu-sitemap, #PageHeaderMainMenu-career, #PageHeaderMainMenu-company, #PageHeaderMainMenu-csr, #PageHeaderMainMenu-mgrpeople, #PageHeaderMainMenu-mgrhr, #PageHeaderMainMenu-perfmgt, #PageHeaderMainMenu-newhire, #PageHeaderMainMenu-it, #PageHeaderMainMenu-recruiting, #PageHeaderMainMenu-forms, #PageHeaderMainMenu-ssmenu, #PageHeaderMainMenu-learn, #PageHeaderMainMenu-Quick-link, #PageHeaderMainMenu-cdd, UL#navmenu-v LI {background-color: #eeeeee;}

/* 02 This sets the Main Nav link and text color on the main navigation panel */ #navmenu-v li a, .nav-doc-topic-text, .sw-link SPAN, .sw-flyout-link-text {color: #000000;}

/* 03 This sets the Main Nav highlight background color on the flyout and main panel */ ul#navmenu-v li:hover a {background-color: #ffffff;}

/* 04 This sets the highlight link and text color on main panel and flyout */ ul#navmenu-v li:hover a, ul#navmenu-v li a:hover {color: #000000;}

/* 05 This sets the link hover color on main panel */ ul#navmenu-v li a:hover {color: #555359;}

/* 06 This sets the Main Nav highlight hover background color on the flyout */ UL#navmenu-v LI:hover LI A:hover { background-color: #ffffff; }

/* 07 This sets the link hover color on the flyout */ UL#navmenu-v LI:hover LI A:hover {color: #555359;}