ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web»
  • Search Engines

Set up Google Custom Search Engine v.2

Updated on February 27, 2013

If you ever wondered how to make that pretty Custom-Google-Search-within-a-site “search bar” you may have come across on a lot of sites now days, then you’re in for a treat with Google Custom Search Engine V.2. Let’s just start off by saying that if you’re a WordPress user, you might be saying “I can already do that” well no, this feature actually combs and indexes a special Google controlled engine which you can control – it’s important to understand that the WordPress search feature is much different in that it will pull post results in a loop list display – while to someone who might not care, this actually means a lot. Whether having a GCSE built for your site helps SEO is a question I’d like to know (that would be reason enough to go through the pain of tailoring one to put one in), but for the meantime we just want to play with it because it is cool as heck.

The first half of this tutorial is just for setting up the account, if you don’t use box sizing in your web development, you should be able to use the v2 default them no problem. You’d be able to set up your account, set a layout and theme, grab the code and stick it in your page. For the rest of us, we can’t live without, and absolutely need to get into the guts of how things work. If you are familiar with the v2 theme, have been getting the flat box, the second half was written more for you guys. If all you care about is getting the button spyglass to pop up and not too picky with pixels – you can just end here and do this:

If not skip on. There are other things like monetization, promotions, and all that good stuff but we are just focused on simple – our objective will be to make a custom search bar, pretty up a theme, overwrite some styles, and have the results displaying directly underneath.

It’s really simple, all you need to start off with is to sign up for a Google Account (free)

But be careful! If you’re already logged into a Google Account, you’ll need to sign out unless you want your custom engine settings saved to your personal account

If you don’t want to set it up under the Google account you are currently logged in under, when you go to the url: http://www.google.com/cse/ you should see this screen. It has a short little video and there’s a nice little non-functional bar up at the top. Maybe in the future they’ll tie this to a functional demo (Google:*hint)

Let’s assume you’ve got your account set up and ready to go, easy enough to go from there.

Nothing hard on this one, just fill in the form information – site url, language, etc. The nice thing is that you aren’t limited to what’s only in your site – you can add your friend’s site, a partner site, a random page, an image – if google can reach it; it’s essentially mini-google catered for your website.

Here’s the formatting url instructions: (direct from site)

Individual pages: Specifying www.mysite.com/mypage.html will just include the mypage.html page on www.mysite.com.

