For more information, see my Google CSE
API Analysis and Basic CSE AJAX Example
Note: this is the same code as the
basic example page with the addition of
title color and long URLs described above.
Using CSS for the Search Results User Interface
Most of the elements of the Google Custom Search Engine (CSE) results are tagged with class names, designed to integrate with CSS.The AJAX API Result Styling documentation has a list of GsearchResult and GwebResult class properties, which have CSS labels associated. Many of the these class names work for the CustomSearch class as well, so the whole section is available for customization. These are all within the id set for the CSE div in this page, so the parent is #cse by default.
Example: Setting results item title text color
For example, to set the title to red text instead of blue, use the ID of your results div followed by the subsection and value you want. The most specific div class name I found was .gs-title.
#cseDiv .gs-title * { color:#990033;}
Note that this works best with the most specific div name. Before I had the asterisk (*), the match words in the title, which come with their own bold tag, would revert to the default color. (See screenshots amid live search example below)
Showing the Long URLs
The Google CSE has recently switched from displaying the full URL of search results, to just the host name, so www.searchtools.com/tools/google-service.html became simply www.searchtools.com Many people want to switch it back.
CSS allows us to specify whether a section is visible (display:block) or invisible (display:none). The GwebResults has URLs in classes deep within the results section: take a look using the Safari 4 Web Inspector or Firebug sometime. To fix the the display URL, I've found only one selector that really works, using my style name from the results div (cseDiv):
#cseDiv div.gs-visibleUrl.gs-visibleUrl-long { display:block; }
#cseDiv div.gs-visibleUrl.gs-visibleUrl-short { display:none; }
If you add that to the CSS section, you should be able to see the full path URLs in the search results.like this:
Default Results Items:These are the standard results, set blue background in the cseDiv -- generated by the Basic Example. |
 |
|---|---|
Styled Results Items:These include the CSS settings from this page: red title with asterisk to make the bold part red as well, short URL hidden, long URL displayed. Descriptions above. |
 |
More CSS Customization
Jeremy R. Geedes wrote a great guest blog entry, Styling the SearchControl, which makes the standard search interface into something strikingly different, using colors, layout and images. He takes the CSS styling of the Result objects to the virtual limit. To do more than this, you'll have to take apart the elements of the result object, which is much trickier for the non-programmer.
For more information, advice, or search consulting, please contact Search Tools Consulting.