Google Custom Search (CSEv2) help on styling?

Question

I need help on styling the Google Custom Search Box (not the results)

Old styles were using the form tags, where you could easily style the look & feel of the search box.

<form action="/search" id="searchbox_abc:123" class="search">
    <input type="hidden" name="cx" value="abc:12">
    <input type="hidden" name="cof" value="FORID:XX">
    <input type="text" name="q" size="16" class="smalltext">                    
    <input type="submit" name="sa" value="SEARCH" class="smalltext">
</form>

With the new CSEv2 code, it is contained in script tags:

<script>
  (function() {
    var cx = 'abc:123';
    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>

and you have to put the following tags where you want the Search Box to be displayed.

<gcse:search></gcse:search>

I need help on how to style the new CSE to look like the previous one. (font size, button and input field sizes..etc, exactly the same styling as before..apply classes/set font..etc)

Thanks!

Answer 1

You don't need to do all that just add this to the end of the google's search <script> tag Like So:

<script>
    (function() {
        var cx = '017524632059031635296:oiqsdcln6tk';
        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>
<gcse:searchresults-only></gcse:searchresults-only>

Make sure you add <gcse:searchresults-only ></gcse:searchresults-only> at the bottom of that closing script tag And add your own form For example:

<form action="" method="GET">
  <input class="input" name="q" placeholder="Search...">
</form>

Then style It just how you would style any regular HTML tag, And you're good to Go! and It works exactly the way It used to work. PS. If you wan't to take the user some other place for Example search.html Just add this <form action="search.html" method="GET"> insted of this <form action="" method="GET">

Hope It helped you! -Arqetech

Answer 2

1. Use a DOM inspection tool like the one built into the Google Chrome or Firefox browsers. (Right click on an element and select "Inspect.") This will allow you to determine element IDs/classes and their current styles.

2. Write CSS rules that override those styles, like this:

   input.gsc-input {}
   input.gsc-search-button {}
   form.gsc-search-box {}
   div.gsc-control-cse {}