Changing color of a column

Using Streamlit
3

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;
}

image
image745×262 3.46 KB

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

image
image1354×448 27.3 KB

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

5 Likes