Custom Search for Your Own Website, Parte Deux

Intro

In Part 1 we setup a Google custom site search for your (or my) website. This lets you very quickly setup a search customized to your website, powered by Google. It's much easier than creating your own search. Take a look at the screenshot below however and you may notice a drawback:

While the search results look nice, They don't match the theme of every site out there, and possibly not our own website. The good news is that there are ways of dealing with this. I'll cover 2 of those ways:

1. Changing your pre-canned Google custom site search theme.
2. Modifying things yourself with CSS.

The Easy Way

Changing the theme of your custom site search within Google's interface using a pre-canned theme is pretty easy. If you created search for your own site in part 1 of this series (as opposed to creating a search function on my sample website), then you can go to the Google CSE Page, and navigate to the section shown in this screenshot:

You can pick any of the themes shown here, click save, and refresh the search page you made, and voila! You have a new search theme. Here's an example of the results when I chose the Espresso theme:

This has the obvious drawback of limiting you to only the pre-canned themes. While they do look nice, I think we can do better than that.

The Coder Way

As with many things HTML-related, the Google custom site search results (and even the entry) are controlled by CSS classes. This makes our job of customization quite easy really; all we have to do is override some CSS classes. In this first example, I've overridden the search box to use a green font:

This is a pretty simple hack, accomplished with the following css:

        .gsc-input {
            color: green !important;
        }

Our next trick is to make the background of the search results black and to change the text and titles to slightly different greens. Here's what the result looks like:

And here's the CSS to accomplish this result:

        .gsc-results-wrapper-overlay {
            background-color: black !important;
        }

        .gs-title, .gs-title > b {
            font-size: 30pt !important;
            color: limegreen !important;
        }

        .gs-snippet {
            color: forestgreen !important;
        }

Not much to it really. All we did was set the results wrapper overlay (the popup results box) to have a background color of black, we set search result titles (the hyperlinks) to 30-pt font lime green, and we set the snippets in the results to forest green. As you can imagine, there are many more possibilities than what I've covered so have at it folks!

What's Next?

If this topic has interested you, use your browser's developer tools to find other CSS classes you can override. Let me know if you need help with that. You might also experiment with other ways of changing around the look and feel of things, perhaps through JavaScript. It's not my recommended solution as generally JavaScript should be reserved for actual code not changing appearance, but I make exceptions :)