FINALLY! Style Your Streamlit App with Custom CSS 🎨
Вставка
- Опубліковано 8 жов 2024
- In this video, I'm excited to show you a cool new way to style your Streamlit apps without getting all tangled up in tricky CSS hacks! Streamlit's latest update makes it super simple to add custom styles to buttons, input boxes, and more. I'll guide you step-by-step on how to do this with a neat demo app I prepared just for you. First, we'll make sure you have the latest Streamlit version installed, then we'll dive right into applying custom styles using CSS. I'll show you how simple it is to change colors and create animations by just giving elements a class in your CSS file. Even if you're not a CSS pro, I'll share my easy tips on how to use ChatGPT to help out. Plus, I'll teach you how to tweak fonts, add hover effects, and stop Streamlit's default styles from creeping back in. We’ll also explore styling text input boxes, radio buttons, and even HTML text - basically, everything you need to make your Streamlit app look fantastic!
#Streamlit #StreamlitStyling #StreamlitCSS
🌍 𝗟𝗜𝗡𝗞𝗦:
▶ Live Demo App: styling.stream...
▶ Source Code: github.com/Sve...
𝗧𝗢𝗢𝗟𝗦 𝗔𝗡𝗗 𝗥𝗘𝗦𝗢𝗨𝗥𝗖𝗘𝗦
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🆓【𝗙𝗥𝗘𝗘】Excel Add-in (𝗠𝘆𝗧𝗼𝗼𝗹𝗕𝗲𝗹𝘁): pythonandvba.c...
📊 Dashboard Excel Add-In (𝗚𝗿𝗮𝗳𝗹𝘆): pythonandvba.c...
🎨 Cartoon Charts Excel Add-In (𝗖𝘂𝘁𝗲𝗣𝗹𝗼𝘁𝘀): pythonandvba.c...
🤪 Fun Emoji Excel Add-In (𝗘𝗺𝗼𝗷𝗶𝗳𝘆): pythonandvba.c...
📑 Excel Templates: pythonandvba.c...
🎓 My Courses: pythonandvba.c...
📚 Books, Tools, and More: pythonandvba.c...
𝗖𝗢𝗡𝗡𝗘𝗖𝗧 𝗪𝗜𝗧𝗛 𝗠𝗘
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🔗 LinkedIn: / sven-bosau
📸 Instagram: / codingisfun_official
💻 GitHub: github.com/Sve...
💬 Discord: pythonandvba.c...
📬 Contact: pythonandvba.c...
☕ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲?
If you want to support this channel, you can buy me a coffee here:
▶ pythonandvba.c...
*Here are the links:*
▶ Live Demo App: styling.streamlit.app
▶ Source Code: github.com/Sven-Bo/streamit-css-styling-demo
Happy Streamlit-ing! 🎉 Cheers, Sven ✌
¡Excelente!, ya no hay excusas para mejorar la interfaz de usuario, gracias
Happy Streamlit-ing! 🎉🎨 Cheers, Sven ✌️
Thanks for this
My pleasure! Happy Streamlit-ing! Cheers, Sven ✌️
Thank you so much
An absolute pleasure! Cheers, Sven ✌️
Can you make a long video about streamlit from A to z explaining all functionalitys please ?
Thanks for watching. I might actually do a longer Streamlit course in the future. If you're interested, head to pythonandvba.com/go/courses and vote for the Streamlit course. Enter your email, and you'll be notified as soon as I’m about to release it. Cheers, Sven ✌️
Wow! finally, it's almost difficult to believe this is happening! I checked the Streamlit app, there is no mentioning of this... how did you find out? is not in the release from 3 days ago...
Look at the docs. There is a Version 1.39.0 release notes.
I did, I did not see this… I’ll check again in case I missed it…
Yes, finally 🎉 It’s indeed a bit hidden in the Streamlit release notes: docs.streamlit.io/develop/quick-reference/release-notes
Under *Other Changes* , you can find the following: 🔑 Widget keys appear as HTML classes in the DOM with an st-key- prefix.
@@CodingIsFun Thanks for replying, I went back and saw it this time! I am going to test it right now... if it is as good as it looks, this could be a game changer... Thanks for this video and the great content!
@@eurojourney Happy styling! 🎨
Hi, thanks for the video. Can we apply CSS to the dataframe itself using this property?
Thanks for watching. I haven't tried that yet. Feel free to give it a shot! Happy Coding! -Sven ✌️
@@CodingIsFun I tried but failed. Dataframe rendered using st.dataframe() is within a .
and chatgpt's comment:
"st.dataframe() rendering: Streamlit uses an underlying JavaScript library (like Ag-Grid) to render dataframes interactively. The structure is quite different from simpler HTML elements like buttons."
Thanks anyway. Have a nice day!
Thanks great video, does this also work with submit buttons for forms? There is no "key" attribute for the submit buttons is there a way around it? When i use the key fomr the form element it does not change the buttons color.
Thanks for watching. As far as I can tell, it only works for elements with a 'key' attribute.
muy bueno bro!
Thanks!
awesome!! 🎉🎉🎉
🎉🎉🎉