redesigngoogle: Plex 1.2.1

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: uncategorized

get this look

designer's statement

Last Update: 2010-01-20 -------------------------------------------------------------------- Google torn apart and completely rebuilt from ground zero. The hardest part of this project was figuring out which ID/Class belonged to what (<3 Firebug's Element Inspector) and how to override Google's styling (fun example: .e #brs tr:last-of-type td:nth-last-child(2) a:after). Feel free to use my CSS as a starting point for your own design, but please give credit. It took me a long time to figure out everything. -------------------------------------------------------------------- BUG: "Show Options..." and "Advanced Search" are ugly for the time being. -------------------------------------------------------------------- View CSS: http://nylira.com/p/google/main.css

tweet this!

also by Peng Zhong

Plex 1.2.1

by Peng Zhong

average rating

show discussion

/*----------------------------------------------------------------------
	
	P L E X (Entry for WebMynd's RedesignGoogle.com)
	
	Feel free to use this CSS file as a starting point for your own
	design, but please give credit.
	
	Peng Zhong
	Nylira LLC (nylira.com)	
	
----------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent; }
ol, ul { list-style: none; }
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table { border-collapse: collapse;border-spacing: 0; }

/*----------------------------------------------------------------------
	A N D   T H E   F U N   B E G I N S
----------------------------------------------------------------------*/

html {background: rgb(255,255,240) url(http://nylira.com/p/google/bg.png) center 24px repeat-x}
body {
	font: 12px/1.5 Arial, sans-serif;
	color: rgb(114,74,12);
	width: 950px;
	margin: 0 auto;
}
b {font-weight: bold;}
.b { font-weight: normal;}

/* top border and background for footer, sub-nav bar, and .blk*/
#bsf, #ssb, .blk {
	border: none;
	background: transparent;
}

/* hard to see stuff (cites etc) */
.a, cite, .cite, .cite:link, .f{
	font: 12px/18px Arial;
	color: rgb(32,115,87) !important;
	font-style:normal;
}

/*----------------------------------------------------------------------
	links
----------------------------------------------------------------------*/

a {text-decoration: none;}
/* link color for everything */
a:link, .w, #prs a:visited, #prs a:active, .q:active, .q:visited, a.gb1, a.gb3, a.gb4 {color: rgb(183,23,0) !important}
a:hover, a:hover b, a:hover em {color: rgb(47,36,16) !important}

/* link color for Cached - Similar */
.fl:link, .gl a:link { 
	color: rgb(98,83,24) !important;
	line-height: 18px;
}
.fl:link:hover, .gl a:link:hover {color: rgb(204,185,21) !important;}

/* visited links */
.mblink:visited, a:visited { color: rgb(205,161,2); }

/*----------------------------------------------------------------------
	#gbar = tab bar
----------------------------------------------------------------------*/

#gbar {
	height: 36px;
	padding: 0 !important;
}
#gbar b, #gbar a {
	display: block;
	float: left;
	padding: 0 12px;
	height: 36px;
	margin: 0 !important;
	/* text */
	font: bold 12px/36px Arial;
	text-align: center;
}
#gbar a {color: rgba(255,255,255,.5) !important}
#gbar a:last-of-type {margin: 0;}
#gbar a:hover {
	color: rgba(255,255,255,.7) !important;
	background: rgba(255,255,240,.1);
}
#gbar b {background: rgb(255,255,240);}

/* drop down menu */
/* gbi = more, gbg = settings*/
#gbi, #gbg {
	top: 50px !important;
	background: rgb(51,40,10);
	border: none;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-box-shadow: rgba(0,0,0,.3) 2px 2px 10px;
}
#gbi {width: 100px;}
#gbg {width: 200px;}

#gbi .gb2, #gbg .gb2 {
	height: 24px;
	line-height: 24px !important;
	color: rgba(255,255,255,.5) !important;
	display: block !important;
	float: none;
	text-align: left !important;
	padding-left: 10px !important;
}
#gbi .gb2 { width: 100px}
#gbg .gb2 {width: 200px}
#gbi .gb2:hover, #gbg .gb2:hover {
	color: rgba(255,255,255,.7) !important;
	background: rgba(255,255,240,.1);
}

.gb2:last-of-type {
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

/* wtf is this */
#gbs {display:none}

/* account stuff */
#guser {
	float: right;
	height: 36px;
	padding: 0 !important;
	font-size: 12px; 
	line-height: 36px;
	line-height: 36px;
	color: rgba(255,255,255,.3)
}

