Introduction
Google has been offering a method of embedding a search engine to find information on a particular site since October 23, 2006. Originally known as Google Co-op, then very shortly after, Google Custom Search Engine (GCSE) and now (January 2024), Programmable Search Engine (PSE).
The buttons and text fields are easily editable, either through the online console or an XML file, but mostly confined to colouring the various elements that make up the search console. There seems to a discrepancy in the documentation, Google has not used the pill-shaped button pictured in some of the documentation for several years.
Customizing the Google Programmable Search Engine on their website.
Depending on the version, the functionality of the search can be refined using an XML file or using the API, which was introduced on November 19, 2020.
This page was written to see if the look and feel of the search console can be further customized.
Terms & Conditions
Google's Programmable Search Engine terms and conditions (Section 1.4 Service: Appropriate Conduct) say that you must not:
(i) modify, adapt, translate, prepare derivative works from, decompile, reverse engineer, disassemble or otherwise attempt to derive source code from any Service or any other Google technology, content, data, routines, algorithms, methods, ideas design, user interface techniques, software, materials, and documentation; (k) remove, deface, obscure, or alter Google's copyright notice, trademarks or other proprietary rights notices affixed to or provided as a part of any Service or any other Google technology, software, materials and documentation;
That's a comprehensive statement! I don't feel the need to alter the search console on my own pages other than what Google provides, but I wanted to experiment with what could be done.
The CSS
Adding the standard free Programmable Search Engine to a page is easy and requires just two lines:
<script async src="https://cse.google.com/cse.js?cx=xxxxxxxxxx"></script> <div class="gcse-search"></div>
Where xxxxxxxxxx is the individual site code Google gives you.
Opening the developer tools in a browser, by pressing F12 in most of them, exposes the elements of the PSE and the CSS used to style them. The elements are some nested divs, one of which contains a form, which contains a table. One row of the table contans cells with more nested divs for the text entry, another cell contains the search button itself. After the table comes more nested divs to hold the search results. Nearly all the elements have class names.
Some Examples
Default
The default PSE at it appears on the site is pictured below. The styling applied to it is done via the online console.
Google Programmable Search Engine as it normally appears on this site.
Example 1
In this example the corners have been rounded and the button changes colour when hovered over.
Google Programmable Search Engine, design example 1.
The CSS to do this is:
.gsc-search-button-v2 {
border: 2px solid green;
background-color: green;
border-radius: 25px;
}
.gsc-search-button-v2:hover {
background-color: lightgreen;
border: 2px solid green;
}
.gsc-input-box { border-radius: 25px; }
Example 2
In this example the background has been extended, the corners have been rounded, the button changes colour and the cursor changed to a pointer when hovered over.
Google Programmable Search Engine, design example 2.
The CSS to do this is:
.gsc-search-box {
border-radius: 25px;
overflow: hidden;
}
.gsc-search-box tbody {
background-color: lightcoral;
border-radius: 25px;
overflow: hidden;
}
.gsc-input-box { border: 0; }
#gsc-i-id1 { border-radius: 25px; }
.gsc-search-button-v2 {
border: 0;
background-color: lightcoral;
}
.gsc-search-button-v2:hover {
background-color: palevioletred;
cursor: pointer;
}
Google Search Appliance
While writing this page I came across something called the Google Search Appliance (GSA). This was a rack-mounted piece of hardware that among other things constantly monitored a website's pages and provided a search interface. The device was introduced in 2002 and the service was withdrawn in March 2019.
The remains of the help pages are still on Google's website. The 2015 installation guide PDF for the devices is still in Google Media. The hardware was manufactured by Dell and the image below comes from their April 2010 Appliance Brochure.
The Google Search Appliance manufactured by Dell.