/*****************************************************************************************************************************************************/ /* 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: rgba(0,54,107,1) } /*****************************************************************************************************************************************************/ /* 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: 90px; } /*****************************************************************************************************************************************************/ /* 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: #00336b; } /*****************************************************************************************************************************************************/ /* 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: green; } /*****************************************************************************************************************************************************/ /* 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. */ /* 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; } #topnavbanner .mol-menu-item-icon .fa-sign-in:after { content: " Log in"; font-family: sans-serif } .mol-page-header > a.homeLinkImage::after, div.mol-page-header > div.mol-main-title::after { content: 'Springfield Public Schools'; display: block; position: absolute !important; width: fit-content; height: auto; text-align: left; left: 100px; white-space: nowrap; background: none; color: white; top: 14px; }