domingo, 18 de abril de 2010

El buscador de BikerTB


El buscador de BikerTB es una pequeña customización del gadget "Cuadro de búsqueda" que podemos encontrar entre los disponibles.
Gadget de búsqueda Google


La presentación original del gadget en nuestra página sería esta:
diseño original


El siguiente código CSS (en rojo) customiza la caja de búsqueda tal y como aparece en BikerTB.
<style id='page-skin-1' type='text/css'><!--
.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}
input.gsc-search-button {
display:none;
}
input.gsc-input {
background: url(http://lh6.ggpht.com/_5SvLLd6obBo/TIqlsPhvm8I/buscar.gif) no-repeat;
background-color:#fff;
}
input.gsc-input:focus,input.gsc-input:hover {
background: #fff;
outline: none
}
Con este resultado:
Buscador BikerTB

Y el siguiente código CSS (en rojo) hace una customización alternativa.
<style id='page-skin-1' type='text/css'><!--
.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}
input.gsc-search-button {
color: #FFF;
background: #FF55AA;
border: 1px solid #ff0084;
}
input.gsc-input {
border: 2px solid #D8FFEB !important;
}
Mostrandose así:
diseño opcional

Donde:
gsc-branding-text - Define la presentación del texto "con la tecnología de"
gsc-branding-img-noclear - Controla la imágen "Google"
input.gsc-search-button - Define el botón de búsqueda.
input.gsc-input - Define el formato de la caja de búsqueda.