The previous pages discussed various ways to customize the coverage of your search engine and the ranking of its search results. This page discusses how you can customize the look and feel of your search box and search results using the control panel. If you want to implement the design of your search engine using the context file, see the Designing the Look and Feel with XML.
This page includes the following sections:
You can change both the search box and the search results of your custom search engine in either the control panel or the XML context file. If you have a handful or search engines, managing and customizing them with the control panel is fairly simple. Just navigate to the the Look and feel tab, select a style, design the components, click Save, and you are good to go. This page tells you how to do all that. However, if you are creating and managing a large number of search engines, even that simple procedure—when repeated across multiple search engines—gets tedious. In such cases, working with XML would be better. If you decide to use XML, read this page first to get an idea of how things generally work; afterwards, read the Designing the Look and Feel with XML page to learn about the XML elements and attributes.
If you are not sure whether you should just use the control panel or use the XML format, see The Basics page, which discusses the benefits and challenges of each format.
Note: Before you start designing the look and feel of your custom search engine, read the Guidelines for implementing Google Custom Search. It's a short document that tells you how you should handle Google branding and attribution.
If you do not want ads in your search results page, upgrade to the Site Search edition. To learn more about how you can upgrade your search engine, see the Choosing the Right Format section in The Basics page.
You can customize the look and feel of your search engine by doing the following:
If you change your mind, you can always revert back to the default values by clicking Reset style. Experiment with the values while previewing the changes.
The components that you can customize depends on the type of your search engine, which is determined by the hosting option that you have select. For example, the control panel lets you add a logo only for search engines that are hosted by Google; you cannot add a logo to search engines using other hosting options.
You can define the following components using the control panel:
If you are not hosting the results as a Search element, skip the sections that are marked with "(Search Element Only)."
Determine whether you want your search results to appear in a page hosted by Google or in your webpages. The hosting option you select also determines the level of customization you can make. The Search element option allows the greatest level of customization, while the Google-hosted page option is the simplest, but provides the least level of customization.
You can choose the following hosting options in the Look and feel tab of the control panel:
Note: This option, when paired with a compact layout, works well on mobile devices.
You can also take advantage of the AJAX Search API to further customize the search UI. If you do not want to tinker with AJAX, the Search element option can still provide you with more customization choices. For example, you can select among three layouts for your results page, or you can download the CSS and make changes to it.
If you are hosting the results page using the Search element, you have the option to customize how your search UI is laid out on the webpage. You can have the search box and results section displayed in the same column, or you can place the search box in one column, and the results section in another column.
Your options are:
Tip: This option is optimized for mobile devices, so it works well on iPhone, Android devices, and Pre.
You can insert the search box anywhere within the HTML body of your webpage, although—by convention—search boxes are placed at the top (or close to the top) of webpages, as in the following example:
Figure 1: Webpage with the search box positioned at the top.
To create and design a search box, do the following:
You can choose from different sets of search box designs based on the following search engine type:
If you selected Search element as your hosting option, you can customize the search box by doing the following in the style tabs:
The setting changes the font of not just the text in the search button, but also the text in the entire element, including the refinement tab and the result snippets.
The preview section below the style tabs shows the changes you made in the settings.
If you selected either the iframe or Google-hosted option, you can select one of the standard search boxes by doing the following in the style tabs:
| Search box design | Preview |
|---|---|
| Watermark |  |
| Branding below the search box (white background) |  |
| Branding below the search box (gray background) |  |
| Branding below the search box (black background) |  |
| Branding on the side of the search box (white background) |  |
| Branding on the side of the search box (white background) |  |
| Branding on the side of the search box (white background) |  |
You can change the following components of the the results page:
Note: The preview is for results that use the Search element only. It does not depict results for other types of search engines. To learn more, see Previewing Your Search Engine.
To change the background color of your entire results, do the following in the style tabs:
If you are using a Search element, you can also change the color of the border that surrounds the entire element by picking the Element styling: Border color selector or typing the color value in the text box.
If you want to visually delineate individual results or highlight results that are being selected by users, you can define the borders and background for individual results.
Figure 2: Results with individual results delineated and individual result that is highlighted on mouseover.
To change the colors of individual results, do the following in the style tabs:
To change the font style of the text in your results, do the following in the style tabs:
The setting changes the font for the entire element, including the search button, the refinement tabs, and the result snippets.
To change the colors of the text in your results, do the following in the style tabs:
If you have created refinement labels in your search engine, the labels appear as tabs in the Search element and as links in iframe and Google-hosted pages. If you are defining a Search element, you can use the control panel to change the colors of the refinement tabs.
To customize the refinements tab, go to the style tabs and do the following:
If you have created promotions in your search engine, you can change their look and feel in the style tabs. Promotions are a special type of search results that you create.
To customize your promotions, go to the style tabs and do the following:
If you are letting Google host your results page, you can choose to include a logo or small image right next to the search box in the search results page. The image has to be a .jpg, .png, or .gif file hosted on a website (your own or from a website that does not have copyright restrictions). You have the option of associating a URL with the image, turning it into a clickable image.
The following is an example of results page with a logo.
Figure 3: Search box with an image
To add or change a logo in your Google hosted-hosted results page, do the following in the style tabs:
If you want to further customize the look and feel of your element, you can change the CSS by doing the following:
Note: CSS hover effects require a supported doctype such as <!DOCTYPE html>.
The preview section is for the Search element only. If you enter a query and click Search, you can preview the results, including the promotions.
If you are using iframe or Google-hosted pages, you can use the preview section as a starting point. It gives you a general idea of how your results page might look.
To see how your changes are reflected in iframe and Google-hosted pages, do the following:
After you have designed the look and feel of your search engine, you can implement it in your webpage by doing the following:
If you have selected the two-column layout for your Search element, copy two pieces of code snippets: one for the search box, and the other for results.
If you have selected iframe results, type the URL of the webpage that will show the results for your search engine. Also specify where you want the ads to be placed. Finally, copy the two pieces of code snippets.
<body></body> tag of your webpage.
If you have selected Search element and you are using hover effects, your HTML page must use a supported doctype such as <!DOCTYPE html>.
If you have selected the two-column layout for your Search element, insert the code for the search box in one column and the code for the results in another column.
If you have selected iframe results, insert the code for search box in the webpage where you want the Custom Search box to appear, and the code for the results in the webpage where you want the search results to appear.
If you want to learn how to implement these settings using XML, read the Designing the Look and Feel with XML; otherwise, skip to the Making Money page to cash in on your brilliantly crafted work of genius.
< Back to Creating Special Results | Forward to Making Money >