/*****************************************************************************************************************************************************/ /* GENERAL INSTRUCTIONS */ /*****************************************************************************************************************************************************/ /* Lines that start with a pound sign (#) are commented out and will not affect MSS. Uncomment specific attributes in each section as needed. */ /* The browser will need to be refreshed after this file is saved in order to see any changes immediately. */ /* Regarding color tags, many plain English colors can be used (ex: red, green, etc...). HTML color codes can also be used (ex: #FFFFFF, #e0e0e0) */ /*****************************************************************************************************************************************************/ /*****************************************************************************************************************************************************/ /* CUSTOMIZE THE BANNER */ /*****************************************************************************************************************************************************/ /* div.mol-page-header */ /* height: adjust the number of pixels to set a custom height */ /* background-image: enter the name of an image file from the custom images folder to add a background image to the banner */ /* background-repeat: controls whether or not the image should repeat */ /* repeat-x: will make the background image repeat horizontally */ /* repeat-y: will make the background image repeat vertically */ /* no-repeat: image will only appear one time. You'll probably also want to use background-position to place the image. */ /* background-position: use one or more of the following terms to place the image in a specific alignment. */ /* Example: "right top" will place the image in the upper-right corner. */ /* center: will put the background image in the horizontal and vertical center of the banner */ /* top: will place the image along the top edge of the banner */ /* bottom: will place the image along the bottom edge of the banner */ /* left: will place the banner along the left edge of the banner */ /* right: will place the banner along the right edge of the banner */ /*****************************************************************************************************************************************************/ div.mol-page-header { # height: 100px; # background-image: url(images/); # background-repeat: no-repeat; # background-position: ; background-color: #00717b; } /*****************************************************************************************************************************************************/ /* CUSTOMIZE OTHER FONT COLORS & SIZES - CoB ADDED */ /*****************************************************************************************************************************************************/ /* div.mol-side-menu */ /* color: change to header color */ /* ui-date-picker-div, etc. */ /* color: change to same as header color */ /* p.step: change to same as header color */ /* .alert: increase size of alert text */ /*****************************************************************************************************************************************************/ div.mol-side-menu a { color: #00717b; } #ui-datepicker-div .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, caption, .caption, .landingHighlight, .totalCompensation, .additionBoxesTop, .additionBoxesBottom, a.tab { color: #00717b; } p.step { color: #00717b; } .alert { /* used for "alert" type messages */ font-size: 125%; } /*after the 2018 upgrade, the menu was displaying elements that were supposed to be hidden - the below fixes that */ .visually-hidden { # visibility: hidden; } /*hiding open enrollment paragraph after open enrollment has passed, as ESS doesn't automatically remove it until the new benefit year starts (a month after open enrollment is over) #ctl00_ctl00_PrimaryPlaceHolder_ContentPlaceHolderMain_OpenEnrollmentParagraph { visibility: hidden; } */ /*hiding Tyler U icon, help menu, and round question mark icon in ESS that has link to TylerU because TylerU includes help for Time Entry, which we don't use, and we can't turn it off individually */ #ctl00_ctl00_LoginPlaceHolder_HelpContextMenuTarget { visibility: hidden; } i.fa.fa-question-circle { visibility: hidden; } div.walkme-icon-image-div.walkme-launcher-image-div { visibility: hidden; } /*****************************************************************************************************************************************************/ /* You can make it bigger than the banner height and add a gray bar below the header. */ /* You should NOT make it smaller than the banner height. */ /* div.mol-page-container */ /* top: controls where the main page starts. Set this to be the same height as div.mol-page-header. */ /*****************************************************************************************************************************************************/ div.mol-page-container { # top: 100px; } /*****************************************************************************************************************************************************/ /* CUSTOMIZE THE BANNER IMAGE */ /*****************************************************************************************************************************************************/ /* .mol-page-header > a.homeLinkImage */ /* padding-top: change how many pixels should be between the top of the image and the top of the banner. */ /* padding-left: change how many pixels should be between the left side of the image and left edge of the banner. */ /*****************************************************************************************************************************************************/ .mol-page-header > a.homeLinkImage { # padding-top: 0px; # padding-left: 0px; } /*****************************************************************************************************************************************************/ /* .mol-page-header > a.homeLinkImage > img */ /* height: adjust the height of the banner image. Just using "height" will also increase the width proportionally. */ /*****************************************************************************************************************************************************/ .mol-page-header > a.homeLinkImage > img { # height: 90px; # width: 200px; } /*****************************************************************************************************************************************************/ /* CUSTOMIZE THE LOG IN CONTROL */ /*****************************************************************************************************************************************************/ /* If you make the banner taller, you may want to lower the position of the "Log In" and "Resources" controls on the right side. */ /* It is possible to push the Log In control right out of the banner if this value is too big. */ /* div#topnavbanner */ /* padding-top: the higher the number of pixels, the further down the banner the Log In link will appear. */ /*****************************************************************************************************************************************************/ div#topnavbanner { # padding-top: 20px; } /*****************************************************************************************************************************************************/ /* If you want to hide the log in control completely, uncomment the following. */ /* If you just want to hide the log in control but still make it clickable, use the 3 following selectors to change the color instead. */ /* Users would need to manually navigate to the login page to log in. */ /* div.mol-page-header > div#topnavbanner > div.loginMenuContainer.mol-header-menu-item */ /* visibility: controls whether or not the "Log In" control appears. Uncomment "visibility: hidden" to hide the control. */ /*****************************************************************************************************************************************************/ div.mol-page-header > div#topnavbanner > div.loginMenuContainer.mol-header-menu-item { # visibility: hidden; } /*****************************************************************************************************************************************************/ /* If you want to make it invisible to humans, use the same color as your banner background. */ /* div#topnavbanner > div.loginMenuContainer.mol-header-menu-item > div.contextMenuTarget > a.loginMenuTarget > div.mol-menu-item-icon */ /* color: change the color of the "Log In" control icon */ /*****************************************************************************************************************************************************/ div#topnavbanner > div.loginMenuContainer.mol-header-menu-item > div.contextMenuTarget > a.loginTarget > div.mol-menu-item-icon { # color: #00336b; } /*****************************************************************************************************************************************************/ /* If you want to make it invisible to humans, use the same color as your banner background. */ /* a.loginMenuTarget > div.mol-menu-item-text */ /* color: change the color of the "Log In" control text */ /*****************************************************************************************************************************************************/ a.loginTarget > div.mol-menu-item-text { # color: #00336b; } /*****************************************************************************************************************************************************/ /* If you want to make it invisible to humans, use the same color as your banner background. */ /* .mol-page-header > #topnavbanner div.loginMenuContainer.mol-header-menu-item:hover */ /* background-color: change the background color when you hover over the log in control */ /*****************************************************************************************************************************************************/ div.mol-page-header > div#topnavbanner > div.loginMenuContainer.mol-header-menu-item:hover { background-color: #6C9093; } /*****************************************************************************************************************************************************/ /* ul.loginMenu > li > a */ /* color: change the color of the links in the drop-down menu once you've logged in. */ /*****************************************************************************************************************************************************/ ul.loginMenu > li > a { # color: blue; } /*****************************************************************************************************************************************************/ /* CUSTOMIZE THE RESOURCES CONTROL */ /*****************************************************************************************************************************************************/ /* div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item > div.contextMenuTarget > a > div.mol-menu-item-icon */ /* color: change the color of the "Resources" icon */ /*****************************************************************************************************************************************************/ div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item > div.contextMenuTarget > a > div.mol-menu-item-icon { # color: white; } /*****************************************************************************************************************************************************/ /* div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item > div.contextMenuTarget > a > div.mol-menu-item-text */ /* color: change the color of the "Resources" text */ /*****************************************************************************************************************************************************/ div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item > div.contextMenuTarget > a > div.mol-menu-item-text { # color: white; } /*****************************************************************************************************************************************************/ /* div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item:hover */ /* background-color: change the background color when you hover over "Resources" */ /*****************************************************************************************************************************************************/ div#ctl00_ctl00_LoginPlaceHolder_ContextMenuTarget.contextMenuContainer.mol-header-menu-item:hover { background-color: #6C9093; } div#ctl00_ctl00_LoginPlaceHolder_HelpContextMenuTarget.helpContextMenuContainer.mol-header-menu-item:hover { background-color: #6C9093; } /*****************************************************************************************************************************************************/ /* CUSTOMIZE THE TYLER LOGO */ /*****************************************************************************************************************************************************/ /* div.mol-page-header > div.mol-main-title > div.mol-tyler-logo */ /* visibility: controls whether or not the Tyler logo appears. Uncomment "visibility: hidden" to hide the logo. */ /* padding-top: the higher the number of pixels, the further down the banner the Tyler logo will appear. */ /* background-image: uncomment to replace the white logo with the blue/green version of the Talking Ts */ /*****************************************************************************************************************************************************/ div.mol-page-header > div.mol-main-title > div.mol-tyler-logo { # visibility: hidden; # padding-top: 0px; # background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAhFBMVEX///+Pm0lAUo9AUo+Pm0lAUo+Pm0mPm0mPm0lAUo9AUo+Pm0mPm0lAUo+Pm0lAUo9AUo+Pm0lAUo +Pm0mPm0lAUo+Pm0mPm0lAUo+Pm0lAUo+Pm0mPm0lAUo9AUo+Pm0mPm0lAUo9AUo+Pm0mPm0lAUo9AUo+Pm0lAUo+Pm0mPm0lAUo9z9A9UAAAAKnRSTlMAEBAgIDAwP0BAUFBgb3Bwf3+AgI+Qn6CgsL +/wMDPz9DQ39/g4O/v8PCIJbj0AAABJklEQVR4Xo3Q63KCMBAF4I0hFJRai7WKdxEhnH3/9+vuTDuiIW2/Pzkz7GzCoVB6RmXoFz2AiuIyKIozECeKSJZzUwDXlMalPdAY80Ixa4g5xVUQyz/ +oEvogbvwzWlIG5zT7PMjmfXYD4o6MLPX0ABo5DRPRbHKJUCNFHVk5nYioQNw1Q0adoM31NxObVnarEOXkig6nNJMGrsPWc/sHQ3MAJzvEyWLFQ3sIWb/H7AtcxtccR0+YrFwzn83NvV8cdn7uynw0Jhn5pucEw0HCQnE +qkxOXNWP43t7wM1M9e6oZWwDTdoY7Vzm5Wdtny0tF5qYztDD3S9t5qyqqcRGxYlqaKIDrxRTE5OG5vQKO3H53bxGnwfFuUpEBQVCIqKclveOgp8AbSOKN9OiIWaAAAAAElFTkSuQmCC'); } /*****************************************************************************************************************************************************/ /* .mol-main-title > .mol-title */ /* visibility: controls whether or not "Munis Self Service" appears. Uncomment "visibility: hidden" to hide the text. */ /* padding-top: the higher the number of pixels, the further down the banner "Munis Self Service" will appear. */ /* color: change the color of the "Munis Self Service" text. #40528f is the standard blue. */ /*****************************************************************************************************************************************************/ .mol-main-title > .mol-title { # visibility: hidden; # padding-top: 0px; # color: #40528f; }