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();
}
}
}
)();