We have a website built 6 years ago which uses Google Custom Search to allow users to search the website content. The search button and text entry field were styled to suit the website look and are exactly what we still want.
We now have to replace the Google Custom Search with a FreeFind search. The search itself works fine but I have very little html/ css experience and I cannot get the html provided by FreeFind correctly updated to be as close as possible to the layout we currently have.
Ideal (and current) look:
Below is the current google script and css which produces that look.
Script
<script type="text/javascript">
google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('009044625502831953428:eos3iok5mqe');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
<!-- put the results page URL in here -->
options.enableSearchboxOnly("/union/files/results.html", null, true); -->
<!-- end of URL details -->
options.setAutoComplete(true);
customSearchControl.draw('cse-search-form', options);
var active_color = '#ffffff'; // Colour of user provided text
var inactive_color = '#a6a6b8'; // Colour of default text
$("input.gsc-search-button").val("site search");
$("input.gsc-input").val("enter search term");
$("input.gsc-input").css("color", inactive_color);
var default_values = new Array();
$("input.gsc-input").focus(function() {
if (!default_values[this.id]) {
default_values[this.id] = this.value;
}
if (this.value == default_values[this.id]) {
this.value = '';
this.style.color = active_color;
}
$(this).blur(function() {
if (this.value == '') {
this.style.color = inactive_color;
this.value = default_values[this.id];
}
});
});
}, true);
</script>
CSS styles on page
<style type="text/css">
td.gsc-search-button {
margin: 0px;
}
form.gsc-search-box {
margin: 0px;
padding: 0px;
}
table.gsc-search-box {
margin: 0px;
}
table.gsc-search-box td.gsc-input {
padding: 0px;
}
input.gsc-input {
padding: 0px;
border: none;
}
.gsc-input input.gsc-input {
background: none repeat scroll 0% 0% #33335C !important;
margin: 0px;
height: 23px;
position: relative;
left: 78px;
width: 167px;
font-size: 14px;
padding: 1px 7px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
td.gsc-clear-button {
display: none;
}
input.gsc-search-button {
height: 23px;
position: relative;
right: 167px;
width: 78px;
border-radius: 0px;
-moz-border-radius: 0px;
border: none;
background-color: #4c4c70;
margin: 0px;
font-weight: normal;
font-size: 12px;
padding: 2px 0px;
cursor: pointer;
}
#search-poss {
position: absolute;
top: 78px;
height: 23px;
width: 245px;
background-color: #4e486c;
}
</style>
New html where advice is needed
Below is my new html, effectively what FreeFind provide with a couple of tweaks. Which unsurprisingly looks like this screen grab link. If someone can suggest likely changes to this html / css it will be much appreciated.
<div id="search-poss">
<!-- start of freefind search box html -->
<table cellpadding=0 cellspacing=0 border=0 margin = 0px>
<tr>
<td colspan=2 style="font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt;">
<form style="margin: 0px; padding: 0px;" action="http://search.freefind.com/find.html" method="get" accept-charset="utf-8" target="_blank">
<input type="submit" value="site search">
<input type="hidden" name="si" value="64367592">
<input type="hidden" name="pid" value="r">
<input type="hidden" name="n" value="0">
<input type="hidden" name="_charset_" value="">
<input type="hidden" name="bcd" value="÷">
<input type="text" name="query" size="20">
</form>
</td>
</tr>
</table>
<!-- end of freefind search box html -->
</div>
</html>
