Search code examples
cssgoogle-search

Custom Google Custom Search (GCS) Text And Styling

I have a paid/business version of the Google Custom Search, but I seems I can only customize small parts of the search.

Is there a way to:

  • Include the search without the default CSS? I don't want to override most styles with !important
  • Change the default text of the search-button and/or add a image to it without using own custom CSS

Idea is to have a simple styled input field with a magnifying glass next to it, both with white background and a gray border. Unfortunately it looks like google puts lots of margin/padding/other stuff on top which I do not want.

Solution

  • I presume you are talking about styling the search box rather than the search results?

    If so, you don't need to use their search box at all as long as you have a search result page which works off a parameter (e.g. www.example.com/searchresults/?q=searchquery) rather than a pop up. This is set up in GCS admin page under Look and Feel -> Layout -> Results only. Click "Save & Get Code" and then put the JavaScript code on this /searchresults/ page.

    Then you can just have a standard form which directs to that page and passes the search query. This works for both the premium paid version and the free version.

    This is how I have it set up on www.tunetheweb.com if you want to have a look.

    Only downside is you can't get their auto complete suggestions in the search box if you use that feature as its no longer their search box.