Avisos
Vaciar todo

Customizar campos de formulario breezingforms  

 
WebMaster
 WebMaster
Reputable Member

Hola compañeros,
reciente he implementado unos formularios con breezingforms en mi web pero estoy intentando customizar un poco algunos campos de dichos formularios y no encuentro la manera de hacerlo correctamente
Quiero cambiar el color del "hover" al passar por encima el raton donde ahora aparece de color amarillo y también me gustaria cambiar el color de los "text area" ya que me aparecen del mismo color que le puse de fondo al body de la template (verde).
Me pueden ayudar a como y donde implementarle los css? Otra question es que tengo 2 formularios y mi pregunta es que si modifico el css si va afectar a los 2 o a más (en caso que tuviera más) creo que si pero no estoy seguro. Si fuera así como lo podria hacer para personalizar uno a uno y que los css no afectaran en general a todos los formularios?
Por otra parte les adjunto también otra imagen de un formulario que contiene una imagen de fondo donde me gustaria poder poner dicha imagen de fondo en uno de mis formularios con breezingforms
Adjunto imagenes

Gracias de antemano
Saludos

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 17/11/2014 9:16 am
Jordi Sala
 Jordi Sala
Miembro Admin

Hola,

Tienes información al respecto en http://crosstec.de/en/styling-forms-in-quickmode.html

Saludos

ResponderCitar
Respondido : 17/11/2014 9:28 am

Cursos Gratuitos WordPress

WebMaster
 WebMaster
Reputable Member

Hola Jordi,
gracias por la info, pero despues de probar y probar tal y como menciona la documentación no consigo encontrar donde se aplica el color amarillo claro que se visualiza al pasar el mouse por encima de los campos del formulario, entiendo que tiene que ser un tag con hover pero no lo situo, adjunto una captura haber si me pueden dar una ayuda
Gracias de nuevo

Saludos

ResponderCitar
Respondido : 17/11/2014 10:19 am
Jordi Sala
 Jordi Sala
Miembro Admin

Hola,

En el siguiente artículo del Blog de Webempresa se explica el uso de Firebug, herramienta destinada a localizar cadenas de código, estilos, etc., desde tu navegador:

-

Firebug Lite for Google Chrome:
- https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench

Fifebug Firefox:
- https://addons.mozilla.org/es-es/firefox/addon/firebug/

Saludos

ResponderCitar
Respondido : 17/11/2014 10:22 am

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

WebMaster
 WebMaster
Reputable Member

Si Jordi,
ya utilizo el firebug, tambien utilizo el web developer tool y en la captura he utilizado la opción de inspeccionar elemento pero al ser un "hover" a veces desaparecen el pasar el mouse por encima.

Saludos

ResponderCitar
Respondido : 17/11/2014 10:44 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Parece que ese fondo amarillo se aplica de forma dinámica sobre el propio elemento, es decir, no se carga a través de una hoja de estilos CSS. Es un comportamiento un tanto extraño, ya que no he visto en otros formularios de BreezingForms.

Para quitarlo podrías probar a agregar un estilo CSS como el siguiente:

section.bfElemWrap {
background-color: none !important;
}

Esto lo podrías agregar al final del archivo templates/yoo_master2/styles/CLUBBEAGLE/css/theme.css

ResponderCitar
Respondido : 17/11/2014 11:25 am

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

WebMaster
 WebMaster
Reputable Member

Hola Pablo,
despues de probar lo que mencionas e incluso le he añadido "display: none;" pero me persiste la visualización del color amarillo claro al pasar el mouse por encima, si un tanto extraño pero no consigo dar con el clavo.
Lo único que puedo decirte Pablo por si te sirve de algo es que he estado mirando en todas las webs que llevo realizadas hasta el momento con el pack webempresa que incorpora el breezingforms y a todas se me muestra este color amarillento, lo único que en las demas no se ha dado el caso de tener que modificar el formulario.

Saludos

ResponderCitar
Respondido : 17/11/2014 11:46 am
WebMaster
 WebMaster
Reputable Member

Por fin lo encontre!! es el selector "bfRolloverBg " pero nos confundia porque es un "inline style" en mi caso le he puesto color blanco que es el que me interesa, lo dejo aquí por si alguien le trae algún dia un quebradero de cabeza.

.bfRolloverBg
{
background-color: #FFFFFF !important;
}

Saludos y gracias por todo

ResponderCitar
Respondido : 17/11/2014 12:36 pm