Como mover el logo de Recaptcha

Como mover el logo de Recaptcha

En ciertas ocasiones, podemos encontrarnos con que el distintivo de Recaptcha de Google interfiere visualmente con otros logos o elementos de nuestra página web. Esta superposición no deseada puede afectar la estética y usabilidad de nuestro sitio.

Para solucionar este inconveniente, tenemos a nuestra disposición una solución simple y elegante mediante CSS, que nos permite reposicionar el logo de Recaptcha a nuestra conveniencia, por ejemplo, a la esquina inferior izquierda de la pantalla. A través de unas pocas líneas de código en nuestro archivo CSS, este ajuste es rápido y efectivo.

Para aquellos que utilizan WordPress, es crucial recordar que las modificaciones de CSS deben aplicarse al archivo style.css de nuestro tema hijo (Child Theme). Esta práctica asegura que nuestros cambios permanezcan intactos incluso después de actualizar el tema principal, evitando así la pérdida de personalizaciones. En caso de realizar cambios directamente en el tema original, una actualización podría sobrescribir nuestros ajustes, obligándonos a rehacer el trabajo.

También modificamos el estilo del distintivo de Google reCAPTCHA cuando el usuario pasa el cursor sobre él (acción conocida como «hover»)  aumentando el ancho del distintivo de reCAPTCHA a 256 píxeles.

A continuación, te muestro cómo posicionar el logo de Recaptcha en la parte inferior izquierda de tu sitio web, con un margen de 10px para asegurar que no interfiera con otros elementos importantes de tu página:


/* Mover Recaptcha a la izquierda */
.grecaptcha-badge {
	width: 70px !important;
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	left: 10px !important;
	bottom: 10px !important;
}

.grecaptcha-badge:hover {
	width: 256px !important;
}
Utilidades CSS online

Utilidades CSS online

En ocasiones quieres personalizar partes de la página web y con CSS puedes hacerlo. La mayoría de constructores tiene un sitio donde puedes hacerlo. Pero CSS a veces es un poco lio. Aquí te presentamos algunas utilidades online que te ayudarán si tienes que retocar el CSS y no sabes muy bien como.

Ilustración: Online illustrations by Storyset

 

Aquí tienes una lista de 6 herramientas online para generar o retocar CSS:

1. CSSmatic (https://www.cssmatic.com/)
– No requiere registro.
– Características: Generador de gradientes, sombras, bordes redondeados y efectos de texto. También ofrece una herramienta de recorte de imágenes y un generador de patrones.

2. CSS3 Generator (https://css3generator.com/)
– No requiere registro.
– Características: Genera código CSS para propiedades como bordes redondeados, sombras, gradientes, transformaciones y transiciones.

3. CSS Grid Generator (https://cssgrid-generator.netlify.app/)
– No requiere registro.
– Características: Permite generar diseños de rejilla utilizando la especificación CSS Grid. Proporciona opciones para configurar el número de columnas, el tamaño de las filas y columnas, y las brechas entre ellas.

4. ColorZilla (https://www.colorzilla.com/)
– No requiere registro, pero ofrece una versión Pro con características adicionales.
– Características: Incluye una herramienta de selección de colores con cuentagotas, generador de gradientes, analizador de colores de página, y generador de paletas de colores.

5. CSS Beautifier (https://www.freeformatter.com/css-beautifier.html)
– No requiere registro.
– Características: Formatea y reorganiza el código CSS para mejor legibilidad. Puede ser útil para dar formato a código CSS existente y hacerlo más estructurado.

6. CSS Minifier (https://cssminifier.com/)
– No requiere registro.
– Características: Minifica el código CSS, eliminando espacios en blanco y reduciendo el tamaño del archivo. Puede ser útil para optimizar la carga de páginas web al reducir el tamaño de los archivos CSS.

Estas herramientas online te permitirán generar y retocar CSS de manera fácil y rápida sin tener que instalar ningún software adicional.

Más utilidades CSS

 

Border Radius

Si queremos hacer que nuestra caja tenga los bordes redondeados, esta es tu página. Sólo tienes que indicar los pixeles que debe tener el redondeado. aplicar y copiar el código