Change style for metrics embedded in a st.subheader

Using Streamlit
1

Hello everyone. In app I am developing, I am using css styling to format the color, font, font size etc of some of my subheaders that have been created using st. markdown. So as an example, one of the subheaders is created in this way:

Subheader_Volumes = '<p style="font-family: Arial; color: White; font-size: 25px">Volumes (in 000)</p>'
st.markdown(Subheader_Volumes, unsafe_allow_html=True)

I also have subheaders that contain a metric/KPI/ BAN. One such example is a KPI called volumes, the code for this currently used is this:

st.subheader(f"{Volumes:,}")

Volumes is actually a filtered dataset that gets pulled into the subheader.

I would like this subheader to also have an Arial font and with white color. However, when I try using the st.markdown option to do so, I get an error because I don’t know how to do it correctly. It doesn’t display the number, instead it just displays the text if I use this code:

Subheader_VolumesKPI = '<p style="font-family: Arial; color: White; font-size: 25px">f"{Volumes:,}"</p>'
st.markdown(Subheade_VolumesKPI, unsafe_allow_html=True)

How would I have to change the code so the markdown takes the number that is being calculated by the filtered dataframe so that the number becomes White, Arial etc.

Any help is much appreciated.

KR

Christoffer

2

Hi @Cenigk

You need to correct the following errors:

  1. You have set the color parameter to white (color: White). Without any other statements, your background colour will default to white. You wont see text if it has a white colour displayed on a white background, even through its there.
  2. The position of your ‘f’ in the f-string.
  3. Your variable name ‘Subheader_VolumesKPI’ has an error in the st.markdown - it is missing an ‘r’
  4. Your Volumes value is missing in the sample code.

Try the following code first and modify it thereafter for your use:

Volumes = 25
Subheader_VolumesKPI = f"<p style='font-family: Arial; color: black; font-size: 25px;'>{Volumes}</p>"
st.markdown(Subheader_VolumesKPI, unsafe_allow_html=True)

Cheers

3

Hello Shawn, I tried your code and it works perfectly. Thank you, you have really helped me with something that I have googled and ChatGPTd but couldn’t get a good answer. Untill now.

Many thanks

1 Like
4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.