The standard MSU Footer is designed to enable the text links, standard text, and MSU wordmark to display over the top of any web page background or image.
The MSU Wordmark graphic is 221 x 47 pixels and is a hyperlink to the MSU website home page. The Wordmark is available in black, white, and MSU Green. It can be downloaded from the MSU Brand website Logos page.
Your website information area in the Standard Footer should include:
The website information and MSU information areas are separated using a 1-pixel, dotted rule (#999999) equal to the width of the website information element.
The MSU information area should include:
Font size is specified here in both absolute and relative measurements. Pixels are an absolute size where 1px = 1/96th of an inch. Rems are relative to the root (html) element font size. CSS best practice is to provide both units so that browsers that do not support rem will use the fallback pixel property value.
For example, assuming that a browser's default font size is 16px:
1 rem = 16 px | 0.875 rem = 14 px | 0.75 rem = 12 px | 0.625 rem = 10 px | 0.5625 rem = 9 px | 0.5 rem = 8 px | etc.
In this example, the resulting CSS is:
html {
font-size: 16px;
font-size: 1rem;
}
.size1 {
font-size: 32px;
font-size: 2rem;
}
.size2 {
font-size: 14px;
font-size: 0.875rem;
}
...
IMPORTANT: Colors shown here have been tested for accessibility-compliant color contrast. However, because your website's text and background colors may differ from the colors shown and especially if using a dark background, you should test your website colors for acceptable contrast ratio. This can be done by using an online contrast ratio tool or by manually calculating the contrast ratio yourself. Ideally, the color contrast ratio in your content is 4.5:1 (AA compliance) or higher. Adjust the foreground or background colors as needed until color contrast is acceptable.
W3C Techniques for Testing Contrast Ratio:
https://www.w3.org/TR/WCAG20-TECHS/G18.html
MSU Web Accessibility Evaluation and Validation - online tools:
http://webaccess.msu.edu/Help_and_Resources/evaluation-validation.html
HTML code for light-colored and dark-colored backgrounds is identical except that:
(use HTML character code "©" for the copyright symbol)
Sample code does not include styles that enable responsive behavior (as each website will vary) but can be used for legacy (non-responsive) websites with little or no changes.
IMPORTANT: Sample code is provided as a guideline in implementing the technical requirements indicated in the MSU Web Standards for the MSU Masthead, Search Tool, and Standard Footer. Website owners may have to modify the sample code in order to achieve the desired results and correct responsive behavior.
HTML sample code for light-colored backgrounds with website telephone number:
<div class="MSUwrapper light-background" id="MSUstandardFooter" role="contentinfo"> <!-- class ’light-background' sets link colors -->
<div class="fourMSUcolumns" id="standard-footer-MSU-wordmark">
<a href="http://www.msu.edu"> <!-- Use green MSU wordmark -->
<img alt="Michigan State University Wordmark" class="screen-msuwordmark" src="/render/file.act?path=/_files/images/msu-wordmark-green-221x47.png" height="47" width="221" />
<img alt="Michigan State University Wordmark" class="print-msuwordmark" src="/render/file.act?path=/_files/images/msu-wordmark-black-221x47.png" height="47" width="221" />
</a>
</div>
<div class="twelveMSUcolumns">
<!-- change the css to using nth child instead of classes!!!!!!-->
<div id="standard-footer-site-links">
<ul>
<li>Call us: <strong>(517) 355-7505</strong></li>
<li><a href="/contact">Contact Information</a></li>
<li><a href="/site-map">Site Map</a></li>
<li><a href="/privacy-statement">Privacy Statement</a></li>
<li><a href="/accessibility">Site Accessibility</a></li>
</ul>
</div>
<div id="standard-footer-MSU-info">
<ul>
<li>Call MSU: <span class="msu-phone"><strong>(517) 355-1855</strong></span></li>
<li>Visit: <strong><a href="http://msu.edu">msu.edu</a></strong></li>
<li>MSU is an affirmative-action, equal-opportunity employer.</li>
<li><a href="http://oie.msu.edu/"><strong>Notice of Nondiscrimination</strong></a></li>
</ul>
<ul>
<li class="spartans-will">Spartans Will.</li>
<li>© Michigan State University</li> </ul> </div> </div> </div> <!-- ================================================== -->
HTML sample code for dark-colored backgrounds with no website telephone number:
<div class="MSUwrapper dark-background" id="MSUstandardFooter" role="contentinfo"> <!-- class ’dark-background' sets link colors -->
<div class="fourMSUcolumns" id="standard-footer-MSU-wordmark">
<a href="http://www.msu.edu"> <!-- Use white MSU wordmark -->
<img alt="Michigan State University Wordmark" class="screen-msuwordmark" src="/render/file.act?path=/_files/images/msu-wordmark-white-221x47.png" height="47" width="221" />
<img alt="Michigan State University Wordmark" class="print-msuwordmark" src="/render/file.act?path=/_files/images/msu-wordmark-black-221x47.png" height="47" width="221" />
</a>
</div>
<div class="twelveMSUcolumns">
<!-- change the css to using nth child instead of classes!!!!!!-->
<!-- "Call us" and Telephone are removed -->
<div id="standard-footer-site-nocall-links">
<ul>
<li><a href="/contact">Contact Information</a></li>
<li><a href="/site-map">Site Map</a></li>
<li><a href="/privacy-statement">Privacy Statement</a></li>
<li><a href="/accessibility">Site Accessibility</a></li>
</ul>
</div>
<div id="standard-footer-MSU-info">
<ul>
<li>Call MSU: <span class="msu-phone"><strong>(517) 355-1855</strong></span></li>
<li>Visit: <strong><a href="http://msu.edu">msu.edu</a></strong></li>
<li>MSU is an affirmative-action, equal-opportunity employer.</li>
<li><a href="http://oie.msu.edu/"><strong>Notice of Nondiscrimination</strong></a></li>
</ul>
<ul>
<li class="spartans-will">Spartans Will.</li>
<li>© Michigan State University</li>
</ul>
</div>
</div>
</div>
<!-- ================================================== -->