#guser a {
	display: inline-block;
	float: none;
	height: 36px;
	margin: 0 !important;
	/* text */
	font: bold 12px/36px Arial;
}
#guser a {color: rgba(255,255,255,.5) !important}
#guser a:hover {color: rgba(255,255,255,.7) !important}

/* Settings menu */
#gbg .gb2 {color: rgb(150,150,150) !important;}
.gbh, .gbd {border-top: none;}

/*----------------------------------------------------------------------
	#cnt = container 
----------------------------------------------------------------------*/

#cnt {
	clear: both;
	max-width: none !important;
}

.std[style="display: table; margin-top: -1.23em; margin-left: -8px; text-align: right; width: 100%;"] {
	display: none !important;
}
/*----------------------------------------------------------------------
	search bars
----------------------------------------------------------------------*/

/* the search box */
.lst {
	height: 20px;
	border: none;
	width: 537px; /* 630 px - 36px(adv search) - 14px (padding) - 5px(space for button) - 36 icon space*/
	border: 1px solid rgb(237,222,199);
	padding: 7px 7px 7px 43px;
	background: url(http://nylira.com/p/google/s.png) no-repeat;
	-moz-border-radius: 5px;
	font-weight: bold;
	line-height: 24px;
	color: rgb(183,23,0);
}
.lst:focus, .lst:hover {
	color: rgb(114,74,12);
	background-position: 0 -36px;
}

/* the search button */
.lsb {display: none}

/*TOP TABLE */
#sft {margin: 36px 40px 0px !important; }
/* the logo */
#sft td:first-of-type {vertical-align: top;}

h1 #logo {
	display: block;
	width: 240px;
	height: 36px !important;
	font: 18px/36px "Arial Black";
	color: rgb(183,23,0) !important;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 !important;
}
h1 #logo:after {
	content: " Plex";
	font-family: Arial;
}
h1 #logo:hover:after {
	content: " 1.0";
	font-family: Arial;
}

h1 a img { display: none; }

#sft #sff { 
	padding: 0 !important;
}
#sft #sff .ts { margin: 0 !important; position: relative;}

#sft #sff .ts td {
	vertical-align: top;
}

/* advanced search */
#sft #sff .ts td[style="padding: 0pt 6px;"] {
	padding: 0 !important;
	margin-left: 5px;
	height: 36px;
	width: 36px;
	text-indent: -9999px;
	float: left;
	vertical-align: bottom;

}

#sft #sff .ts td[style="padding: 0pt 6px;"] a {
	display: block;
	height: 34px;
	width: 34px;
	background: url(http://nylira.com/p/google/a.png) center top no-repeat;
	border: 1px solid rgb(237,222,199);
	-moz-border-radius: 5px;
	padding: 0 !important;
	margin: 0 !important;
}
#sflas:hover {background-position: center -36px;}

/* Advanced Search has this class */
.xsm {}

/* popup hints */
.gac_m {
	background: none;
	border: 2px solid rgba(33,31,11,.1);
	background: rgb(255,255,240);
}
.gac_c {
	color: rgb(114,74,12);
	margin-left: 43px;
}
.gac_c b {font-weight: bold;}
.gac_d {background: transparent;}

/*----------------------------------------------------------------------
	#ssb = sub-search bar
----------------------------------------------------------------------*/
#ssb {
	clear: both;
	height: 36px;
	line-height: 36px;
	margin: 0 0 36px;
	padding: 0 40px;
}
#ssb div {
	float:left;
	padding:0;
}
#ssb p {
	text-align:right;
	margin: 0;
	padding: 0;
}
#ssb a { outline:none }

/*Show Options...*/
#eprs, #tbpi {margin-left: 0;}
.tbi div, #tbp {
	background: url(http://nylira.com/p/google/nav_logo7.png) -91px -74px no-repeat;
	overflow:hidden;
	width:13px;
	height:13px;
	position: relative;
	top: 12px;
	left: 7px;
}

/* when you click something should happen */
.tbpo, .tbpc {margin-left: 10px;} /* margin between button and 'Show Options...' */
.tbpc, .tbo .tbpo { display:inline }
.tbo .tbpc, .tbpo { display:none }
.tbo #tbp {background-position: -105px -74px;}

