[fxdigi-cash]

Thanks first for the great effort and trying to share the good stuff...

I believe there is something missing here, which is google.php connection to the search box. I tested your way, but not really working as I expected. It opens new page on google search while actually we want the search to be taking place in the forum itself using the google.php...

what I did is the following:

1- created google.php "or whatever you like to call it"
2- created a template for google search as mentioned earlier.
3- placed google script in headeinclude template from my google custom search similar to this one:

<script>
  (function() {
    var cx = '00000000000000:aaaaaaaaaaa'; ///////////////CHANGE THIS TO YOUR OWN ID //// 
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

4- in the navtab, I edited the source in

<form action 
.... vb code for search box + button
</form>

to this:

<form method="get" action="http://www.YOUR VB LINK.com/google.php" target="_blank" class="navbar_search">
            <input type="hidden" name="sitesearch" value="YOUR VB LINK.com"  id="pn"/>
            <span class="textboxcontainer"><span><input type="text" value="" name="q" class="textbox" tabindex="99"/></span></span>
            <span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search.png" name="submit" style="border:0; margin-left:5px;" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
        <input type="hidden" name="domains" value="YOUR VB LINK.com"/>
</form>

replace the red tag with your forum url.

5- Last step, I added <gcse:search></gcse:search> in my google.php custom page...

Save the whole work and check it out...

I tested it and works perfect.

Thanks, and good luck.

Originally Posted by svensonsan

There is an update for this with the latest (v2) version of google custom search. I really like the google cse in vbulletin. It's much faster and with some styling in the css even the Google cse v2 will work in vbulletin 4.2

This short instruction will help if you use a two-page CSE as shown in the documentation at Multiple search boxes and results sections.

Already mentioned here:

1. Create the google.php file as mentioned on page 3 in this thread.
2. Create the GOOGLE template as mentioned on page 3 in this thread.

Now the new stuff.

1. headinclude template
copy the script-snippet at the bottom of your headinclude template.

<!-- google cse -->
<script>
  (function() {
    var cx = '00000000000000:aaaaaaaaaaa'; ///////////////CHANGE THIS TO YOUR OWN ID //// 
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<!-- / google cse -->

This will "enable" the searchform and searchresults in general in your forum.


2. navbar template
Display the search form in the navigation

Search for <form action="search.php ....
comment the normal search form

<vb:comment><form action 
.... a few lines 
</form></vb:comment>

Enter the new google search form under the global search div.

<div id="globalsearch" class="globalsearch">
<gcse:searchbox-only></gcse:searchbox-only>

Now you have the search form in your forum and yes, styling will follow.

but first edit the

3. GOOGLE Template

Should look like this:

<div class="blockrow">

<gcse:search></gcse:search>

      </div>

Not the long and old version mentioned in this thread. Only the <gcse:search></gcse:search> is used to display the search results and the search bar.
If you only want to show the search results you can use <gcse:searchresults-only></gcse:searchresults-only>

4. additional.css template
The search form will look broken at first.
You should modify at least the following styles:

input.gsc-input {
font-size:11px !important;
}

#globalsearch .gsc-input-box { 
border:none !important; 
height:22px !important; 
}

#globalsearch input.gsc-search-button-v2 {
padding:4px 20px !important;
margin-top:1px !important;
}