0

Estoy usando las pestañas de streamlit con el componente tabs. El problema es que los textos y los subrayados de la pestaña activa aparecen en rojo, y no cuadra con los colores que uso en mi página. Quiero personalizar las pestañas con mis propios colores. Lo he probado todo (CSS, markdown) pero no logro lo que quiero. Lo más parecido es esto:

def convert_image_to_base64(image_path):
    with open(image_path, "rb") as image_file:
        # Codificar la imagen a base64
        base64_string = base64.b64encode(image_file.read()).decode()
    return base64_string

logo_path = 'images/python.png'  # Asegúrate de que la ruta a la imagen sea correcta
base64_icono = convert_image_to_base64(logo_path)

# CSS para ocultar la barra de herramientas de Streamlit
# y crear el icono
html_banner_content = f"""
<style>
.banner {{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}}

.banner img {{
    pointer-events: none;
    width: 100px; /* Ajusta el ancho de la imagen a tu gusto */
    margin-right: 20px; /* Añade un margen derecho para separar la imagen del texto */
}}

.banner h1 {{
    margin: 0; /* Esto elimina el margen por defecto de los h1 */
    /* Otros estilos que quieras para tu h1 */
}}

/* Estilo para las pestañas no seleccionadas */
.tab-content {{
    color: #000 !important; /* Cambia esto al color que prefieras */
}}


/* Estilo para la pestaña activa */
.stTabs [aria-selected="true"] {{
    color: #060 !important;
    border-bottom-color: #060 !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
}}

/* Estilo para la pestaña al pasar el ratón por encima */
button[role="tab"]:hover {{
    color: #060 !important;
}}

</style>
<div class="banner">
    <img src="data:image/png;base64,{base64_icono}" alt="Logo de Python">
    <h1>El mundo de Python</h1>
</div>
"""

st.markdown(html_banner_content, unsafe_allow_html=True)

Sin embargo, la linea que se desplaza debajo de una pestaña cuando pasamos el ratón sigue siendo roja.

Además, necesito poner los demás bordes en la pestaña activa.

Como puedo personalizar este componente de streamlit de una forma sencilla y eficaz?

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.