Entire sites: Specifying www.mysite.com/* will include all the pages on www.mysite.com.

Parts of sites: You can use wildcard patterns to include just certain parts of a site. For example, www.mysite.com/*about* will include only files on www.mysite.com that have about in their name.

Entire domains: You can also specify an entire domain using *.mydomain.com. If you specify mydomain.com, we will automatically convert this to *.mydomain.com/*. If this is not what you want, you can change it back in the control panel.

(*Hint: If you ever get lost trying to make your way back to the dashboard, either click the title ‘Google Custom Search’ or just type ‘google custom search’ in google to find your way back.)

We want lots of hits for a good example so we’ll just use wiki (http://en.wikipedia.org/wiki/) as our site. It gives a congratulations, script, and a sample – but we’re not done yet. Here’s our example search bar:

When we test it, our results shows up in a separate page. But if we take it over with the code into our own page, we’ll see that it doesn’t work just yet – you need to select a theme and layout before grabbing the code.

If you hit the edit button, you can fill in some of the blanks, we’re going to leave most of what’s set up the way it is. In this screen we’re more concerned with access to the dashboard.

(dashboard)

This is our dashboard, it gives us access to the control panel navigation menu which after you set up your basic settings, you’ll want to come back to, so you should bookmark this page. There is also a link to your custom search engine at the top (somewhat) – which you can build a widget off of. Here you want to make sure you set up autocompletions, check on and off (may take up to an hour or so) and maybe add a few tweaks before saving.

(Look and Feel Menu)

This is the area where we are going to spend the majority of our time. This look and feel menu handles all the color schemes for the template that you select. For the time being, you don’t want to select the new default theme just yet (unless you don’t use the box-sizing attribute in your site), for us – we’re going bubblegum/fullwidth for our search results and default for our theme, and then make some micro edits to the styling afterward. At this point, once you’ve selected your theme, layout and styled abit, you’re free to go back and grab the code (if you want) but you should really stick around and play with the colors first.

(COLOURlovers)

At this point you want to have access to a good online color palette, recommend COLOURlovers colortrends - http://www.colourlovers.com/ Either fire up a free account or just start creating a palette, it’s so simple and easy to work with – create a custom palette, find the colors you like quickly, look at what others have done, grab a color and use it as a base example, toss it into your own palette, etc.

There are three screens that you are going to want visible (4 browser tabs) to set yourself up right:

· 1: The look and feel menu (firstly)

· 2: Copy the look and feel menu in another tab - Control panel - Look and feel: (URL to your Site)

· 3: Colourlovers – create a palette in edit mode

You don’t really want to cycle back and forth on the look and feel menu, you might get thrown off with some of the colors you are trying to experiment with, so a static page helps. While the bar on the bottom is not a total accurate depiction, it helps a lot. I like to separate the edits on a separate tab so I don’t cycle back and forth while I’m working on the theme. The colourlover’s edit console lets you quickly find a color and grab its hex – and give you a place to store it (if you sign up for a free account).

Once you’re relatively happy with the color scheme you have chosen for your theme, you can go ahead and grab the code and throw it into your page. If you want to further customize your custom search engine and absolutely must have control over styling the bar, you’re going to need to find a way to see what the script is spitting out – try setting up firefox and the searching for web developer under firefox extensions.

This will allow you to view the theme style link and how the script unpacks the markup. Note: in order to make any of your styles override, you have to set properties and values to !important.

(link to theme stylesheet)

(unpacked script)

Micro-editing styles to override the v.2 Google Custom Search Engine in your HTML editor (advanced)

Now that we can see what we are doing, follow the css of your theme and throw it up into your browser address bar. We took bubblegum, so were going to http://www.google.com/cse/style/look/bubblegum.css. Take css and toss it into your page embedded styles (<style type=”text/css”>) of the file you are working on in your editor (so you don’t have to work across stylesheets in the meantime as you’re experimenting), copy and paste. Make a wrapper for your search box, call it something like <div id=”gsce-box”> in your mark-up. Make sure either your wrapper is relatively positioned, or that it’s descendants will be relatively set (so that the elements you free don’t follow the body).

We’re also going to borrow a style from default for the clear “x” here – luckily it’s not an attribute embedded by the script, rather it’s handled by the css which means we can change it/override it. From the new default theme, we’re going to grab it’s base settings – in the GSearchControl CSS Classes

http://www.google.com/uds/api/search/1.0/d369d8abd543e83f65f7875493a3cf13/default+en.css

Grab the clear style and toss it into your sheet (div.gsc-clear-button). Copy/paste the url in your browser for the image link so you can grab it and save the .png image locally.

· div.gsc-clear-button – don’t kill padding on this by reset to 0. It will squish your image in a manner you won’t expect. Just margin off, set it’s position to absolute and let it float for now, don’t forget to give property preference with !important. (If you like the clear button, as is just leave it alone)
display: float !important; /* override inline */
position: absolute !important;
margin: 0 auto !important;
top: 0 !important;
bottom: 0 !important;
right: (yourimagesizeplussome) – you can play this one by ear later after you put your search image in

· background-image: url(‘filelocationyousaveimageto.png’) !important;

· div.gsc-clear-button:hover – add a hover class and save the hover version from default v2 to apply to your own theme.
background-image: url(‘filelocationyousaveimageto-hover.png’) !important;

We only care about the styles that affect the search bar. If you are using a two-column layout, don’t forget to place your search results element where you want it to pop up. Comment out what you don’t use, what you change set out your properties and comment out for reference. It’d be a good time to point out that anything you don’t add property preference too, the styles you add will just be ignored in favor of google’s stylesheet – even if it’s not a property in use. Going down the line:

· .cse .gsc-control-cse, .gsc-control-cse – if you like the padding, keep it – if not trash it but be aware that this will also affect your results page so you’ll have to add it back there later.
padding: 0 !important; /* 1em */

· Comment out everything up until the search button – you should let the theme handle this (unless you are planning to use webfonts for your menu)

· .cse table.gsc-search-box td.gsc-input, table.gsc-search-box td.gsc-input – this is to make room for your custom “x” clear
padding-right: 20px !important; /* 12px */

· form.gsc-search-box – this isn’t in our style we grabbed but we are going to inject and margin to wean off the margin-edge
margin: 0 !important;

· table.gsc-search-box – same thing here, we need this too to whittle the bottom edge
margin: 0 !important;

(input button)

