Problema con formulario en Wordpress
Buenas.
Tengo un problema con un formulario en wordpress.
Por un lado con el boton de "publicar" en cada post. Quiero darle una apariencia un poco más apañada, pero cuando le meto el css no hace exactamente lo que quiero. El problema es que deja los bordes como si se tratase de un boton por defecto y no quiero eso. Quiero que cambie de una imagen a otra cuando pase el ratón por encima.
Este es el código de php (en comments.php):
input name="submit" type="submit" id="submit" value="Publicar" class="btn"
La clase que le he dado es btn, y ahora os la muestro en el css:
.btn{display: block; padding: 4px; width:100px; text-align: center; background: url(images/menu.gif) no-repeat;}
.btn a:hover {;background: url(images/menu2.gif) no-repeat}
En realidad es similar a un botón de Login que hay al lado pero no se comporta igual. Lo que más me molesta, aparte de que no varía de imagen, es el borde de botón cutre que aparece.
¿Alguien me puede echar una mano?
Para ver el ejemplo de como queda el botón os pongo un enlace:http://www.danielabril.com/blog/?p=8
Después del post está el formulario.
Muchas gracias de antemano
marcos_mpc
Tomo nota :)
daniabril
Gracias por todo Marcos MPC, ya te digo para cualquier duda de diseño, ilustración, impresión, dibujo y varias cosas más que te surja aquí me tienes.
marcos_mpc
Ahora creo que lo he pillado. Si quieres que cada texto tenga un color tendrás que crear una clase para cada uno igual que hiciste para el botón en el panel de control del plugin y luego crear el CSS correspondiente para cada clase. El color del texto del botón de enviar deberías poder controlarlo desde la misma declaracón de CSS en que metes la imagen de fondo, si lo que quieres es que tenga un color distinto al resto de botones de la página con clase btn añádele otra clase además de la btn, btnform o lo que se te ocurra, y manipula el color del texto desde esa clase. Tú tranquilo que esto como se acaba controlando es así, por el clásico ensayo y error.
daniabril
Te cuento. En vez de crear una clase o etiqueta nueva en stylesheet.css como decías. Lo que he hecho es irme al panel de administración de wordpress>herramientas>contact-form. Aquí se presenta la forma del html del formulario creado. Pues es aquí donde he asignado la clase brn que tenía ya creada para otros botones del blog como "editar comentario". He pensado que si era html lo que me enseñaba funcionaría. y EFECTIVAMENTE. Para que no se aplicara a los campos de nombre, email y asunto he creado una etiqueta div en style.css llamada "form" y la he aplicado a estos campos.
No quería asignar un "color:#lo que sea" a .wpcf7 p porque quiero diferentes colores para cada cosa. Pero gracias por el consejo.
Quizá no sea la manera correcta, pero me enorgullece salir del paso sin ser programador.
De todas maneras me queda mucho por aprender, pero si no te tiras a la piscina no parendes a nadar.
Si ves una manera mejor de resolverlo no dudes en decirmelo.
marcos_mpc
Buenas. Me he perdido un poco. Veo que has arreglado lo del botón y que ahora cambia la imagen cuando pasas por encima. Lo del texto en teoría es fácil, con asignar un "color:#lo que sea" a .wpcf7 p debería afectarte tanto al botón como a los textos. Usando el editor "en vivo" de CSS del Web Developer sobre tu página me modifica el color sin problemas.
daniabril
He hecho una etiqueta div en nombre email y asunto y parece que me hace caso. Lo único que no he conseguido es controlar el color del texto que aparece en los campos y en el botón. Pero ha sido un paso. Espero que esto le pueda ayudar a alguien. Cuando consiga que el color me haga caso lo postearé aquí. Si alguien me puede ayudar pues bienvenido.
daniabril
Vale he conseguido algo.
Si me voy a las opciones de contact form dentro del panel admin me he fijado que crea un codigo para que el formulario se vea:
<p>Tu nombre (obligatorio)<br>
[text* your-name] </p>
<p>Tu email (obligatorio)<br>
[email* your-email] </p>
<p>Asunto<br>
[text your-subject] </p>
<p>Tu mensaje<br>
[textarea your-message] </p>
<p class="btn">[submit "Enviar"]</p>
Si te fijas le he añadido la clase "btn" a submit y funciona. Pero se me queda el recuadro gris por encima. Si le pongo "background-color:none;" se me quita el recuadro de nombre y email también.
¿Como puedo hacer para quitarlo sin que afecte a los cuadors de nombre y email? Sólo me queda eso y soy feliz.
Por cierto muchas gracias por tu paciencia y atención. Si necesitas algo relacionado con diseño o ilustración no tienes más que llamar.
daniabril
Disculpa mi tardanza. El curro que no me deja currar XD.
Bueno he colocado esto:
.wpcf7-form p input {border:0px;display: block; color: #903; padding: 4px; width:85px; text-align:left; background: url(images/menu.gif) no-repeat;}
Y parece que lo lee bien(aunque la imagen del botón no la carga). El problema es que afecta a los campos de nombre y email también. He probado a quitarle "p" pero ni caso.
¿Se puede hacer que sólo afecte al botón?
Además me gustaría que cambiase al ponerse encima (como en lo demás). ¿Con añadir :hover sobra? Supongo que no puesto que lo he probado XD.
marcos_mpc
Veo que te falta una c en lo que me copias, es wpcf7 y no wpf7. Prueba eso, la mayor parte de las veces son chorradas de este estilo las que le hacen a uno volverse loco. Con que metas la declaración en el stylesheet.css del plugin es suficiente.
daniabril
El tema de los campos dinámicos lo tengo claro
He incluido esto en cada uno de los css (style.css, stylesheet.css, stylesheet-rtl.css):
.wpf7-form p input {border:0px;display: block; color: #903; padding: 4px; width:85px; height:25px; text-align: center; background: url(images/menu.gif) no-repeat;}
para probar a ver si funcionaba pero no me hace ni caso (es el mismo código que para los otros botones). Además he modificado .wpf7-form p input poniendo guiones, sin ponerlos, etc.. a ver si el fallo era de sintaxis pero poco he conseguido.
Tan cerca y tan lejos.
Si puedes darle un último empujón a un viejo novato...
marcos_mpc
El código que pones parece la función para generar el HTML del formulario pero lo que quieres hacer es más fácil que andar manipulando eso. Cotilleando un poco he visto que el plugin tiene su propio archivo CSS (stylesheet.css) que imagino que estará en la carpeta en que tengas guardado el plugin. Por ahí tienes una declaración que empieza por div.wpcf7-validation-errors y que afecta a la caja que aparece dinámicamente al dar a enviar con algún campo obligatorio sin rellenar. Imagino que habrá otra para los que aparecen encima de los campos sin rellenar y que desaparecen al ponerse encima (yo apuesto por span.wpcf7-not-valid-tip). El botón de enviar lo puedes modificar desde tu propio CSS con .wpf7-form p input.
daniabril
Parece ser que no tiene asignado ningún css. Con web developer lo selecciono y me aparece la etiqueta *. Así que supongo que no tiene un estilo asignado. Dentro del plugin de contact form hay algunos estilos para las ventanas que aparecen cuando falta un cuadro por rellenar.
Ahora bien; ¿Cómo le doy un estilo al entramado de php de wp-contact-form-7.php?
Veo que hay una parte que dice así:
function default_form_template() {
$template .= '<p>' . __('Your Name', 'wpcf7') . ' ' . __('(required)', 'wpcf7') . '<br>' . "\n";
$template .= ' [text* your-name] </p>' . "\n\n";
$template .= '<p>' . __('Your Email', 'wpcf7') . ' ' . __('(required)', 'wpcf7') . '<br>' . "\n";
$template .= ' [email* your-email] </p>' . "\n\n";
$template .= '<p>' . __('Subject', 'wpcf7') . '<br>' . "\n";
$template .= ' [text your-subject] </p>' . "\n\n";
$template .= '<p>' . __('Your Message', 'wpcf7') . '<br>' . "\n";
$template .= ' [textarea your-message] </p>' . "\n\n";
$template .= '<p>[submit "' . __('Send', 'wpcf7') . '"]</p>';
return $template;
}
¿Iría bien encaminado?Aunque he probado algunas cosillas pero no me ha funcionado nada.
Quizá intente algo que esté más allá de mis posibilidades. Soy un negado del php. Quizá no hay que tocar nada de aquí.
daniabril
Gracias lo pruebo y te cuento. Eres un crack.
marcos_mpc
¿Te refieres al botón de enviar o al mensaje que te sale si no completas todos los campos obligatorios (ese de "error de validación...")? Yo tengo instalado ese plugin en mi web y no me aparece un botón de "enviar de nuevo" pero lo mismo lo tenemos configurado distinto.
En cualquier caso, si el campo (sea el botón o el texto que te decía) lo añade dinámicamente después de cargar la página, para saber si tiene alguna clase o id asignada para poder "apuntarle" desde CSS te recomiendo que te instales (si no lo tienes ya) el Web Developer para Firefox, que te muestra ese tipo de cosas para cada elemento de la página incluso si ha sido añadido a posteriori. Una vez que sepas la id del div o la clase particular del botón ya es cuestión de hacerle su propia declaración en tu CSS.
daniabril
Vaya muchas gracias de verdad Marcos MPC.
Ahora tengo otro problemilla (como no con formulario). He instalado el plug in contact form7 para hacer formularios, y me gustaría poder cambiar el botón de enviar de nuevo. Aunque parece que es más complejo.
Lo he intentado de varias maneras pero me pierdo un poco en el archivo wp-contact-form-7.php.
¿Alguien ha hecho alguna modificación de este tipo?
marcos_mpc
Buenas. En el tema del cambio de imagen probablemente el problema está en la "a". Prueba directamente con
.btn:hover {...
Respecto al borde, dale un border:0 a la clase btn y arreglado (y al .btn:hover, claro).