/* the options menu */
#tbd {display: none}
.tbo #tbd {
	display: block;
	margin: 0 !important;
	padding-left: 40px;
	width: 240px;
	background: rgb(255,255,240);
	z-index: 4;
}
#tbd .tbt {
	font-size: 12px;
	line-height: 18px;
}

/* Web */
#prs {
	margin: 0 !important;
	padding: 0 !important;
}
#prs b {
	display: block !important;
	margin-left: 0px !important;
	float: left;
	font-weight: bold;
}

/* result stats */
#resultStats {
	width: 633px; /* 3px to let it line up */
	float: right;
	text-align: left !important;
}

/*----------------------------------------------------------------------
	sponsored links
----------------------------------------------------------------------*/

/* sponsored links (top) */
#tads {
	float: right;
	width: 612px !important;
	padding: 9px;
	background: rgba(255,255,0,.1) !important;
	margin: 0 40px 18px 0 !important;
}

/* side sponsors */
#mbEnd {
	clear: left;
	float: left !important;
	margin: 0 0 0 40px !important;
	background: transparent;
	border: none;
	width: 200px;
}
#rhsline {
	border: none !important;
	padding: 0 !important;
}

/* sponsored links */
#tads h2, #rhsline h2 {
	padding: 0 !important;
	font: 10px/18px Arial;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgb(217,191,107);
	margin: 0 0 18px !important;
}

/* remove the weird spacing from the sidebar */
#rhsline > br, #rhsline > p { display: none; }

#mbEnd li {margin: 0 0 36px !important;}

/* sidebar titles */
#mbEnd h3 a {font-weight: normal !important}

/* bar content */
.nobr li {
	line-height: 1.5;
	width: 200px;
	white-space: nowrap;
	margin: 0 !important;
}

/* the url */
#mbEnd cite {display:block;}

/* clothing tables */
#mbEnd table.ts[width="245"] {
	width: 200px !important;
	margin: 0 0 36px;
}
#mbEnd table.ts[width="245"] td[style="padding-bottom: 12px; white-space: normal;"] {padding: 0 !important}
#mbEnd table.ts[width="245"] td[style="padding: 4px 6px 0pt 0pt;"] {padding: 0 6px 0 0 !important}
#mbEnd table.ts[width="245"] td[style="padding-top: 2px;"] {
	padding: 0 !important;
	vertical-align: top !important;
	line-height: 18px;
}

/*----------------------------------------------------------------------
	the search results
----------------------------------------------------------------------*/

/* results div */
#res {
	margin: 0 40px 0 0 !important;
	padding: 0 !important;
	width: 630px;
	float: right;
	/* hack to override the extstyle.css 
	position: relative;
	right: 31px;*/
}
.tbo #res {margin: 0 !important;}

/* hide the title Search Results */
#res #search h2 {display: none;}

/* each search result (list item) */
.g {
	padding: 15px 18px 18px;
	margin: 0 !important;
	position: relative;
	border-bottom: 1px solid rgb(237,222,199);
}
.g:first-of-type {border-top: 1px solid rgb(237,222,199)}
.g:nth-of-type(2n-1) {background: rgb(244,238,222);}

.g .g:first-of-type {margin-top: 6px;}

/* result title */
h3.r { display: inline-block !important}
h3.r a, h2.r {
	display: inline-block;
	font: 16px/24px Arial;
}

/*
h3.r a:active {
	position: relative;
	top: 2px;
}*/

.s {
	max-width: none !important;
}

/* visits, date */
.m {}

/* forums */
.f {}

/* hide buttons after the title */
span[style="display: inline-block;"] {display: none !important;}

/* list of links in a site */
.slk div a {line-height: 1.5 !important}

/* general table structure */
.g .ts, #iur {margin: 0 !important;}
.ts div {line-height: 1.5;}

/* all images not play buttons */
.g img:not([width="20"]), #mbEnd table.ts[width="245"] img {
	padding: 3px;
	background: rgb(255,255,240);
	-moz-box-shadow: rgba(0,0,0,.3) 0 0 3px;
}

/* image results */
#iur div {height: 100px;}
#iur a {
	display: block;
	float: left;
	padding: 0 !important;
	overflow: hidden;
	margin: 0 3px 0 0;
}
#iur a img {padding: 3px !important;}
#iur a:hover img {-moz-box-shadow: rgba(0,0,0,.7) 1px 1px 5px;}

/* local businesses */
table[style="margin-top: 6px; line-height: 100%;"] {margin: 6px 0 0 !important;}
h4.r {
	font-weight: normal;
	font-size: 12px;
}
/* News */
.ts .l { line-height: 1.5; }
.s {line-height: 1.5;} /* short news summary */
.gl {line-height: 1.5;} /* related articles */

