June 24th, 2009


Google CSE AJAX API - Using CSS on the search results

CSS styling of AJAX search results

For customizing the fonts, colors, size, and styles of the Google Custom Search Engine (CSE), there is a many-layered hierarchy of div class names. For example, I found the right name to to turn all the result item titles red (even the bold subsections). I had to use the name of my search results for the browser to render correctly:

#cseDiv .gs-title * { color:#990033; }

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.

For more information, see my Analysis of the CSE and AJAX API and Basic CSE AJAX sample code. Or contact me directly, by commenting on this post (messages will be screened) or use the SearchTools.com contact page