List of Changes to the CSS and HTML documents in Version 3 of the OIT Form Templates

9/29/16


============================================================
============================================================


# CSS (style.css)


=============================================================


All new styles are at the bottom of style.css, beginning at line 9637.


=============================================================
=============================================================


# HTML (index-forms.html, index-wide.html, index-webapp.html)


=============================================================

## NOTE: When creating pages, use a short page title. 
(“Accounts” rather than “Accounts | Office of Information Technology | Etc.”) 

FIND:
<title>Office of Information Technology | The University of Tennessee, Knoxville</title>

REPLACE WITH:
<title>[Short Page Title]</title>

=============================================================


## Paste in script for Google Analytics right before close of </head>

FIND:

</head>

REPLACE WITH:

<!-- Google Analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-39634891-10', 'auto');
  ga('send', 'pageview');

</script>

</head>


=============================================================

## NOTE: Applies to index-forms.html and index-wide.html only (no left menu in index-webapp.html). 
## Remove tabindex 1-7 from left menu buttons (tabindex is no longer an advised solution for screenreaders, and interferes with tab order in this case).

FIND AND REMOVE: tabindex="[Number]”


=============================================================

## NOTE: Applies to index-forms.html and index-wide.html only (no left menu in index-webapp.html). 
## Replace "Find Page" button text with "Search OIT" button text

FIND:
<br>FIND <br> PAGE              </button>

REPLACE WITH: 
<br>SEARCH <br>OIT              </button>


=============================================================

## NOTE: Applies to index-forms.html and index-wide.html only (no left menu in index-webapp.html). 
## Replace existing search with custom Google search.

FIND: 

      <form method="post" action="http://google.tennessee.edu/search">
          <div class="form-group">
             <input type="text" title="Find Page" class="form-control" name="q"  maxlength="256" onfocus="if(this.value == 'Search This Site') { this.value = ''; }" value="Search This Site">
          </div>
      
          <input type="hidden" name="output" value="xml_no_dtd">
          <input type="hidden" name="oe" value="UTF-8">
          <input type="hidden" name="ie" value="UTF-8">
          <input type="hidden" name="ud" value="1">
          <input type="hidden" name="site" value="Knoxville">
          <input type="hidden" name="client" value="utk_translate_frontend">
          <input type="hidden" name="entqr" value="3">
          <input type="hidden" name="as_sitesearch" value="utk.edu" title="search type"><!-- To turn this into a site-specific search, change the value of this element to: "YOURURL.utk.edu" -->
          <input type="hidden" name="proxystylesheet" value="utk_translate_frontend">
          <input type="submit" name="btnF" class="sr-only"  value="Go">
          <input type="submit" name="btnF" class="sr-only" value="Go">
      </form>
      
      
REPLACE WITH: 

	<div class="form-group">
		<script>
		  (function() {
			var cx = '013341540797571815700:byu8onhic7e';
			var gcse = document.createElement('script');
			gcse.type = 'text/javascript';
			gcse.async = true;
			gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(gcse, s);
		  })();
		  window.onload = function(){
		  document.getElementById('gsc-i-id1').placeholder = 'Search OIT Website';
		  document.querySelector('img.gsc-branding-img').alt = "Google logo";
		  document.querySelector('input.gsc-search-button').alt = "Go";
			};
		</script>
		<gcse:searchbox-only></gcse:searchbox-only>
	</div>


=============================================================

## NOTE: Applies to index-forms.html and index-wide.html only (no breadcrumb in index-webapp.html). 
## NOTE: This is intended to wrap and style whatever method you select to generate breadcrumbs in your site. Please leave “OIT Home” as the top level.
## Before the H1, add the breadcrumb wrapper.

FIND:
 <h1 class="entry-title">
 
REPLACE WITH: 
    <nav class="breadcrumbs" role="navigation" aria-label="You are here:"> 
	<a href="http://oit.utk.edu">OIT Home</a> > Your Top Level > Nested Page
    </nav>			
<h1 class="entry-title">

                    
=============================================================

## Footer: Fix Facebook alt tag.

FIND: <img src="images/interface/logo-facebook.png" alt="twitter logo" width="31" height="31"/>

REPLACE WITH:  <img src="images/interface/logo-facebook.png" alt="facebook logo" width="31" height="31"/>


=============================================================

## Footer: Change ID to class on "meta-contact" tag.

FIND: <div id="meta-contact">

REPLACE WITH:  <div class="meta-contact">