/* video results */
#res .ts td[width="290"] { width: 297px; } /* increase width of video results */
#res table td {vertical-align: top;}
font { line-height: 1.5; }
#vudu {line-height: 1.5;}

/* Motels */
.bl { line-height: 1.5;}
cite { line-height: 1.5;}

/* intersite links */
td[style="padding-left: 3em;"] {padding: 10px 0 0 24px!important;}
td[style="padding-left: 3em;"] div {
	padding: 0 0 10px 0 !important;
	line-height: 18px;
}
td[style="padding-bottom: 0.25em; padding-left: 3em; padding-top: 0.75em;"] {padding: 0 0 0 24px !important;}

/* shopping results */
table.ts[style="margin-top: 7px;"] {margin-top: 10px !important;}
div[style="overflow: hidden; line-height: 1.16em; max-height: 3.54em; padding-top: 3px;"] {
	line-height: 18px !important;
	max-height: none !important;
	overflow: auto !important;
}

/* stocks */
div[style="padding: 3px 0pt;"] {
	padding: 0 !important;
	margin: 0 0 6px;
}
img[style="float: left; padding-right: 15px; margin-top: 10px;"] {margin-top: 0 !important;}
table.ti td {line-height: 18px;}

/* showtimes */
.e table td[colspan="2"] {
	font-size: 16px;
	line-height: 24px;
}
.e table td[colspan="2"] .std {
	font-size: 12px; /* shrink change location */
	line-height: 18px;
}
.e table td div[style="padding-top: 4px;"] {
	line-height: 18px;
	margin: 0 0 6px;
}

/* youtube */
td[style="padding-top: 5px;"] {padding-top: 0px !important;}
td[style="padding-top: 5px;"] div {margin-top: -14px !important;}
td[style="padding-top: 5px;"] div font table.ti {display: inline;}
table.ti p[style="margin: 0pt; padding: 0pt; overflow: hidden; height: 9px; width: 10px; position: relative;"] {
	width: 10px !important;
	height: 13px !important;
}

/* .ti = inline tables? */
table.ti {display: inline;}

/* the buttons */
.wci, .w4, .w5 {
	border: none;
	height: 14px;
	width: 14px;
	position: relative;
	top: -3px;
	margin-right: 3px;
}
.wci {
	width: 16px;
	background: url(http://nylira.com/p/google/nav_logo7.png) -119px -87px;
}
.wci:hover {background-position: -119px -72px;}
.w4 {background: url(http://nylira.com/p/google/nav_logo7.png) -104px -42px}
.w4:hover {background-position: -119px -42px;}
.w5 {background: url(http://nylira.com/p/google/nav_logo7.png) -104px -57px}
.w5:hover {background-position: -119px -57px;}

/*----------------------------------------------------------------------
	top/bot stuff
----------------------------------------------------------------------*/

span.spell, ol li:not(:first-of-type):not([class="g"]) p {
	color: rgb(114,74,12) !important;
	font-size: 16px;
	margin: 18px 0 0 0 !important;
}
a.spell {font-size: 16px;}
a.spell i {font-style: normal;}

#topstuff, #botstuff {
	display: block;
	margin: 0 0 18px;
	background: transparent !important;
}
#topstuff {display: inline;}

/* no results */
#topstuff div.med[style="margin-top: 2em;"] {
	margin: 0 0 72px !important;
	font-size: 16px;
	line-height: 24px;
}
#topstuff div.med[style="margin-top: 2em;"] ul li {
	list-style: circle;
	margin-left: 1.5em;
}

/* google promotion */
#topstuff #pp {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}
#pp h2 {color: rgba(33,31,11,.5) !important;}

/* See results for: */
ol li:not(:first-of-type) .med {
	font-size: 16px;
	line-height: 24px;
}

/* related searches */
#trev {
	margin: 0 0 18px !important;
	font-size: 16px;
}

/* results for ... */
ol li:not(:first-of-type):not([class="g"]) p {
	background: transparent;
	border: none;
	padding: 0;
}
/* disable hrs */
ol li hr {display: none;}

/* in order to show you the most relevant results... */
#ofr {
	margin: 18px 0;
}

/*----------------------------------------------------------------------
	.e = "Searches related to: economy"
----------------------------------------------------------------------*/

