“The hardest thing in the world to understand is the income tax.”
– Albert Einstein

«
»

How to change Google custom search watermark

Google custom search has been around for some time now, but its only now that I look and use it.

However, I wanted it to fit on the top search box on my current WP theme. The query box has this background, so I looked at the CSS of the entire page. But nothing defines that google logo anywhere. Then, I found this code above embeded using javascript information on Web Developer toolbar. What I did is copy and modified the location of background image I want to use (q.style.background = 'url(your_new_path_to/watermark.gif)';) then, paste in the footer of my current theme. Barabimbaraboom! It executes last with a different background image location or new color background, that’s it.

But I reverted everything back to default! LOL, as I might violate Google T&C. Or if I found time to read the entire Google’s T&C on Custom Search, I will update this post, wether or not its ok to remove or change that watermark. ;) 

(function()
{
    var f = document.getElementById('cse-search-box');
    if (!f)
    {
      f = document.getElementById('searchbox_demo');
    }
    if (f && f.q)
    {
      var q = f.q;
      var n = navigator;
      var l = location;
      if (n.platform == 'Win32') {
        q.style.cssText = 'border: 1px solid #7e9db9; padding: 2px;';
      }
      var b = function()
      {
        if (q.value == '')
        {
          /*
            change the path to your intended background image or color.
           */
          q.style.background = 'url(your_new_path_to/watermark.gif)';
        }
      };
      var f = function() {
        /*
           This part is when query box is in focus
         */
        q.style.background = '#ffffff';
      };
      q.onfocus = f;
      q.onblur = b;
      /* JS regex that calls blur function when query is not submitted */
      if (!/[&?]q=[^&]/.test(l.search))
      {
        b();
      }
    }
  }
)();

Tags: ,

This entry was posted on Monday, December 8th, 2008 at 11:27 pm and is filed under work related. You can follow any responses to this entry through the RSS 2.0 feed or Share. You can leave a response, or trackback from your own site.

One Response to “How to change Google custom search watermark”

  1. Tex Jernigan says:
    January 9, 2010 at 2:45 am

    I don’t see the same options you had, but after some exhaustive searches I found this forum

    http://groups.google.com/group/google-custom-search-creating-and-editing/browse_thread/thread/b0551aded8c00c15/d578694acff9115f

Leave a Reply