Css customization on streamlit

🎈 Using Streamlit
1

My app is deployed in a community cloud, but i can’t share it
Python: 3.11.2
Streamlit: 1.28.1

I created an app with a custom css file, but i was wondering if this may stop working soon. I was thinking this because there’s such few infformations about this topic online, someone can infform me if this method is safe and reliable?

CSS example:

@import url('https://fonts.googleapis.com/css2?family=Epilogue&display=swap');

/*title*/
.st-emotion-cache-zt5igj {
font-family: 'Epilogue', sans-serif;
}



/*images*/
.st-emotion-cache-p4micv{
    display: none;
    overflow: hidden;
}


/*box st.text_input*/
.st-emotion-cache-s1k4sy{
    outline: none;
    border: none;
    box-shadow: none; /* Desativa o shadow para este elemento */
}



/*text  button*/
.stMarkdownContainer{
    color: black;
}

/*button*/
.st-emotion-cache-7ym5gk:hover{
    color: #455FFC;
    outline: #455FFC;
    border: #455FFC;
}

.st-emotion-cache-7ym5gk:focus{
    outline: #455FFC;
    border: #455FFC;
}

.st-emotion-cache-7ym5gk:active{
    outline: #455FFC;
    background-color: #455FFC;
    border: #455FFC;
}

.st-emotion-cache-7ym5gk:focus{
    border: #455FFC;
}

/*text button*/
.st-emotion-cache-1vbkxwb{
    color: black;
}

.st-emotion-cache-1vbkxwb:hover{
    color: #455FFC;
}

.st-emotion-cache-1vbkxwb:active{
    color: white;
}

.st-bd, .st-bd:active, .st-bd:focus{
    outline: none;
    border: none;
}


.st-emotion-cache-p5msec:hover{

}
/*settings*/
.st-emotion-cache-z8te5h:active{
}

…

Thanks for the attention.

2

Hi @jpcorso,

Using custom CSS with Streamlit is safe, but it’s not officially supported, meaning that the class names and IDs of Streamlit widgets and page elements may change in future releases of Streamlit (in which case you’d have to update your custom CSS to keep the styling consistent).

Hope this helps clarify!

1 Like