Avisos
Vaciar todo

[Resuelto] Cambiar líneas tabla comparador  

 
Alba
 Alba
Reputable Member

Hola,

Nuestro comparador se abre mediante una "pop-up" y se muestra una tabla. Nos gustaría modificar las líneas de esa tabla:

Captura2

Y que quedasen con un efecto discontinuo como la tabla de la siguiente página: https://www.oracdecor.com/es_es/catalog/product_compare/index/uenc/aHR0cHM6Ly93d3cub3JhY2RlY29yLmNvbS9lc19lcy9jdXN0b21lci9zZWN0aW9uL2xvYWQvP3NlY3Rpb25zPWNvbXBhcmUtcHJvZHVjdHMsbWVzc2FnZXMmZm9yY2VfbmV3X3NlY3Rpb25fdGltZXN0YW1wPXRydWUmXz0xNjIzODgxOTUxNjQ0/

¿Cómo podríamos hacerlo?

Muchas gracias por vuestra ayuda.

Contenido solo visible a usuarios registrados

Respondido : 16/06/2021 11:27 pm
Alba
 Alba
Reputable Member

Por cierto, nos gusta mucho el comparador de esa página que mencionamos, aunque parece que no utilizan wordpress.

¿Creéis que sería posible replicar exactamente ese comparador en nuestra web con algún plugin o de alguna forma?

Apreciamos vuestra ayuda.

Respondido : 16/06/2021 11:32 pm

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

Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Alba,

Para personalizar los border de tu tabla de forma similar a la referencia te dejo el siguiente codigo CSS

.br_new_compare .br_right_table thead tr td, .br_new_compare .br_right_table thead tr th {
border-left: 2px dashed #f4f4f4 !important;
}
.br_new_compare .br_right_table td {
border-left: 2px dashed #f4f4f4 !important;
border-top: 2px dashed #f4f4f4 !important;
}

Con respecto a tu segunda consulta pues el sitio al parecer esta es bajo magento por lo que hallar un plugin que haga algo similar es una solicitud muy amplia sin embargo el método que utilizas actualmente es bastante similar solo le falta estilos, te recuerdo que por esta vía podemos es orientarte y apoyarte de manera puntual en lo que necesites pero si requieres algo mas complejo y a medida puedo recomendarte a nuestros colaboradores que con gusto podrán ayudarte a elaborar lo que deseas.

Saludos!

Respondido : 16/06/2021 11:50 pm
Alba
 Alba
Reputable Member

@bruno-vichetti Wow, queda súper bien!

Muchas gracias.

Aunque también nos gustaría que la primera fila y columna tuvieran unas líneas similares aunque resaltándolas un poco más para diferenciarlas:

Captura

¿Nos podrías facilitar otro código para esa parte?

Gracias de nuevo.

Respondido : 17/06/2021 12:16 am

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

Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Alba,

Vamos a modificar el código anteriormente compartido

.br_new_compare .br_right_table thead tr td, .br_new_compare .br_right_table thead tr th {
border-left: 2px dashed #f4f4f4 !important;
}
.br_new_compare .br_right_table td {
border-left: 2px dashed #f4f4f4 !important;
border-top: 2px dashed #f4f4f4 !important;
}
.br_top_table table th {
border-left: 2px dashed #f4f4f4 !important;
}
.br_new_compare .br_left_table tr, .br_new_compare .br_right_table tr {
border-top: 2px dashed #f4f4f4;
}

Saludos

Respondido : 17/06/2021 12:41 am
Alba
 Alba
Reputable Member

@bruno-vichetti Ahora queda perfecto.

Muchísimas gracias! 😉

Respondido : 17/06/2021 11:37 pm

Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Alba,

Un gusto poder ayudarte, cualquier otra consulta estaremos atentos.

Saludos

Respondido : 17/06/2021 11:59 pm