· .cse input.gsc-input, input.gsc-input – we want a bigger box, and we’re free to make our edits now – we don’t want to go too big because we want to keep the google watermark, and we also want to line up with our button size we are going to add in. We also don’t want border curves on our search bar so were getting rid of them
-moz-border-radius: 0 !important; /* 2px */
-webkit-border-radius: 0 !important; /* 2px */
padding-right: (somefillernumber) !important; - this will be for search button later (come back and fill)
border-radius: 0 !important; /* 2px */
height: (your height) !important;

· .cse input.gsc-input:hover, input.gsc-input-hover - Here we’re going to borrow from our default v2 theme – just add these selectors and properties to your styles (if you want the shadows)
border-top-color: #a0a0a0 !important;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1) !important;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1) !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1) !important;
outline: none !important;

· .cse input.gsc-input:focus, input.gsc-input-focus – add this one too for the focus
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3) !important;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3) !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.3) !important;
outline: none !important;

(Search icon)

· .cse input.gsc-search-button, input.gsc-search-button - With the search button we are going to do the heaviest editing. We are going to add in our image we want to use as an icon – you need to pull the padding away and set the height and width constraints for your search icon, wash out the text, and kill the borders. You also need to pop it out of its wrapper, float it and move it using a separate selector. You don’t really have to get rid of the border, but it’s just easier to see what you’re doing, we’re also going to knock out the border curves. If you’re looking for a good place to get a spyglass image, maybe interested in playing with a font – check out http://www.entypo.com/ and don’t forget to like (so maybe he’ll update the social media character maps :P)
color: rgba(0,0,0,0) !important; /* #000 */

padding: 0 !important; /* 8px */

min-width: (you image width) !important; /* 54px */

border: 1px none #923c99 !important; /* change to none */
border-radius: 0 !important; /* 2px */

-moz-border-radius: 0 !important; /* 2px */
-webkit-border-radius: 0 !important; /* 2px */

· Create a separate .gsc-clear-button selector – this is where you are going to stick your background image for your button
position: absolute !important;
margin: 0 auto;
top: 0 !important;
right: 0 !important; height: (sizeofyourimage) !important;
background-image: url(filelocationofyourimage.png) !important;

· Other than that, all we’re going to do is add an additional selector - .gsc-clear-button:hover, and create another image for it to replace on the swap
background-image:
url(images/search-button-hover.png) !important;

If you were successful, your search bar looks something similar to this:

And do something a little similar to this:

In the google documentation, it says that if your autocompletions do not come up, try double-checking the autocompletion setting (turn off/turn on – also may take an hour) or could be affected by too many search results and may need to be limited. If your autocompletions aren’t active, try going here: http://support.google.com/customsearch/bin/answer.py?hl=en&answer=182256

All said and done, hopefully your custom search engine works! Good luck, rise up and build!

http://www.entypo.com/
(download, like, and bug him to update the social character maps!)

http://www.colourlovers.com/
(link to colourlovers color trends)

http://www.google.com/cse/style/look/v2/default.css
(link to default v2 style theme)

http://www.google.com/cse/style/look/bubblegum.css
(link to bubblegum style theme)

http://www.google.com/cse/cse.js
(reference to cse.js script constructor – main)

https://developers.google.com/custom-search/docs/dev_guide
(custom search engine developer’s guide documents)

https://developers.google.com/custom-search/docs/element#customizing
(documentation on customizing custome search elements)

https://developers.google.com/custom-search/docs/api#searchbox
(documentation on api searchbox)

https://developers.google.com/custom-search/docs/element#html5
(documentation on Custom Search Elements)

http://support.google.com/customsearch/bin/answer.py?hl=en&answer=1665295&topic=1717070&ctx=topic
(Control Panel and available search features documentation)

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      Will 21 months ago

      Good writeup.

      I just wish for the sake of time & speed that the Final CSS could have been presented in a block of selectable code, like on most StackOverflow, WPMUDev sites, etc.

      While the commentary was extremely helpful, it really got in the way of some value the code had.

    • eburnett profile image
      Author

      Ernest Burnett 4 years ago from Honolulu

      Wow! Time to find that old hubpages password and save it.

      Hmm...are you sure? My impression is that you are "forced" to because of the action script. Anything you write will be overwritten, the idea here being - making changes to what you can't do in Google's provided interface....even though it's very, very, very, very (admittedly) sloppy

    • profile image

      Mac 4 years ago

      NOTE: You really don't "need" to use !important tag in the CSS, and really shouldn't anyway... bad practice to use them... you are better off using the structure of your site to "override" what's defined in Google CSS, ala:

      body div#your_main_div_id div#your_nested_div_id .gsc-control {

      width: 300px;

      }

      This achieves the same thing as !important, but far more bullet proof and flexible than using !important