How to make this custom container with color and border from awesome-streamlit?

Saw this in awesome-streamlit. How to actually do that blue color text box?

Is it possible to have such container too wrapping other elements like graph, table, dataframe etc?

Hello @Keeb_Thock

The blue box containing the message comes from the st.info method. The associated st.sucess, st.warning, st.error and st.exception will give you the green, yellow and red variants.

This is reserved for text blocks for now (I would guess this is because the underlying library is a Markdown parser which would make it hard to inject Streamlit widget HTML in there :confused: ) I don’t think there is a plan to bring this to Streamlit containers but that could be an interesting idea. If you have some time, could you bring it as an issue here with eventually a visual example ?

Have a nice day,
Fanilo :balloon:

2 Likes

Is there like any hack to color the container background and show its border using css?

1 Like

You can using the CSS in markdown hack, you can basically put CSS in the app and unsafe_allow_html to True in st.markdown to have it parsed (as long as your CSS selectors are specific enough to point to the correct widget everything is possible), some examples in the following :

Fanilo

3 Likes