Streamlit Reveals NEW CSS Styling Trick! (Here’s How to Use)

Want to change the style of a Streamlit button or Slider? In this tutorial, you'll discover the workflow I use to style some widgets using a new alpha release hidden in an external package by the Streamlit Developers.
You will learn:
- How to use the devtools to target a specific HTML element in your app
- How to edit a widget styles through the Styleable Container component
By the end of this video, you'll be equipped with the skills to quickly the color of some buttons.
📧 My email list to keep up to date with the latest news, tutorials and resources about Streamlit & friends ➡ andfanilo-newsletter.streamli...
💰 Buy me a coffee to stay awake while editing ➡ www.buymeacoffee.com/andfanilo
🗣️ Find my socials ➡ andfanilo.com
👉 Links
- Source code: github.com/andfanilo/social-m...
My tools (Affiliate links to support me!)
- 📷 Main Camera - amzn.to/3QvTosB
- 📷 Main Lens - amzn.to/3svYCwq
- 🎙️ Microphone - amzn.to/47l5ewA
- 🎵 Music & Sound Effects - www.epidemicsound.com/referra...
- 📕 Streamlit Official Book - amzn.to/3QuRPwl
00:00 Prerequisites
02:19 The Secret Trick
______
🪶 ...unexpected life events made me take a break. I made this video in a rush to get back into the groove, so I hope you like it :)
⚠️ Disclaimer: This video is not sponsored, I receive no compensation by any brand quoted in this video. Views are my own and do not represent my employer's.
Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. Thank you for supporting my channel so I can continue providing you with free content!
#streamlit #python #datascience #dataapps

[@darkcss1054]

Nice! I use a lot of css hacks on my streamlit already to reduce blank space at the bottom and top of the main data canvas. Nice that I can use it on widgets as well now!

[@maivish100]

Hi Fanilo,
Thanks for sharing insight informations. Can we can change column header background color in ST. Kindly reply and how to do.(st.dataframe)

[@ritik9799]

One of the problems with stylable container is that when border is set to true and you update the border radius, the plotly go chart does not stay inside the container

[@andfanilo]

Thanks for sharing, I think I had this problem on another video that I've never really managed to solve. I almost wanted to add a background shape with border radius and no fill at the plotly level to simulate this 😅
We shall see if the "visual customization" in the roadmap roadmap.streamlit.app/ for may-july 2024 proves to be true :)

[@marcussrm4260]

Hello! How to change the font-size of a streamlit datraframe?

[@andfanilo]

Hello!
Hmmm, I don' think it's possible through the Styler:
```
import pandas as pd
import streamlit as st
df = pd.DataFrame({
'date': ('2019-11-29', '2016-11-28'),
'price': (0, 1),
})
df = df.style.set_properties(**{
'background-color': 'yellow',
'font-size': '4pt',
})
st.dataframe(df)
```
Maybe you can write an issue about it on github.com/streamlit/streamlit/ 🤔

[@marcussrm4260]

@@andfanilo Firstly, thank you very much for your attention.
I tried this solution, but only the background and font color accepted the instruction, the font-size was not changed. I'm going to use st.table for my needs, which are easier to customize.
Thanks!

[@shawnpereira3042]

Why can't each streamlit widget simply have style properties like nicegui, flet, etc.?

[@andfanilo]

Cross fingers it comes sooner rather than later 🤞🤞

[@jeromeprades9540]

More basic please