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!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.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>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.
<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>
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
.gsc-control-cse {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.
font-family: Arial, sans-serif;
border-color: #ffffff;
background-color: #ffffff;
}
.gsc-control-cse {Replace ADD IMAGE LINK HERE with image direct link and change the width and height size to suit your alignment.
font-family: Arial, sans-serif;
border-color: #ffffff;
background: url(ADD IMAGE LINK HERE) no-repeat;
height:25px;
width:300px;
}
The Orange CSS Code is as follows:
input.gsc-input {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:
border:1px solid #c7c7c7; padding:5px 0px 4px 0px; color:#666;
}
input.gsc-input {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
border:1px solid #c7c7c7; padding:5px 0px 4px 0px; color:#666;
font-size:12px;
font-family:arial;
font-weight:normal;
}
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 {Start playing with these and keep saving your widget to see the preview.
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;
}