Change Size, Font Family and Color Of Custom Search Engine

Google Custom Search Engine is another option that Adsense provides to increase your blog revenue. I shared detailed posts on how to create a custom search engine and integrate adsense in it. However the problem with the customization and editing options that Google provides lacks complete control over the margining and padding of the search box. Today we will learn on how to change the look of the search box using our own custom styles and change the size and alignment of the box elements. It is perfectly alright to edit the stylesheet (i.e. CSS Code) of the search engine because it is just a design change and therefore it does not violate any of Adsense terms of service. So lets get going!

DEMO: You will find the Minimalist Theme of the Search box on my sidebar.

Customize Google Search Box

I assume you have already tried our tutorial on Custom Search engines and have installed the search box on your blog sidebars. If not then you may first try them.

1. Create a Custom Google Search Box
2. Make Money With Google Custom Search Engine

The code that Google provides you will look slightly similar to this one,

Note: You are not going to use the code shared here. It only gives you idea on how to edit your own Google code for your search engine.

<div id="cse-search-form" 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() {
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setSearchFormRoot('cse-search-form');
    customSearchControl.draw('cse', options);
  }, true);
</script>

<style type="text/css">
  .gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #ffffff;
    background-color: #ffffff;
  }

 

input.gsc-input {
    border:1px solid #c7c7c7; padding:5px 0px 4px 0px; color:#666;
  }

  input.gsc-search-button {
    border-color: #333333;
    background-color: #333333; margin-left:1px;
  }

  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #0080ff;
    background-color: #289728;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-color: #0080ff;
    background-color: #0080ff;
  }
  .gsc-tabsArea {
    border-color: #0080ff;
  }
  .gsc-webResult.gsc-result,
  .gsc-results .gsc-imageResult {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-webResult.gsc-result:hover,
  .gsc-imageResult:hover {
    border-color: #0080ff;
    background-color: #E0F0FF;
  }
  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b,
  .gs-imageResult a.gs-title:link,
  .gs-imageResult a.gs-title:link b {
    color: #0080ff;
  }
  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b,
  .gs-imageResult a.gs-title:visited,
  .gs-imageResult a.gs-title:visited b {
    color: #666666;
  }
  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b,
  .gs-imageResult a.gs-title:hover,
  .gs-imageResult a.gs-title:hover b {
    color: #444444;
  }
  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b,
  .gs-imageResult a.gs-title:active,
  .gs-imageResult a.gs-title:active b {
    color: #777777;
  }
  .gsc-cursor-page {
    color: #0080ff;
  }
  a.gsc-trailing-more-results:link {
    color: #0080ff;
  }
  .gs-webResult .gs-snippet,
  .gs-imageResult .gs-snippet {
    color: #333333;
  }
  .gs-webResult div.gs-visibleUrl,
  .gs-imageResult div.gs-visibleUrl {
    color: #333333;
  }
  .gs-webResult div.gs-visibleUrl-short {
    color: #333333;
  }
  .gs-webResult div.gs-visibleUrl-short {
    display: none;
  }
  .gs-webResult div.gs-visibleUrl-long {
    display: block;
  }
  .gsc-cursor-box {
    border-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-page {
    border-color: #0080ff;
    background-color: #FFFFFF;
    color: #0080ff;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    border-color: #0080ff;
    background-color: #0080ff;
    color: #666666;
  }
  .gs-promotion {
    border-color: #0080ff;
    background-color: #ffffff;
  }
  .gs-promotion a.gs-title:link,
  .gs-promotion a.gs-title:link *,
  .gs-promotion .gs-snippet a:link {
    color: #0080ff !important;
  }
  .gs-promotion a.gs-title:visited,
  .gs-promotion a.gs-title:visited *,
  .gs-promotion .gs-snippet a:visited {
    color: #666666;
  }
  .gs-promotion a.gs-title:hover,
  .gs-promotion a.gs-title:hover *,
  .gs-promotion .gs-snippet a:hover {
    color: #666666;
  }
  .gs-promotion a.gs-title:active,
  .gs-promotion a.gs-title:active *,
  .gs-promotion .gs-snippet a:active {
    color: #0080ff;
  }
  .gs-promotion .gs-snippet,
  .gs-promotion .gs-title .gs-promotion-title-right,
  .gs-promotion .gs-title .gs-promotion-title-right *  {
    color: #0080ff;
  }
  .gs-promotion .gs-visibleUrl,
  .gs-promotion .gs-visibleUrl-short {
    color: #289728;
  }
</style>

 

The CSS code is the one enclosed between the two yellow highlighted lines. This code is responsible for the over all look of your box. To keep things simple we will be focusing only on the three coloured sections of the code and I will refer them as Purple, Orange and Green section.

 

If you want your search box to look exactly like mine then create a search box as instructed in our previous tutorial and choose the style as "Minimalist" Then replace the first three sections of your CSS code with the ones I shared above as purple, orange and green. That's it.

However if you wish to edit the style of your current search box then you only need to change the CSS properties which are enclosed between the curly brackets i.e. {}

Lets first understand the three sections.

• The Purple section is responsible for the look of the box that contains the Input rectangle and search button.
• The Orange section is responsible for look of the input box where users write query.
• The Green section is then responsible for the look of the Search/Submit button

The purple CSS code is as follows:

.gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #ffffff;
    background-color: #ffffff;
  }

In my case I have kept border color as white and background color as white. To Change the border and background colors simply change the hexadecimal code by using our color generator Tool. If you wish to use a background image instead and you wish to change the box height and width then you may alter the same purple code as follows.

.gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #ffffff;

    background: url(ADD IMAGE LINK HERE) no-repeat;

    height:25px;

    width:300px;

  }

 

Replace ADD IMAGE LINK HERE with image direct link and change the width and height size to suit your alignment.

The Orange CSS Code is as follows:

input.gsc-input {
    border:1px solid #c7c7c7; padding:5px 0px 4px 0px; color:#666;
  }

This will style the rectangular input box where you write query text. Now here we can introduce and change several new styles like font size, font type, text area size, text color etc. You can also set a gap between the text area and the search button using padding. You can make these alterations if you wish else you can use the code in its default form and replace your input section with this orange one. Altered code is:

input.gsc-input {
    border:1px solid #c7c7c7; padding:5px 0px 4px 0px; color:#666;

font-size:12px;

font-family:arial;

font-weight:normal;
  }

 

I am sure the code is easy enough to be edited. You can choose the following font families as standards: Arial, Verdana or sans-serif. Font weight turns the text thickness. You can choose normal or bold. To change to text color simply change color:#666

The padding is actually the distance between the outline of the input box (Text Area box) and the text. Keep it as default. If you wish to change it then it follows this order:

padding:Top Right Bottom Left; In my case I have set them as padding:5px 0px 4px 0px;

The Green CSS Code is as follows:

input.gsc-search-button {
    border-color: #333333;
    background-color: #333333; margin-left:1px;
  }

 

This code changes the look and appearance of the Search/Submit button. You can edit it as there is nothing new except the margin property.

A margin is the gap distance between the search button and Text Input Box. You can set other margins too. Altered code is here:

input.gsc-search-button {
    border-color: #333333;
    background-color: #333333; margin-left:1px;

margin-right:0px;

margin-top:0px;

margin-bottom:0px;

font-size:12px;

font-family:Arial;

font-weight:bold;

  }

Start playing with these and keep saving your widget to see the preview.

Need Help?

Try customizing your search box using the simple method shared above. If you needed any help then feel free to let me know. Do share the CSS code of your search box while asking a question. I hope this helps most of you. Peace brothers.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 10/14/2011