GPSE: Campus Search, Centrally Hosted Search Results Instructions - Websites - UIT

These instructions are for using a Google Programmable Search Engine (GPSE) campus search. This option searches for content campus-wide, i.e. content on any utah.edu domain (as opposed to searching just your site or a specific collection of sites), and displays search results on the university's centrally hosted search results page.

Example Results

HTML Code

Add the following HTML code to your pages or template where you would like to see the search box that will search the entire campus.

<form id="gcse_search" action="//search.utah.edu/" method="get" name="search" role="search">
    <label for="gcse_searchbox">Search Campus:</label>
    <input id="gcse_searchbox" type="text" name="q" value="" 
        title="enter search terms" onfocus="noWatermark();" 
        onblur="watermark();" />
    <input id="gcse_searchbutton" type="image" name="btnG" value="Submit Search"
        src="//search.utah.edu/_images/gcse_search_btn.png"
        title="submit search" alt="submit search" />
    <img src="//search.utah.edu/_images/spacer.gif" onload="loadWatermark();">
</form>

Style and Scripts

Each individual web site uses different styles and scripts that may affect this search code differently. The following is a best attempt of trying to make the search box look and function correctly in most sites.

Add the following style and script code into your HTML pages or template so that it shows up in the <head> section of the pages with your search box.

<style type="text/css">

  #gcse_search{
    background:#fff;
    border:1px solid black;
    float:right;
    margin: 0;
    padding:0;
    position:relative;
    text-align:left;
    width: 230px; 
  } 

  #gcse_searchbox {
    border:0;
    color: #666;
    font:15px Helvetica, san-serif;
    height:20px;
    padding:3px 5px;
    width:195px;
  } 

  .gcse_watermark {
    background: #FFF
                url('//search.utah.edu/_images/gcse_campus.png') 
                no-repeat 5px 3px; 
  }

  #gcse_searchbutton { 
    padding:3px;
    position:absolute;
    right:0;
    top:0;
    width:20px;
  } 

  #gcse_searchbutton:focus,
  #gcse_searchbutton:hover,
  #gcse_searchbutton:active {
    background-color:#e8e8e8;
  } 

  #gcse_search label {
    height:1px;
    left:-10000px;
    overflow:hidden;
    position:absolute;
    top:auto;
    width:1px; 
  }

</style>
<script type="text/javascript">

  // add or remove watermark if no text is entered
  function watermark(){
    if (inputId.value.length > 0){
      if (inputId.className == "gcse_watermark")
        inputId.className = "";
    }else
      inputId.className = "gcse_watermark";
  }

  // remove watermark when input has focus
  function noWatermark() {
    inputId.className = "";
  } 

  var inputId; //declare reference to input 
  function loadWatermark() {
    inputId = document.getElementById("gcse_searchbox"); 
    watermark(); //initialize watermark
  }

</script>

You may also download and use GCSE images locally

Web Support & Usability

University Information Technology (UIT)

GPSE: Campus Search with Centrally Hosted Search Results

HTML Code

Style and Scripts

Download and use GCSE Images Locally