Cómo cambiar el color de las cajas en contact form 7 en que se ponen los datos personales  

 
Guillermo
 Guillermo
Estimable Member

Hola, buenas tardes,

He instalado y configurado correctamente el plugin contact form 7 y he generado adecuadamente un formulario de contacto. Sin embargo, quiero cambiar el color de fondo de las cajas del formulario en las que se colocan los datos personales o información solicitada.

Lo he intentado editando el style.css del plugin en Cpanel, pero no logro obtener ningún cambio.

Podéis ayudarme con esto?. Muchas gracias.

Saludos.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 12/01/2017 4:40 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Puedes probar con el siguiente código CSS

.wpcf7-form input[type="text"],
.wpcf7-form textarea{
	background-color:yellow;
  color:blue;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form textarea:focus{
	background-color:red;
  color:white;
}

Puedes cambiar los colores de acuerdo a lo que deseas, puedes agregar este código al final de algún archivo CSS por ejemplo del archivo style.css de tu theme.

Saludos.

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

ResponderCitar
Respondido : 12/01/2017 6:39 pm

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

Guillermo
 Guillermo
Estimable Member

Hola Jhon,

Gracias por tu respuesta, pero debo informarte que no ha dado resultado. Lo he probado en styles.css del plugin contact form 7, en el mismo archivo, pero de mi tema hijo (Epik), también lo he probado en el archivo css del propio plugin de woocommerce y hasta del genesis, pero en ninguno de los casos ha sido posible obtener alguna variación.

Tienes alguna sugerencia?. Muchas gracias.

Saludos.

ResponderCitar
Respondido : 12/01/2017 7:09 pm
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

En el caso del contact form 7 no es necesario aplicar los estilos sobre un fichero particular. El propio plugin tiene una opción para agregar el código que te envió Jhon en los ajustes adicionales.

Verifica si agregando el código en este apartado y coméntanos si te ha funcionado.

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 13/01/2017 4:26 am

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

Guillermo
 Guillermo
Estimable Member

Hola Jhonny,

Muchas gracias por tu respuesta, pero además, por parecer algo muy sencillo. Hubiera sido maravilloso si me hubiera funcionado, pero siento decirte que no se observan cambios al realizar lo que me sugieres.

No entiendo el por qué no funciona, ya que la verdad, si todos los cambios CSS del contact form 7 se pueden realizar de esta manera es bastante fácil.

Me puedes decir el por qué es posible que no me funcione?. Mi tema es el Epik de Genesis. Por otro lado, tengo la duda de si algún plugin puede ocasionar este tipo de incidencia, como lo es por ejemplo, el Jetpack, aunque lo he desactivado y continúa todo igual.

Quedo a la espera de vuestra respuesta. Gracias.

Saludos.

ResponderCitar
Respondido : 13/01/2017 12:59 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Actualmente tienes tu web en mantenimiento, por lo que no podemos analizar los estilos CSS que se están aplicando al formulario.

Tendrías que volver a publicar la web para que lo podamos revisar.

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

ResponderCitar
Respondido : 13/01/2017 2:53 pm

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

Guillermo
 Guillermo
Estimable Member

Perdona Pablo, ahora ya he activado de nuevo la página. Gracias.

Saludos.

ResponderCitar
Respondido : 13/01/2017 4:47 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

He probado el código en esta url en donde aparece un formulario, y si que funciona, ver imagen
Contenido solo visible a usuarios registrados

Veo que has agregado un nuevo campo de mail, puedes complementar agregando esto al código, quedaría:

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea{
	background-color:yellow;
	color:blue;
}
 
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus{
	background-color:red;
  	color:white;
}

Ubica este archivo
/wp-content/themes/epik/style.css

Y agrega el código anterior al final, refresca tu navegador o limpia la cache para ver los cambios

Saludos.

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

ResponderCitar
Respondido : 13/01/2017 6:06 pm

Cursos Gratuitos WordPress

Guillermo
 Guillermo
Estimable Member

Hola Jhon,

Ahora ya he logrado que se generen las variaciones, sin embargo, hay dos detalles: por un lado, que para poder ver efectivos los cambios, requiero refrescar el navegador y si lo hago desde una nueva ventana de incognito, en lugar de tener que refrescar, debo cerrar la pestaña o navegador como incognito y volver a abrir y escribir de nuevo la url. De esta forma sí que se observan los cambios. Es esto un poco raro, no os parece?.
Por otro lado, lo que aún no se cambia, es el color de fondo que se queda en las cajas de la información después de escribirse la misma, es decir, cuando escribo Guillermo, el fondo se queda en amarillo. Necesito cambiar ese color que se queda. Cómo puedo arreglarlo?. Muchas gracias por vuestra ayuda.

Saludos.

ResponderCitar
Respondido : 13/01/2017 7:09 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

El código que te envíe tienes colores de yellow y red que debes cambiar, actualmente ya veo que has cambiado los colores correctamente.
Contenido solo visible a usuarios registrados

Entiendo que ya solucionaste tu problema.

Con respecto al tema de la cache, siempre que estes trabajando con cambios CSS tendrás que limpiar la cache, ya que de otro modo no verás los cambios inmediatamente, puedes configurar un navegador de desarrollo y configurarlo para que elimine la cache periódicamente o usar algún tipo de complemento de navegador, si vas a seguir haciendo cambios también te recomiendo usar : Google Chrome Canary o Firefox Developer Edition como navegadores.

Saludos.

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

ResponderCitar
Respondido : 13/01/2017 8:26 pm

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

Guillermo
 Guillermo
Estimable Member

Hola Jhon,

Muchas gracias por la respuesta y valiosa ayuda. Al final creo, que lo dejaré como está, ya que continúa quedándose en color amarillo después de cumplimentarse la información solicitada. Creo que sería necesario añadir otro código en el mismo fichero styles.css del theme, pero no sé cuál sería. De todas maneras, muchas gracias.

Un saludo.

ResponderCitar
Respondido : 13/01/2017 9:46 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

He realizado una prueba de envío de datos y no veo cuadros amarillos, debe ser algo nuevamente de la cache de tu navegador, te sugiero usar un navegador como Firefox, limpia la cache de ser necesario.

Lo que creo que debes destacar es que el usuario acepte los terminos y condiciones, ya que no se nota mucho, si tienes dudas adicionales sobre esto último que te comento, abre un nuevo hilo de discusión con el título adecuado, de esta manera mantenemos orden en el foro.

Saludos.

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

ResponderCitar
Respondido : 13/01/2017 9:54 pm

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

Por favor Iniciar Sesión o Registro