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

These instructions are for using a Google Programmable Search Engine (GPSE) site search. This option searches for content in your site, or in a specific collection of sites that you identify (as opposed to searching all utah.edu 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.

In order for us to identify your collection of sites on the main search results page, you will need to contact the GPSE administrators in order to obtain the hidden input field information.

<form id="gcse_search" action="//search.utah.edu/" method="get" name="search" role="search">
    <label for="gcse_searchbox">Search Site:</label>
    <input id="gcse_searchbox" type="text" name="q" value="" 
        title="enter search terms" onfocus="noWatermark();" 
        onblur="watermark();" />
    <input type="hidden" name="site" value="xxxxxxxxxxxxxx" />    
    <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_site.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 GPSE images locally

Web Support & Usability

University Information Technology (UIT)

GPSE: Site Search with Centrally Hosted Search Results

HTML Code

Style and Scripts

Download and use GPSE Images Locally