/*****************************************************************************************************************************************************/ /* 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: green; } /*****************************************************************************************************************************************************/ /* 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: 100px; } /*****************************************************************************************************************************************************/ /* 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 just want to hide the log in control but still make it clickable, use the next two 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.loginMenuTarget > div.mol-menu-item-icon { # color: white; } /*****************************************************************************************************************************************************/ /* 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.loginMenuTarget > div.mol-menu-item-text { # color: white; } /*****************************************************************************************************************************************************/ /* 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 */ /*****************************************************************************************************************************************************/ .mol-page-header > #topnavbanner div.loginMenuContainer.mol-header-menu-item:hover { # background-color: blue; } /*****************************************************************************************************************************************************/ /* 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: blue; } /*****************************************************************************************************************************************************/ /* 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. */ /*****************************************************************************************************************************************************/ div.mol-page-header > div.mol-main-title > div.mol-tyler-logo { # visibility: hidden; # padding-top: 0px; } /*****************************************************************************************************************************************************/ /* .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. */ /*****************************************************************************************************************************************************/ .mol-main-title > .mol-title { # visibility: hidden; # padding-top: 0px; }