GCSE: Site Search, Locally Hosted Search Results Instructions - Websites - UIT

These instructions are for using a Google Custom Search Engine (GCSE) campus 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 a locally hosted page within your website.

Example Results A (default)

Example Results B (custom)

1. Create a local page in your site to host the search results

We recommend creating either a page or a directory+index page in your website's root directory named "search". On this page, you will need a large search box that spans across the page. You can either use the default GCSE search box (easiest option - nothing to do on your part), or you can create your own to make it look fancier (see examples above).

2. Insert the GCSE campus search code on the page

You will need to contact the GCSE administrators in order to obtain the code for your site. The GCSE site administrators have a registered non-profit account with Google which will allow you to exclude ads from displaying in your search results. If you choose to create your own GCSE account, your search results will contain ads.

To request code for your site, please send an email to search-admins@lists.utah.edu. Include the following information:

Your contact info
List of URLs you want searched
Whether you would like to use the default GCSE search box on your search results page, or whether you would like to use a custom one

3. Add the search box 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-page-path>" 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 id="gcse_searchbutton" type="image" name="btnG" value="Submit Search"
        src="//gcse.search.utah.edu/_images/gcse_search_btn.png"
        title="submit search" alt="submit search" />
    <img src="//gcse.search.utah.edu/_images/spacer.gif" onload="loadWatermark();">
</form>

4. Add the styles 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('//gcse.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 GCSE images locally

Web Support & Usability

University Information Technology (UIT)

GCSE: Site Search with Locally Hosted Search Results

1. Create a local page in your site to host the search results

2. Insert the GCSE campus search code on the page

3. Add the search box HTML code

4. Add the styles and scripts

Download and use GCSE Images Locally