Eliminar borde del buscador de Google  

 
Jose Angel
 Jose Angel
Usuario experto

Buenas tardes,

Me han comentado que habla un nuevo hilo para hablar de esto, así que no tengo inconveniente.

He creado el buscador de google para poder usarlo como vosotros, para realizar búsquedas en mi web y que además favorezca al SEO. Ya sabemos lo que le mola al señor G... El tema es que quiero eliminarle el borde blanco que tiene al rededor.

Me ha comentado un compañero que no aprecia dicho borde porque el fondo de mi web tb es blanco. Pero no. Es tan simple con que comprobeis que son dos colores distintos totalmente. Adjunto captura con la configuración óptima de mi monitor, ya que me hago diseño y suelo tenerlo siempre bien configurado para que no haya confusiones como esta.

El blanco del borde del buscador es #ffffff y el de la web es f6f6f6. De ahí que quiera eliminarlo, además de porque es muy ancho. Me gustaría que ocupase solamente el borde del buscador. Adjunto captura2 para que veais lo que necesito. Supongo que habrá que tocar el código del buscador.


Un cordial saludo y gracias por vuestra ayuda.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 28/06/2013 12:30 pm
Hicham
 Hicham
Miembro Admin

Hola Jose,

El problema que el buscado está cogiendo los estilos desde un fichero que está en la web de google y no está en su Joomla:

http://www.google.com/cse/style/look/minimalist.css

En el apartado

.cse .gsc-control-cse, .gsc-control-cse {
font-family: Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #ffffff;
}

Indícanos como se llama el módulo que estás usando.

Saludos

Si te ha servido de ayuda, déjanos tu testimonio con un link hacia tu Web y mejora su posicionamiento:
Enviar testimonio
¡Gracias!.

ResponderCitar
Respondido : 28/06/2013 12:53 pm

Cursos Gratuitos WordPress

Jose Angel
 Jose Angel
Usuario experto

Pues estoy usando el que habeis recomendado en alguna ocasión para insertar código:
Easy Custom Code

Gracias.

ResponderCitar
Respondido : 28/06/2013 1:35 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Prueba a editar alguno de los archivos css que se cargan con tu plantilla y añade el siguiente código al final para ver si se soluciona el problema:

.cse .gsc-control-cse, .gsc-control-cse {
background: none !important;
}

Parece que tienes configurada tu plantilla para comprimir los estilos CSS por lo que será conveniente que desactives esta opción para poder ver los cambios.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 28/06/2013 2:06 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Jose Angel
 Jose Angel
Usuario experto

He hecho lo que me has indicado y no percibo cambio alguno. Lo he hecho al final del template.css

Gracias.

ResponderCitar
Respondido : 29/06/2013 9:26 am
Jose Angel
 Jose Angel
Usuario experto

Rectifico. Debió de ser tema de caché. Parece que se ha borrado el borde blanco, pero ha dejado una linea blanca (trazo). Eso tb habría que eliminarlo para que dicho módulo solo ocupase el tamaño del campo del buscador tal y como os mostré en la foto. ¿Que me falta por hacer?

EDITO: He estado tocándo un poco y lo he mejorado borrando el borde blanco. Le he puesto tb lo del padding e incluso el alto, pero no me lo respeta. Os pongo lo que he puesto:

}
.cse .gsc-control-cse, .gsc-control-cse {
background: none !important;
border: 0 !important;
height: 5 !important;
padding: 0; !important;

}

Gracias!

ResponderCitar
Respondido : 01/07/2013 10:33 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

La línea height: 5 !important; no es correcta, tendría que ser height: 5px !important;

Es decir, cuando a un parámetro de width, height, padding, margin, etc. le asignas un valor tienes que indicar en qué unidades son, por ejemplo, píxels (px).

La única excepción es con el 0, que no es necesario indicarlo, aunque si se ponen tampoco pasa nada.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 01/07/2013 1:30 pm
Jose Angel
 Jose Angel
Usuario experto

Si, eso es de lo poco que se de CSS, pero se me olvidó ponerlo. Gracias.

Le quito el borde y el background pero si le meto lo demás, me baja el campo hasta mezclarlo con el otro módulo de los packs... ¿Alguna sugerencia? Al meterle el important! estoy pasando de los límites que tiene la plantilla por defecto. No entiendo por qué no puedo dejarlo como quiero... :unsure:

ResponderCitar
Respondido : 01/07/2013 1:58 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Yo ahora veo el buscador de Google de forma correcta. ¿Qué es lo que quieres cambiar exactamente?

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 01/07/2013 2:24 pm
Jose Angel
 Jose Angel
Usuario experto

Pues acortar el espacio que queda entre el campo del buscador y el "hueco" de dicho módulo. Vamos, tocarle el padding. Y que se quede dicho espacio lo más pequeño posible. Fíjate en la screen que hice en photoshop para ilustrar lo que quiero exactamente.

Gracias por tu interés en ayudarme.

ResponderCitar
Respondido : 01/07/2013 2:37 pm

Cursos Gratuitos WordPress

Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Para reducir el espacio tendrías que poner lo siguiente:

.cse .gsc-control-cse, .gsc-control-cse {
padding: 0 !important;
}

.cse .gsc-control-cse, .gsc-control-cse form.gsc-search-box {
padding: 0 !important;
margin: 0 !important;
}

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 01/07/2013 3:18 pm
Jose Angel
 Jose Angel
Usuario experto

Gracias. Ahora ha quedado perfecto. Tengo todavía mucho que aprender de CSS. 🙁

Un cordial saludo y gracias de nuevo por ayudarme a que mi web quede mucho más estética y personalizada.

ResponderCitar
Respondido : 02/07/2013 12:35 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Por favor Iniciar Sesión o Registro