Changing color of a column

Hi All,

Is it possible to change the background color of a column?
Example
" left, right = st.beta_columns(2)"
Is it possible to change the color of the “left” column here?

Thanks in advance!
A

1 Like

I have an application for this too.

Hello Streamliters :tm:

You can “mess up” with Streamlit CSS this way:

app.py

import streamlit as st

def local_css(file_name):
    with open(file_name) as f:
        st.markdown('<style>{}</style>'.format(f.read()), unsafe_allow_html=True)

local_css("style.css")

st.title("Hello world")

left, right = st.beta_columns(2)
left.markdown("I am red")
right.markdown("I am not")

style.css

body {
  background-color: lightgoldenrodyellow;
}

div[data-testid="stHorizontalBlock"] > div:first-of-type {
  background-color: red;
}

This will change the background color of the first column of any horizontal layout.

In the web inspector, this CSS targets the yellow div, the 1st child of any stHorizontalLayout.

If you want to edit further, you can edit the CSS file to target the blocks you need. Do note that future Streamlit version may change the HTML structure by renaming div attributes.

Cheers,
Fanilo

3 Likes

Thanks Fanilo, this was very helpful. My specific application is to put a contrasting gutter between two tables displayed side by side by creating a narrow center column. So I have to think a bit more about how to select the specific “stHorizontalBlock” entries that I want to apply this to.
Kevin

1 Like

@andfanilo Hi, can we change the appearance of st.button?
I want to change its font color, background color, width and height.
thank you.
I asked a new question about st.button under this url, you can reply this there.