Un usuario preguntó 👇
Hola Kevin, En primer lugar, gracias por un gran plugin, me gusta mucho. ¿Podría decirme cómo eliminar el margen en la parte superior y el bulto, por favor? Intenté violar CSS en el tema de mi hijo de esta manera, pero no funciona:
div.product .woocommerce-tabs .full-width-content[data-tab-style=”fullwidth”] ul.tabs {margin: 0px 0px 20px 0! importante; }
Además, ¿puedo cambiar el estilo de los encabezados de las pestañas al mismo estilo de mis menús superiores, línea rosa debajo del cursor?
Gracias.
(@yikesitskevin)
Hace 1 año, 9 meses
Hola Daria,
¿Qué márgenes estás intentando eliminar? ¿Contenido de la pestaña superior e inferior? ¿Arriba y abajo de los títulos de las pestañas? Házmelo saber.
En cuanto a los encabezados de las pestañas, ¡se verían bien! Desafortunadamente, no estoy seguro de cómo su tema contribuye a eso y no estoy lo suficientemente familiarizado con la animación CSS para hacer la mía propia. Si su tema ofrece apoyo, les preguntaría cómo definen eso. O si está familiarizado con la animación CSS, es posible que pueda ayudarlo a hacer que su botón CSS funcione. O si tengo tiempo libre hoy para aprender a hacer eso, lo tendré. Creo que quedaría bien.
Saludos, Kevin.
(@dariaalbufeira)
Hace 1 año, 9 meses
Hola Kevin, tienes razón, quiero que los márgenes del título de las pestañas sean cada vez más pequeños. En cuanto al estilo, sí, creo que el mismo estilo podría ser hermoso entonces, no sabía que era complicado, pensé que era fácil, ay. 😉 Por favor verifique, por si acaso tiene tiempo, por supuesto. Gracias.
(@yikesitskevin)
Hace 1 año, 9 meses
Hola Daria,
si !important confirmación de los márgenes del título de la pestaña, por lo que tenemos que superar eso con nuestro !important. Esto cambiará los márgenes del título de la pestaña:
.woocommerce.single .woocommerce-tabs .full-width-content .tab-container ul.tabs {
margin-top: 10px !important;
margin-bottom: 10px !important;
}Prueba esto …
ul.tabs li > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul.tabs li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #ff1053;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
ul.tabs li > a {
position: relative;
color: #ff1053;
text-decoration: none;
}
ul.tabs li > a:hover {
color: #ff1053;
}Saludos, Kevin.
(@dariaalbufeira)
Hace 1 año, 9 meses
Hola Kevin, ¡es tan lindo! ¡Muchas gracias!
Todo funciona, agrego iniciativas de transformación: 0 100%; para pasar de deslizarse de izquierda a derecha.
Última pregunta, ¿cómo puedo anular el color de la línea de la pestaña activa para # ff1053. Intenté de varias formas, pero sin éxito.
Gracias, Daria.
(@yikesitskevin)
Hace 1 año, 9 meses
¡Oh bien! Pasé un minuto tratando de averiguar cómo hacerlo ir de izquierda a derecha / derecha e izquierda y me rendí jaja. Sabía que lo necesitarías. Gracias por averiguarlo.
En cuanto al color subrayado, proviene de WooCommerce, por lo que tendremos que superar su estilo. Y lo están haciendo de una manera extraña al usar una imagen de fondo para la línea.
Esto cambiará el color:
ul.tabs li.active a {
background-image: linear-gradient(to right, #ff1053 0%, #ff1053 100%) !important;
}Esto dibujará la línea debajo de:
ul.tabs li.active a {
background-image: none !important;
}(@dariaalbufeira)
Hace 1 año, 9 meses
Hola Kevin,
eres de primera, muchas gracias !!! Pasaste ayer tratando de lograr eso, sin éxito … uffff. La primera función funciona, pero la última no. Ahora todo está bien en hover y activo, pero luego presionas la siguiente pestaña y ves la línea negra cerrándose, ¿cómo eliminarla? ¿Alguna sugerencia?
Gracias, Daria.
(@yikesitskevin)
Hace 1 año, 9 meses
Hola Daria,
Me lo imaginé. Cambie el código que le di la última vez hasta ahora (elimine el .active)
ul.tabs li a {
background-image: linear-gradient(to right, #ff1053 0%, #ff1053 100%) !important;
}(@dariaalbufeira)
Hace 1 año, 9 meses
Hola Kevin,
muchas gracias por el mejor apoyo! Todo está funcionando, tan feliz de mí !!! 😀 ¡¡¡Te deseo mucho éxito !!!
Gracias, Daria.
(@yikesitskevin)
Hace 1 año, 9 meses
De nada, Daria 🙂
¿Solucionó tu problema??
0 / 0