Visual formatting for widgets

[aurele]

Hi!

I was wondering if it was possible to create columns with specific visual constraints, for instance a background color.

My code looks like that :

st.markdown("""
<style>
.columnstyle1 {
    border: 2px solid orange;
    border-radius:5px;
    background-color: #FFE8CC;
    font-weight:bold;
    padding: 10px;
}""", unsafe_allow_html=True)

col11, col12, col13 = st.columns(3)
    with col11:
        st.markdown('<div class="columnstyle1">Section 1</div>', unsafe_allow_html=True)
        st.markdown("""
                        <style>
                        div[data-baseweb="input"] > div {
                            background-color: #FFE8CC;
                        }
                        </style>
                    """, unsafe_allow_html=True)
        st.number_input("Input number:")

This is the output:

I would like the whole number_input to be in the markdown box, possibly with a dataframe. Is that an available feature?

Thanks a lot!

[Charly_Wargnier]

Greetings, @aurele! The Streamlit community is thrilled to have you join us. Welcome aboard!

You can use the Pandas Styler function to add custom styling to dataframes in Streamlit.

Here’s the code snippet to achieve the orange-colored background in the above screenshot

import streamlit as st
import pandas as pd

st.markdown("""
<style>
.columnstyle1 {
    border: 2px solid orange;
    border-radius: 5px;
    background-color: #FFE8CC;
    font-weight: bold;
    padding: 10px;
}
</style>
""", unsafe_allow_html=True)

col11, col12, col13 = st.columns(3)

with col11:
    st.markdown('<div class="columnstyle1">Section 1</div>', unsafe_allow_html=True)
    
    st.markdown("""
    <style>
    div[data-baseweb="input"] > div {
        background-color: #FFE8CC;
    }
    </style>
    """, unsafe_allow_html=True)
    number_input = st.number_input("Input number:")

    data = {'A': [1, 2, 3], 'B': [4, 5, 6]}
    df = pd.DataFrame(data)

    st.dataframe(df.style.set_properties(**{'background-color': '#FFE8CC'}), width=300)

I hope that works. Let me know if you’d need anything else.

Best,
Charly

[aurele]

Hi Charly,

Thank you for your answer!

What I wanted was more to have one orange box that contains everything, like an orange column, but without setting all my background to orange. Do you think that is possible?

Thank you,

Aurele

[Charly_Wargnier]

Sorry for the late reply @aurele

Coloring just specific columns can get a bit tricky since (afaik) it involves tweaking the CSS directly on the column containers, which isn’t always the most straightforward task in Streamlit.

But you may already have found a workaround anyway? Let me know if there’s anything else I can help you with.

Best,
Charly