Brandbar Guidelines | Stanford Identity Toolkit

Stanford Universal Footer

Instructions for how to implement the Stanford Universal Footer.

The Stanford Universal Footer is a 120px tall red footer recommended to place at the bottom of all official university websites. It was designed to enhance sites with consistent Stanford branding and navigation.

The stacked Stanford signature in the bar links back to the university homepage. The other links provide consistent navigation to university directions, search and terms of use. These links may not be altered in any way and no other text or links should be included in the universal footer. A site footer can appear immediately above (see the current page as an example.)

No content of any kind should appear below the unviversal footer.

Instructions

Note If you have already added the Stanford Brand Bar skip to Step Two.

Step One:

Copy the line below into the <head> section of your web page.

<link href="https://www.stanford.edu/su-identity/css/su-identity.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie8.css" />
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie7.css" />
<![endif]-->

Step Two:

Copy these lines immediately after the <body> tag of your web page:

<div id="su-wrap"> <!-- #su-wrap start -->
  <div id="su-content"> <!-- #su-content start -->

Step Three:

Copy these lines immediately before the </body> tag of your web page:

  </div> <!-- #su-content end -->
</div> <!-- #su-wrap end -->

<!-- Global footer snippet start -->
<div id="global-footer">
  <div class="container">
    <div class="row">
      <div id="bottom-logo" class="span2">
        <a href="http://www.stanford.edu">
          <img src="https://www.stanford.edu/su-identity/images/footer-stanford-logo@2x.png" alt="Stanford University" width="105" height="49"/>
        </a>
      </div>
      <!-- #bottom-logo end -->
      <div id="bottom-text" class="span10">
        <ul>
          <li class="home"><a href="http://www.stanford.edu">SU Home</a></li>
          <li class="maps alt"><a href="http://visit.stanford.edu/plan/maps.html">Maps &amp; Directions</a></li>
          <li class="search-stanford"><a href="http://www.stanford.edu/search/">Search Stanford</a></li>
          <li class="terms alt"><a href="http://www.stanford.edu/site/terms.html">Terms of Use</a></li>
          <li class="emergency-info"><a href="http://emergency.stanford.edu">Emergency Info</a></li>
        </ul>
      </div> <!-- .bottom-text end -->
      <div class="clear"></div>
      <p class="copyright vcard">&copy; <span class="fn org">Stanford University</span>, <span class="adr"> <span class="locality">Stanford</span>, <span class="region">California</span> <span class="postal-code">94305</span></span>.&nbsp;&nbsp;
      <span id="copyright-complaint"><a href="http://www.stanford.edu/group/security/dmca.html" class="copyright-complaint" >Copyright Complaints</a></span>
      </p>
    </div> <!-- .row end --> 
  </div> <!-- .container end --> 
</div> <!-- global-footer end -->
<!-- Global footer snippet end -->

Stanford Universal Footer

Instructions

Step One:

Step Two:

Step Three:

Related Resources