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 will need to separate the file of the search box and the results.

For the main file:

<form action="/search.html" method="get"><!--Change /search.html to your 
results file-->
    <input type="text" name="search" placeholder="Search..">
    <input type="submit" name="q" value="Submit">
</form>
<style>
    input[type=text] {
        width: 150px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }

    input[type=text]:focus {
        width: 300px;
    }

    input[type=submit] {
        width: 100px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
</style>

And for the results file (default: search.html):

<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>
<gcse:searchresults-only></gcse:searchresults-only>

If it doesn't work, it maybe because of your website is not on Google Search Engine or probably code error? Please reply if it doesn't work.

Answer 2

TO CLEAR WATERMARK:

.gsc-clear-button{
 display:none !important;
}
.cse input.gsc-input,input.gsc-input{
background-image:none !important;
height:30px !important;
}

Answer 3

The way I got this to work.. 1. Set async to false in google script (gcse.async = false); 2. Add css below. It probably depends on the order the css is loaded!

.gsc-control-cse{ padding:0 !important; }

Answer 4

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 5

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 {}
   

Answer 6

On the CSE page,

1. Choose the search engine, which you want to style.
2. Click on Look and feel
3. Click on the Customize tab

This has options for theming any component of CSE that you wish to style.

Update

If you want more options than those offered in the control panel, you'll have to use the API, an example of using it is at the bottom of the page.

You would particularly be interested in Custom Search Element Control API, where you can specify which HTML tag, the id of the element, which you can then stlye.

Sample Demo :

<div id="test"></div>
<style type="text/css">
    #test input {
      font-size: 32px;
      color: red;
    }
</style>

<script>
var myCallback = function() {
  if (document.readyState == 'complete') {
    google.search.cse.element.render({
          div: "test",
          tag: 'search'
   });
  } else {
    google.setOnLoadCallback(function() {
        google.search.cse.element.render({
              div: "test",
              tag: 'search'
            });
    }, true);
  }
};

window.__gcse = {parsetags: 'explicit', callback: myCallback};
(function() {
  var cx = '008717607452966325908:cegvvfhkhvk'; // Insert your own Custom Search engine ID here
  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>