9

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!

whispers
  • 962
  • 1
  • 22
  • 48

6 Answers6

8

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

Arqetech
  • 463
  • 1
  • 4
  • 15
  • Hey Arqetech. No doubt your solution will work. but it creates a 'url parameter' and adds it to the address bar URL. meaning on-refresh the page will load the last saved search parameters and load the custom search automatically. Do you have a solution for that ? – Nikhil Nanjappa Apr 16 '15 at 05:26
  • @Nikhil Nanjappa Sorry for my late reply, But I didn't quite get it! Please explain more briefly – Arqetech Apr 21 '15 at 15:46
  • Example if your url is say - `localhost:8080` and you search for say `play`, the search shows up and the url now changes to `localhost:8080/?q=play/`. Now on refresh the url does NOT change but ends up searching for the word `play` again. – Nikhil Nanjappa Apr 21 '15 at 17:23
  • Then you would want a `$_POST` request instead of `$_GET` by default it uses `$_GET` – Arqetech Apr 21 '15 at 18:57
  • You need to change the `
    ` to `
    `
     – Arqetech Apr 21 '15 at 18:58
  • `POST` still puts the query string in the url for me. – James McMahon Jun 05 '15 at 18:43
  • this is much better solution than hacking CSS via JS. Really helped me. – Raj Sep 28 '18 at 03:31
7

  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 {}
bwhet
  • 158
  • 2
  • 12
2

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>
Pranav 웃
  • 8,469
  • 6
  • 38
  • 48
  • Thanks,..byut that hardly gives you much control..only over a few border or background colors... how can I get the same 'styling' I previously had while using the FORM tags? Such as font size, and the size of the buttons/input field...etc SO are you saying its there and I missed it? Or you didnt read the post fully? I need to be able to style/add classes like previously done to match size and current site theme. Thanks! – whispers Nov 20 '13 at 18:07
  • @whispers : Ah, missed that in the question, I've updated the answer :) – Pranav 웃 Nov 20 '13 at 18:30
  • Thanks. But in the end I couldnt get it to work. An example would be best if possible? :) I couldnt get the input field to be a specific size (always too tall, not anything small like 15px in height or something font size 9px I couldnt get a small button (but did get a new image as the button BG, however the magnifying glass icon/overlay was still there) And still had the google branding/image in the input field. specific examples on targeting/overwriting the css for that aspect is appreciated. (remember for now this is only targeting the input field & button, not the results yet) Thanks – whispers Nov 21 '13 at 04:37
  • For anyone else wanting/willing to help.. an example of how to get the CSE v2 to look like this: [link](http://dmstudios.net/misc/GCSE_searchBox.jpg) Thanks to anyone who can post some simple CSS to overwrite Google's CSS and make the components look like the above image (which is done using CSS and the older FORM tags) Thanks!!!! – whispers Nov 21 '13 at 16:28
1

TO CLEAR WATERMARK:

.gsc-clear-button{
 display:none !important;
}
.cse input.gsc-input,input.gsc-input{
background-image:none !important;
height:30px !important;
}
nitinsridar
  • 684
  • 1
  • 12
  • 25
0

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

Harry
  • 1,509
  • 3
  • 15
  • 25
0

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.

Kakkoiikun
  • 41
  • 6