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
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
I have an application for this too.
Hello Streamliters
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
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
@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.
that’ s an option too
col1, col2 = st.columns(2)
with col1:
yol= "path to html text file"
f = open(yol,'r')
contents = f.read()
f.close()
contents= contents.replace('smth','replaced content')
st.markdown(contents, unsafe_allow_html=True)
with col2:
yol= "path to html text file2"
f = open(yol,'r')
contents = f.read()
f.close()
contents= contents.replace('smth','replaced content')
st.markdown(contents, unsafe_allow_html=True)
and the html code in the the text file will be like :
<h1 style="font-size:20px;text-align:center;">Title</h1>
<p style="background-color:Bisque;font-size:50px;text-align:center;">smth</p>
How can I add colors and background to a component? How to define test-id in app.py file?
Why have you used “stHorizontalBlock” ?
Hey Andfanilo ,
ok. Andfanilo. I have solve it. Thanks for you article.
Hey Deepanshu ,
Go to browser debug mode and solve these problem.
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.