Skip to content Skip to main navigation Report an accessibility issue

Classic Template

Quick Start

The following code will assist you in building the original Hill template from scratch.

CSS

Place this code in the <head> of your HTML document.

<link src="//images.utk.edu/styles/thehill/v2015.20191009.css"></link>

JavaScript

Place this code before the </body> in your HTML document.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//images.utk.edu/scripts/thehill/v2015.20191009.js"></script>

HTML

Required: Starting the Orange Bar

<div id="orange-bar"></div>

Required: Skip to content for accessibility

<a class="sr-only sr-only-focusable" href="#content" title="Skip to content">Skip to content</a>
  <footer id="colophon" class="site-footer" role="contentinfo">
   <div id="siteinfo">
      <div id="meta-info">
        <p>
          <strong class="sitetitle">Site Title</strong><br>
                                <a href="http">
                          <i>College of Wherever</i>
                                  </a>
    <br>
        </p>
      </div>
          <div id="meta-contact"><p>123 fake place <br>Phone: <a href="tel:+555-1234" class="tel">555-1234</a>
          <span class="emailList">
          <br>Email: <a href="mailto:junk@junk.com" >junk@junk.com</a>
                    </span></p>
          </div>
   </div><!-- #siteinfo -->
 <div id="campus-footer">
   <div id="utk">
     <div id="bobi">
        <h2><a href="http://www.utk.edu" class="logo icon-bobi-main">The University of Tennessee</a></h2>
      </div>
      <div id="address">
          <p><strong>The University of Tennessee, Knoxville</strong><br>Knoxville, Tennessee 37996<br> <a href="tel:+18659741000" class="tel">865-974-1000</a></p>
      </div>
    </div>
    <div id="toolkit">
      <form id="utk_seek" name="utk_seek" method="post" accept-charset="iso-8859-1"  action="//www.utk.edu/masthead/query.php">
        <div class="form-group">
          <input type="text" name="qt"  onfocus="if(this.value == 'Search utk.edu') { this.value = ''; }" value="Search utk.edu"  class="form-control" title="search" speech x-webkit-speech />
        </div>
        <input type="hidden" name="qtype" class="searchtext" value="utk" title="search type" />
        <input name="go" type="submit" title="Submit" class="btn btn-orange"  value="Go">
      </form>        
<br>
      <nav  role="navigation">
            <a href="http://calendar.utk.edu/">Events</a>
            <a href="http://www.utk.edu/alpha/">A-Z </a>
            <a href="http://www.utk.edu/admissions/">Apply</a>
            <a href="https://www.utk.edu/aboutut/privacy/">Privacy</a>
            <a href="http://maps.utk.edu/">Map</a>
            <a href="http://directory.utk.edu">Directory</a>
            <a href="http://giveto.utk.edu">Give to UT</a>
            <a href="https://oed.utk.edu/ada/campus-accessibility/">Accessibility</a>
      </nav>
    </div>
</div>  
</footer><!-- #colophon -->

Required: System Sign Off

<div id="system-indicia">
<p class="system">The flagship campus of <a href="http://tennessee.edu">the University of Tennessee System</a> and partner in <a href="http://www.tntransferpathway.org/">the Tennessee Transfer Pathway</a>.</p>
</div>

Templates

Default

Screenshot of The Hill 2015 Default

Default Hero

Screenshot of The Hill 2015 Default

Wide

Screenshot of The Hill 2015 Default

WordPress

We primarily work within WordPress, and our team has built out a customized WordPress theme based upon the Original Hill template. We are making it available to those of you who also work within WordPress and would appreciate a jump-start.

Most of the documentation found in this website also applies to this theme. We have also created several custom short codes to be used with this theme. Those are noted in the documentation on this website.

Get the WordPress Theme