Avisos
Vaciar todo

[Resuelto] personalizar el boton de anteior y siguiente en un formulario wpforms  

 
Vicente
 Vicente
Estimable Member

a ver si me podéis ayudar a personalizar estos botones, en su tipografía, color de la tipografía, el color del fondo.

he encontrado en vuestras consultas como hacerlo en estos formularios para el botón de enviar pero para estos que son el salto de pagina.

Contenido solo visible a usuarios registrados

Respondido : 24/08/2023 7:29 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Vicente, 

En este caso puedes enviarnos la URL donde se muestran los botones que quieres cambiar, de esta forma podemos revisarlo con mayor detalle. 

Un Saludo

Respondido : 24/08/2023 7:41 pm

Vicente
 Vicente
Estimable Member

gracias, aquí la tienes

https://gestyfor.es/programa-de-formacion-especifica-para-fundaciones-asociaciones-y-ongs/

 

image
image

 

 

Respondido : 24/08/2023 8:04 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Vicente,

El editar estos botones requiere código CSS, por ejemplo este código colocará el botón de siguiente en azul y letra blanca:

button.wpforms-page-button.wpforms-page-next {
background-color: blue !important;
color: white !important;
}

Y el botón de anterior:

button.wpforms-page-button.wpforms-page-prev {
background-color: blue !important;
color: white !important;
}

Ten en cuenta que comparten id, por lo tanto, tanto el de arriba como el de abajo tomaran este color y estilo. Estos códigos puedes agregarlos en Apariencia > personalizar > css adicional

Un saludo 🖐️ 

Respondido : 24/08/2023 8:37 pm

Vicente
 Vicente
Estimable Member

gracias Argenis

¿como podria poner modificar la tipografia?

me puedes pasar el codigo para el boton de enviar pq he visto uno que tu compañero vicente le responde a una pregunta pero no funciona y es pq no es para formulario de los wpforms sino directamente en worpress.

Respondido : 24/08/2023 9:23 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Vicente,

No sabemos de que consulta te estás guiando, con respecto al botón de enviar:

button#wpforms-submit-267993 {
background-color: blue !important;
color: white !important;
}

Con respecto a las tipografias puedes agregarle esto:

font-family: monospace !important;

entre lineas, quedaria por ejemplo asi:

button#wpforms-submit-267993 {
background-color: blue !important;
color: white !important;
font-family: monospace !important;
}

Ten en cuenta que este ejemplo es con el último código que te envíe, pero puedes aplicarlo igual a los demás debe ir antes del cierre (}), tenemos cursos de este tema que te pueden ayudar:

https://www.webempresa.com/university/curso-css-wordpress/

Un saludo 🖐️ 

Respondido : 24/08/2023 10:15 pm

Vicente
 Vicente
Estimable Member

@argenis

Gracias, pongo en marcha las indicaciones que me das y hago el curso que seguro me es de gran utilidad.

saludos

Respondido : 25/08/2023 10:47 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Vicente,

Gracias a ti, es un placer siempre poder ayudarte.

Quedamos atentos cómo ha ido todo.

Un saludo 

Respondido : 25/08/2023 12:11 pm

Vicente
 Vicente
Estimable Member

Hola, 

he realizado el curso y si, me ha servido para tener una cantas cosas al menos claras pero no he debido entender algo.

me pusiste para añadir el tipo de letra, incluyo font-family: monospace !important; y eso perfecto.

button.wpforms-pabutton.wpforms-page-button.wpforms-page-next {
background-color: blue !important;
color: white !important;
font-size: 15px;
!important;
font-family: monospace
!important;
}nt;
font-family: monospace
!important;
}

 

Ahora quiero añadir el tamaño, y entendía que seria así font-size: 15px; !important;

button.wpforms-page-button.wpforms-page-next {
background-color: blue !important;
color: white !important;
font-size: 15px;
!important;
font-family: monospace
!important;
}

pero me error: Hay un error 1 que tienes que corregir antes de que puedas guardar.

 

Si lo pongo así: 

button.wpforms-page-button.wpforms-page-next {
background-color: blue !important;
color: white !important;
font-size: 15px;
font-family: monospace
!important;
}

y no funciona, ¿como tengo q poner para modificar el tamaño de la tipografía?

gracias.

Respondido : 26/08/2023 4:33 pm
Vicente
 Vicente
Estimable Member

Ya he localizado donde tenia el error, sobra ; después del px

Gracias

Respondido : 26/08/2023 4:46 pm

Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Vicente,

Nos alegra saber que has podido resolver el error que tenias, daremos por resuelta la consulta pero cualquier otra que tengas estaremos atentos

Saludos!

Respondido : 26/08/2023 5:53 pm