/* table for search results */
.e {margin: 18px 0}

/* Searches related to; inherits from result titles*/
.e #brs caption {
	font-size: 16px;
	padding: 0 !important;
	margin: 0 0 6px;
}

.e #brs tr td {
	padding: 0 !important;
	margin: 0;
	display: inline;
}

/* comma delineated links */
.e #brs tr td:not(:last-of-type) a:after {content: ",\0020"
}
/* ampersand for the second to last TD of the last TR */
.e #brs tr:last-of-type td:nth-last-child(2) a:after {
	font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
	font-size:110%;
	font-style:italic;
	content: "\0020\0026\0020 ";
}

/* adding a period */
.e #brs tr:last-of-type td:last-of-type a:after {content: "."}

/*----------------------------------------------------------------------
	#nav = gooooooooooooooooogle
----------------------------------------------------------------------*/

#nav {
	width: 630px;
	margin: 36px 40px 0 280px !important;
	background: rgb(244,238,222);
	border-top: 1px solid rgb(237,222,199);
	padding: 0 0 0 auto;
}
#nav td {float: left;}
#nav td a {display: block;}

/* number styling */
#nav .cur, #nav td a {
	display:block;
	width: 22px;
	height: 73px;
	border-left: 1px solid rgb(237,222,199);
	margin-top: -1px;
	/* text */
	font: bold 10px/24px Arial;
	color: rgba(183,23,0);
}

/* next/prev styling */
#nav .b a {
	color: rgb(183,23,0) !important;
	width:84px;
	text-transform: uppercase;
}
/* prev styling */
#nav .b a div {
	color: rgb(183,23,0) !important;
	margin: 0 !important;
	text-decoration: none !important;
}
#nav .b:first-of-type a div:before {content: "\00AB\0020";}
#nav .b:last-of-type a:after {content: "\0020\00BB";}

/* visited */
#nav a:visited {color: rgb(183,23,0) !important}

/* hover states */
#nav a:hover, #nav .cur {
	color: rgb(47,36,16) !important;
	background: rgb(255,255,240);
	border-color: transparent;
}

/* the OOOOs in google */
.csb, .ss {display: none !important;}

/*----------------------------------------------------------------------
	personalization lines
----------------------------------------------------------------------*/

/* Personalized based on your web history */
#xjs .std, #wml {display: none !important;}
div[style="display: table; margin-bottom: 1em; text-align: center; width: 100%;"] {
	display: none !important;
}

/*
#xjs .std, #wml {
	display: none !important;
	font-size: 10px;
	line-height: 18px;
	text-align: left !important;
	margin: 0 0 0 280px !important;
	width: 630px !important;
	clear: both;
}

#xjs .std, #wml {
	display: none !important;
	font-size: 10px;
	line-height: 18px;
	text-align: left !important;
	margin: 0 0 0 280px !important;
	width: 630px !important;
	clear: both;
}

Add a result 
#wml {
	margin-bottom: 36px !important;
}

add a result button
.wpb {
	width: 12px;
	height: 12px;
	background: url(http://nylira.com/p/google/nav_logo7.png) -63px -65px no-repeat;
	border: none;
	margin-right: 5px;
	position: relative;
	top: -3px;
}

add a result onclick
#wng {
	margin: 0 0 0 280px !important;
	width: 590px;
}
*/

/*----------------------------------------------------------------------
	#bsf = footer
----------------------------------------------------------------------*/

/* the "clear" div */
div[style="text-align: center; margin-top: 1.4em;"] {margin: 0 0 36px !important;}

#bsf {
	padding: 2px 0 !important;
	margin: 0 0 36px 280px;
	width: 630px;
	border: 1px dotted rgb(114,74,12);
	border-left: none;
	border-right: none;
}

/* search bar */
#bsf div {
	padding: 36px 0 0 !important;
	margin: 0 !important;
	height: 36px;
	border-top: 2px solid rgb(114,74,12);
}

/* bottom search bar */
#bsf div .lst {width: 578px; }

/* second to last paragraph */
#bsf p {
	margin: 0 !important;
	padding: 0 0 36px;
	border-bottom: 2px solid rgb(114,74,12);
	/* text */
	line-height: 36px;
	text-align: left;
	color: transparent;
}

/* that last line of text*/
#flp {
	margin: 0 40px 0 280px;
	/* text */
	color: transparent;
	font: 10px/36px Arial;
	text-align: center;
}
#flp a {padding: 0 10px}