Avisos
Vaciar todo
Buenas tenemos un modulo de pestañas al que hemos metido diferentes artículos de la tienda de divi, el problema viene a la hora de darle forma a esas pestañas, lo hemos hecho mediante css pero por algún motivo que desconocemos la zona derecha de la pestaña sale sin marcar, como que desaparece... adjuntamos imagen
Aquí se puede ver la página en directo: Calendarios 2025 personalizados para empresas (nimar.es)
este es el código que añadimos:
/* Estilos tabs ov-divi */
.ov-tabs {
background-color: transparent; /* Fondo transparente */
}
.ov-tabs .et_pb_tabs_controls {
display: flex;
flex-wrap: nowrap; /* Mantiene las pestañas en una sola línea */
justify-content: center; /* Alineación central de las pestañas */
overflow: visible; /* Asegura que todo el contenido sea visible */
}
.ov-tabs .et_pb_tabs_controls li {
display: inline-block;
background-color: white; /* Fondo blanco */
border: 2px solid gray; /* Borde gris */
border-right: none; /* Elimina el borde derecho para evitar el doble borde */
color: black; /* Texto negro */
padding: 5px 15px; /* Altura reducida con más espacio horizontal */
margin-right: 15px; /* Aumenta la separación entre pestañas */
cursor: pointer;
transition: all 0.3s ease; /* Transición suave */
min-width: auto; /* Ancho ajustado al contenido */
position: relative; /* Asegura que el borde se mantenga visible */
border-radius: 30px; /* Bordes redondeados */
}
.ov-tabs .et_pb_tabs_controls li:hover {
border-color: black; /* Borde negro al pasar el ratón */
}
.ov-tabs .et_pb_tabs_controls li.et_pb_tab_active {
background-color: black; /* Fondo negro al seleccionarla */
color: white; /* Texto blanco al seleccionarla */
border-color: black; /* Borde negro al seleccionarla */
z-index: 1; /* Asegura que la pestaña activa esté sobre las demás */
border-right: 2px solid black; /* Mantiene el borde derecho de la pestaña activa */
border-radius: 30px; /* Bordes redondeados también para la pestaña activa */
}
/* Asegura que el borde derecho no desaparezca */
.ov-tabs .et_pb_tabs_controls li:not(:last-child) {
border-right: 2px solid black; /* Añade un borde negro entre pestañas */
border-radius: 30px; /* Bordes redondeados entre pestañas también */
}
/* Ajuste del ancho de la pestaña acorde con el texto */
.ov-tabs .et_pb_tabs_controls li {
width: auto;
white-space: nowrap;
}
Contenido solo visible a usuarios registrados
Respondido : 01/10/2024 11:43 am
Hola Fernando,
En el código que nos compartes tienes una línea:
border-right: none; /* Elimina el borde derecho para evitar el doble borde */
Elimina ese y luego también al final del todo nos compartes este:
/* Asegura que el borde derecho no desaparezca */
.ov-tabs .et_pb_tabs_controls li:not(:last-child) {
border-right: 2px solid black; /* Añade un borde negro entre pestañas */
border-radius: 30px; /* Bordes redondeados entre pestañas también */
}
Desactiva de ese el borde derecho, es decir quedaría así:
.ov-tabs .et_pb_tabs_controls li:not(:last-child) {
border-radius: 30px;
}
Verifica y nos comentas.
Un saludo 🖐️
Respondido : 01/10/2024 4:22 pm
Pues sigue saliendo como desaparecido, actualmente el código está así:
/* Estilos tabs ov-divi */
.ov-tabs {
background-color: transparent; /* Fondo transparente */
}
.ov-tabs .et_pb_tabs_controls {
display: flex;
justify-content: center; /* Alineación horizontal central */
gap: 8px; /* Reducción de la separación entre pestañas */
}
.ov-tabs .et_pb_tabs_controls li {
list-style: none;
border: 2px solid #ccc; /* Borde gris */
border-radius: 30px; /* Bordes redondeados (ligeramente más pequeños) */
padding: 5px 10px; /* Reducción del padding para hacer las pestañas más pequeñas */
margin: 3px; /* Reducción del margen para ajustar el espacio */
background-color: #fff; /* Fondo blanco */
color: #000; /* Texto negro */
text-align: center; /* Alineación del texto */
cursor: pointer;
transition: all 0.2s ease;
font-size: 18px; /* Ajuste del tamaño de fuente */
}
.ov-tabs .et_pb_tabs_controls li:hover {
border-color: #000; /* Borde negro en hover */
}
.ov-tabs .et_pb_tabs_controls li.et_pb_tab_active {
background-color: #000; /* Fondo negro para pestaña activa */
color: #fff; /* Texto blanco para pestaña activa */
border-color: #000; /* Borde negro para pestaña activa */
}
.ov-tabs .et_pb_tabs_controls li.et_pb_tab_active:hover {
border-color: #000; /* Mantiene el borde negro en hover en pestaña activa */
}
/* Asegurarse de que la última pestaña tenga su borde visible */
.ov-tabs .et_pb_tabs_controls li:last-child {
border-radius: 30px; /* Asegura que las esquinas estén redondeadas */
}
Respondido : 02/10/2024 10:32 am
Hola Fernando,
Aún veo que se aplica, agrega esto al final del todo en tu Apariencia > personalizar > css adicional:
.et-db #et-boc .et-l .et_pb_tabs_controls li {
border-right: 2px solid #d9d9d9;
}
.et-db #et-boc .et-l .et_pb_tabs_controls li:not(.et_pb_tab_active):last-child {
border-right: 2px solid #d9d9d9;
}
Verifica y nos comentas.
Un saludo 🖐️
Respondido : 02/10/2024 4:00 pm
Hola Fernando.
¡Genial! Me alegra mucho que lo hayas resuelto. 😊
Si necesitas más ayuda, no dudes en contactarnos.
Un saludo
Respondido : 03/10/2024 10:02 am
