I am trying to replace the default search bar with a googlel search bar. I was give this code:

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('009450143332839 663346:gxn25vyt8tnd');
customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>

but I don't know where to put it. I tried adding it to the CSS/HTML inserts in ATO, but nothing changed. Can anyone help me?

Where do you want it to show? If you want it in the sidebar put the code in a text widget. In which one of the fields in CSS/HTML inserts did you try to put this code?

I just asked this at 'search box on the menu bar' forum: what do I need to do, where, and how to put a search box either at the right end of the menu or, keeping the menu centered, put the search box in the upper right corner?

Took me a few hour of reading and playing around (I dont know PHP) but I finally replaced the default searchbox in the header with a google searchbox

This is what i did:

1. access your theme folder using an FTP client, open the functions folder there.
2.find the file bfa_header_config.php and transfer a copy of it to my computer then renamed the original on the site server to oldbfa_header_config.php
3. opened the copy on my computer with a text editor and scroll to line 284 (// search box)

This is what displays the search box when its turned on in the theme option screen.

PHP Code:

if ( $bfa_ata['show_search_box'] == "Yes" ) { 
            echo '<td valign="bottom" class="search-box" align="right"><div class="searchbox">
                <form method="get" class="searchform" action="'; bloginfo( 'url' ); echo '/">
                <div class="searchbox-form">' . 
                    // Check for WP 2.2 which doesn't know get_search_query
                    (function_exists('get_search_query') ? '
                    <input type="text" class="text inputblur" onfocus="this.value=\''.
                    (get_search_query() ? get_search_query() : '' ).'\'" 
                    value="' . (get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ) . 
                    '" onblur="this.value=\''.(get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ).
                    '\'" name="s" />' :
                    '<input type="text" class="text inputblur" name="s" />') .
                '</div>
                </form>
            </div>
            </td>';
        } 

    echo '</tr></table>'; 


deleted this:

PHP Code:

'; bloginfo( 'url' ); echo '/ 


in line 287;

PHP Code:

<form method="get" class="searchform" action="'; bloginfo( 'url' ); echo '/"> 


deleted all of this:

PHP Code:

// Check for WP 2.2 which doesn't know get_search_query
                    (function_exists('get_search_query') ? '
                    <input type="text" class="text inputblur" onfocus="this.value=\''.
                    (get_search_query() ? get_search_query() : '' ).'\'" 
                    value="' . (get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ) . 
                    '" onblur="this.value=\''.(get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ).
                    '\'" name="s" />' :
                    '<input type="text" class="text inputblur" name="s" />') . 


deleted the " '." at the end of this line

PHP Code:

<div class="searchbox-form">' . 


(line 288)

and the ' at the start of this line

PHP Code:

'</div> 


(line 297)

code should now look like this:

PHP Code:

if ( $bfa_ata['show_search_box'] == "Yes" ) { 
            echo '<td valign="bottom" class="search-box" align="right"><div class="searchbox">
                <form method="get" class="searchform" action="">
                <div class="searchbox-form">
                    
                </div>
                </form>
            </div>
            </td>'; 


removed

PHP Code:

method="get" 


from <form method="get" class="searchform" action="">


at this point you can insert your code for the google searchbox on the line after

PHP Code:

<div class="searchbox-form"> 


and before

PHP Code:

</div> 


you might have to play around with it a bit to get it to work as I don't have the code for all the google search box.

for mine, I changed the action="" in the form tag to match the 'action=' string in my google code;

"http://www.google.ca/cse" id="cse-search-box" target="_blank"

and move this

<script type="text/javascript" src="http://www.google.ca/cse/brand?form=cse-search-box&amp;lang=en"></script>

to below the closing form tag </form>

4. save then upload file to themefolder/functions/

5.the result is here

6. will also have to adjust the style settings in the theme option header section scroll down to search box and adjust the width, bottom margin, and right margin position where you want it.

hopes this help anyone who is trying to do the same

PS:make notes of all changes and keep a copy of the modified file so you can make the needed changes again if and when the theme is updated

it would have been nice if this was kept in the searchform.php so you could simply replace/mod that file.

Or you could do something like the following so you won't have to deal with it after an upgrade to the theme.

I put the Google search code in ATO>Style & edit Header Area at the top of the Configure Header Area box. Mine looks like this.

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('002026836158716381777:n-bljc1k7zk');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
%pages %logo %bar1 %image %bar2

Then I added the following to ATO>Add HTML/CSS Inserts>CSS Inserts which you would tweak to get the positioning right.

#cse .gsc-control-cse .gsc-search-box {width:250px;position:relative;top:21px;left:360px;z-index:99;}

I also played with the Google Custom Search which has a nice popup window option for the results.

anything that works, as i said I know little or no php and is just fumbling my way through.

The thing I like about my approach, while messy compared to your's is that I dont have to worry about the Css because its using the same default styling class and div, and you can still turn it on and off via the theme option settings. But I'll have the greater headache when the theme gets updated.

Do you think the theme creator would consider moving this subroutine back to the standalone file searchform.php so it would be easier to create custom search boxes without poking around in the main code.