redesigngoogle: Keystroke

Welcome. RedesignGoogle lets you totally transform the look of Google Search by creating and installing custom designs. It's part of WebMynd's mission to give you more control over your search experience.

redesigngoogle.
gallery: cool

get this look

designer's statement

Updates results as you type!

tweet this!

also by Imran Zaidi

Keystroke

by Imran Zaidi

average rating

show discussion

/*
Enter your CSS here. This is a skeleton stylesheet to help you get started.
*/

/* background image */
body {
  background-color: #fbfbfb;
	background-repeat: repeat-x;
	overflow-x: hidden;
}

.lst {
	border: 0;
	font-size: 18px;
	height: 33px;
	background-color: #dddddd;
	padding: 5px 0px;
	width: 100%;
	text-align: left;
	font-weight: bold;
	color: #1e1e1e;
	opacity: 1.0;
	margin: 0;
	position: relative;
	top: -13px;
}

#searchl, #searchr {
}

#sft {
	padding: 0 !important;
	margin: 0 !important;
	float: right;
	width: 30%;
}

#sff {
	padding: 0 !important;
	margin: 0 !important;
}

#cnt {
	width: 70%;
	margin: auto;
	margin-top: 60px;
}

li { 
 list-style-type:none; 
}

.loadmore {
	clear: both;
	padding-bottom: 100px;
	padding-top: 15px;
	text-align: center;
	width: 100%;
	font-size: 36px;
	font-weight: bold;
}

#numresults {
	font-size: 14px;
	color: #a6a6a6;
	position: relative;
	width: 100%;
	top: 10px;
	left: 14px;
}

.hidden {
	display: none;
}

#res button {
	display: none;
}

.loadmore a {
	text-decoration: none;
}

#gbar, #guser {
	text-transform: lowercase;
	font-size: 14px;
}

.gbh {
	display: none;
}

#ssb {
	display: none;
}

#mbEnd {
	display: none;
}

.lsb, .xsm {
	display: none;
}

#rhsline {
	display: none;
}

#res {
	padding: 0;
	width: 60%;
}

/* logo */
#logo {
  font-size: 0px;
  background-repeat: no-repeat;
  background-image: url('your-logo');
}

/* search box */
.ts input[size] {

}

/* result links */
a.l {
	text-decoration: none;
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
}

a.l:hover {
	text-decoration: underline;
}

/* result link descriptions */
.s {
	color: #434343;
	font-size: 12px;
	line-height: 18px;
	max-width: none;
	margin-right: 10%;
}

.e {
	display: none;
}

/* general links */
a:link, .w, #prs a:active, .q:active {
	color: #0f0f0f;
}

a:hover {
	color: black;
}

a {
	outline: none;
}

/* visited links */
#prs a:visited, .mblink:visited, a:visited, .q:visited {
	color: black;
}

/* cached/similar/related links */
a.fl, fl:link, .gl, .gl a:link {
  color: #313131 !important;
	font-weight: bold;
}

/* nav links */
#nav .b a, #nav .b a:visited, a.gb1, a.gb2, a.gb3, .link {
  color: #313131 !important;
	text-decoration: none;
}

#header {
	margin-top: 10px;
	opacity: 0.5;
}

/* citations */
cite {
	color: #888888;
}

/* book citations */
.a {

}

#nav {
	display: none;
}

/* top sponsored links table */
#tads {

}

/* right hand sponsored links table */
#mbEnd {

}

/* bar at top of search results */
#ssb, .blk {

}

/* footer */
#bsf {

}

start = 0;
lastKeystroke = null;
thisKeystroke = null;
searchEvent = null;

function loadMore() {
	start += 10;
	var nextlink = $("#nav tr td:last a").attr('href');
	//var currenturl = window.location;
	//var url = currenturl.replace(/([?&])(start=[^&$]*)?([&$])/,"$1$3");
	url = '/search?' + $('#tsf').serialize() + '&start=' + start;
	//var url = 'page2.html';
	$("#tempresults").load(url + ' #res');
	$("#tempresults").attr('id', 'oldtemp');
	$('<div id="tempresults" class="moreloaded"></div>').insertAfter(".moreloaded:last");
}

$(document).ready(function() {
	
	$("table.ts,div#iur", $("#res")).parent().each(function() {
		$(this).remove();
	});
	
	$("#logo").hide();
	$(".clr").hide();
	var numresults = $("#ssb p b:eq(2)").html();
	
	$('<div id="results"></div>').insertAfter("#cnt");
	$('<div id="numresults">'+numresults+' pages found</div>').appendTo("#sff");
	
	// live search
	$(".lst").bind("focus", function(e){
		var currentTime = new Date();
		thisKeystroke = currentTime.getTime();
	});
	
	$(".lst").bind("keypress", function(e){
		var currentTime = new Date();
		lastKeystroke = thisKeystroke;
		thisKeystroke = currentTime.getTime();
		timeSinceLast = thisKeystroke - lastKeystroke;
		if (timeSinceLast < 600 && searchEvent != null) {
			clearTimeout(searchEvent);
		}
		searchEvent = setTimeout("updateResults();", 600);
	});
	
	$(window).scroll(function(){
		if ($(window).scrollTop() == $(document).height() - $(window).height()){
			loadMore();
		}
	});
	
	
	$('#tsf').insertBefore("#res");
	
	$('<img src="http://webmynd_look.s3.amazonaws.com/2920/searchl.png" id="searchl">').insertBefore("input.lst");
	$('<img src="http://webmynd_look.s3.amazonaws.com/2920/searchr.png" id="searchr">').insertAfter("input.lst");
	
	$('<div id="tempresults" class="moreloaded"></div>').insertAfter("#res");
});