HI,
I would like to display a title at the top, middle of the page,
i have tried many streamlit components but it defeats me. I’n new to streamlit.
thanks
HI,
I would like to display a title at the top, middle of the page,
i have tried many streamlit components but it defeats me. I’n new to streamlit.
thanks
Hey,
You can use some CSS code to workaround:
st.markdown("""
<style>
/* Remove blank space at top and bottom */
.block-container {
padding-top: 0rem;
padding-bottom: 0rem;
}
</style>
""", unsafe_allow_html=True)
st.markdown(
"""
<h1 style="text-align: center; margin-top: 0;">
Your Title Here
</h1>
""",
unsafe_allow_html=True
)
If it’s a riddle game it can work
Did you try to play with the padding block +or- on the value.
what i’m looking for is, align the title at the same level of the logo, if you notited the result which i got from your code …it seem at the buttom
Using version 1.40, I would:
st.container
and assign a key
to target the CSS stylingmy_app.py
import streamlit as st
with open("style.css") as css:
st.html(f"<style>{css.read()}</style>")
with st.container(key="app_title"):
st.title("My Unique Title App")
st.logo(
"https://placehold.co/600x60?text=XD+Long+Logo",
icon_image="https://placehold.co/60x60?text=XD",
)
st.title("A small title for a section")
st.header("A header")
st.subheader("A subheader")
st.write("A repeated paragraph" * 50)
with st.sidebar:
st.title("A sidebar title")
st.header("A sidebar header")
st.subheader("A sidebar subheader")
style.css
header.stAppHeader {
background: rgba(0, 0, 0, 0);
}
div.stMainBlockContainer {
padding-top: 0.2rem;
}
div.st-key-app_title div.stHeading {
text-align: center;
}
div.st-key-app_title div.stHeading h1 {
font-family: monospace;
letter-spacing: -5px;
}
Here is what worked for me.
import streamlit as st
with open("style.css") as css:
st.markdown(f"<style>{css.read()}</style>", unsafe_allow_html=True)
st.markdown("<h1 class='custom-title'>My Unique Title App</h1>", unsafe_allow_html=True)
# Assuming st.logo is a custom function you've defined
if hasattr(st, 'logo'):
st.logo(
"https://placehold.co/600x60?text=XD+Long+Logo",
icon_image="https://placehold.co/60x60?text=XD",
)
else:
st.image("https://placehold.co/600x60?text=XD+Long+Logo")
st.title("A small title for a section")
st.header("A header")
st.subheader("A subheader")
st.write("A repeated paragraph" * 50)
with st.sidebar:
st.title("A sidebar title")
st.header("A sidebar header")
st.subheader("A sidebar subheader")
css
.custom-title {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 10px;
background-color: rgb(20, 19, 19);
z-index: 999;
text-align: center;
font-family: monospace;
letter-spacing: -.99px;
}
.stApp > header {
background-color: transparent;
}
.main .block-container {
padding-top: 5rem;
}
Consider upgrading your Streamlit version, st.logo was introduced with version 1.35.0.
thanks but the css part in the style.css does not applied. I dont know why? is there an extra configuration i need to add to make the css file readable. ?
thanks
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.