4 ways of STYLING Streamlit widgets

Рет қаралды 20,811

Күн бұрын

Streamlit shines with how easy it is to create a stunning data application, but sometimes you just want to break its neat design to add your own custom styling, like round, colored buttons.
In this video, we explore the different solutions for changing the Streamlit design, from the official theming solution to the "CSS Hack".
👀 Chapters
0:00 Intro
0:25 Theming your Streamlit app
0:58 Creating custom Streamlit components
1:50 Prefacing the "unofficial" solutions
2:18 An important tool: Browser devtools
3:30 Hacking Streamlit CSS
5:17 Breaking the IFrame Sandbox
6:06 Caveats to the "unofficial" solutions
📧 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...
- Theming: docs.streamlit.io/library/adv...
- Components: docs.streamlit.io/library/com...
- CSS Hack posts:
- discuss.streamlit.io/t/css-ha...
- discuss.streamlit.io/t/creati...
- Streamlit CSS Button: github.com/andfanilo/streamli...
- CSS Diner (miam): flukeout.github.io/
- Discussions on CSS Hacking:
- discuss.streamlit.io/t/are-yo...
- blog.streamlit.io/streamlit-c...
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
👍 Like & Subscribe if you would like to see more videos!
(This one took me way too long! I think I'd like to do a long one once a month and shorter ones in between..)
External Resources
- HTML screen Video by Joseph Redfield: www.pexels.com/video/person-e...
- Woman hacking Video by cottonbro www.pexels.com/video/woman-ty...
- Smoke Photo by Marek Piwnicki unsplash.com/t/textures-patterns
#streamlit #python #datascience #dataapps
⚠️ Disclaimer: This video is not sponsored. 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 to provide you with free content each week!

Пікірлер: 41

@ici6308 Ай бұрын

You are genius, bro

@oralkontraseptif 2 жыл бұрын

Bro you nailed it again, great tutorial!

@andfanilo 2 жыл бұрын

Thank you :) hope to see you around my channel again!

@wgalloPT 2 жыл бұрын

This is awesome...thank you so much!!

@andfanilo 2 жыл бұрын

Thank you for watching :) Happy Streamlitin'!

@marsshakirov4507 Жыл бұрын

You are great! Thank you:)

@andfanilo Жыл бұрын

Thanks for watching, happy Streamlit hacking I guess! what do you plan to stylize?

@sharanbabu2001 2 жыл бұрын

Cool and helpful!

@andfanilo 2 жыл бұрын

Thanks! Have not seen you for a while on the forum, happy new year and hope you're doing well ;)

@jackykim428 Жыл бұрын

I have a question. I made a page displaying current time with threading and it show utc kst epoch and julian. And i attached container for showing coverted time. The problem is that when i click convert button, current time blink and show itself again. U wanna make the current time container fixed and just reset second container. Is there solution for this problem?

@dishydez 2 жыл бұрын

Great vid! Where did you find the .stButton button tag? It seems my page is showing something different, would love to see how to do this on other streamlit elements

@andfanilo 2 жыл бұрын

Hi @dishydez! I made a textual breakdown on discuss.streamlit.io/t/css-hacks-for-the-dumb/14501/3 if needed. Basically you open your webtool inspector on the Streamlit page, and select your button on the page to find the div with the .stButton class containing the button in the HTML. Then you get some other, harder examples like selectbox here: discuss.streamlit.io/t/can-i-change-the-color-of-the-selectbox-widget/9601. Do tell me if you were able to find the elements you want to target. Have a nice day!

@dishydez 2 жыл бұрын

@@andfanilo Thanks!

@eduardo.chaves Жыл бұрын

I was the 256th like in this video :D

@andfanilo Жыл бұрын

Congratulations XD! And thanks for the support 😀

@flight5056 2 жыл бұрын

👍& subbed

@andfanilo 2 жыл бұрын

Hi you 😃 happy new year! I’m a KZfaqr now!

@theh1ve Жыл бұрын

Hey loving your work! I am trying to format the streamlit-timeline so that it doesn't have grey text on a grey background for example. But I just can't get it to wor!. Could you point me in the right direction?? Please! :) tried dropping css into my app to overwrite it, nope. Tried taking a copy of the full CSS changing that and then get the timeline to load that in. But still no luck!

@andfanilo Жыл бұрын

Hey Adam! To be honest this is not something I've tried, I usually fork and edit components I want to restyle, then rebuild them manually. Updating the CSS in an I'm not 100% sure works (I haven't tried though, I'm on summer break eheh!) - You can edit the timelineJS background though by adding a background argument in an event like `"background": {"color": "red"}`, see timeline.knightlab.com/docs/json-format.html - Hey wait, actually streamlit-timeline doesn't need rebuild, if you look into the code (github.com/innerdoc/streamlit-timeline/blob/main/streamlit_timeline/__init__.py) it's a static component! So you should be able to copy that, change the css_block variable to your own CSS timesheet and follow timeline.knightlab.com/docs/overriding-styles.html to inject your own. Hope this helps you get started

@theh1ve Жыл бұрын

@@andfanilo awesome help thanks! To be honest I tried editing the _init_.py file to load in a local copy of timeline.css but couldn't get it work. Tried file:/// but it just wouldn't take it. Think I have hit the very low ceiling of my python knowledge ha ha!

@andfanilo Жыл бұрын

Ah unfortunately it may be that if you use file:///, it doesn't look relatively to your local project but to Streamlit's installation folder (I quickly talk about it in my latest video kzfaq.info/get/bejne/pt-HpNpm3qmylKM.html ). Maybe try putting your css in a github repo and point to the raw URL of that, or somewhere online just to test? I think it's more Web development experience rather than Python here, which makes it way harder, so if you make it you can congratulate yourself with a nice dinner!

@AliAlias Жыл бұрын

Thanks very much, good information Can make video about make streamlit app Responsive Ui

@andfanilo Жыл бұрын

Hey Ali, Would love to get more details, as Streamlit is already responsive, as long as you add "use_container_width" on most widgets. Just make sure you're not trying to set too wide widgets, that would be hard to display on mobile. Have a nice day!

@AliAlias Жыл бұрын

@@andfanilo thanks for reply

@exo-genius 2 жыл бұрын

Misaotra :)

@k2icc Жыл бұрын

I am assuming them, we can integrate widgets from TradingView charts into Streamlit then.

@andfanilo Жыл бұрын

Hey! Haven't really looked into it but yeah you should be able to components. one of those Have a nice day

@k2icc Жыл бұрын

@@andfanilo I believe TradingView stock charts are in widgets in javascript, so in the same way you add such code within streamlit and html, I believe it can be done, but I am behind as far as what you know. Will experiment. Thanks.

@k2icc Жыл бұрын

@@andfanilo Managed to get it to display the chart, just the size is just like a banner, but need to find out why is not opening as per size properties on code.

@andfanilo Жыл бұрын

@@k2icc Oh, there are multiple posts about TradingView on the forum, I found one here discuss.streamlit.io/t/why-st-components-v1-html-and--functions-limit-the-height-of-the-frame-to-150/21858/13 where you apparently need to remove the autosize line to add your own height parameter in the TradingView specification, then in the height parameter for . Hope that helps a bit 🙂

@vaibhavk2430 2 жыл бұрын

How to change background color of streamlit sidebar

@andfanilo 2 жыл бұрын

Hey! Have you tried the CSS hack on the sidebar : discuss.streamlit.io/t/how-to-set-the-background-color-of-st-sidebar/4888/2 ?

@SP-db6sh 2 жыл бұрын

ReCreate st.cards component, Drop-down menu from navigation bar

@andfanilo 2 жыл бұрын

You can try Hydralit components’s info card - github.com/TangleSpace/hydralit_components

@jackykim428 Жыл бұрын

It's so good. But when i tried to apply it yo the div div div div like this, so uncompotable. Cause i have nerver exepeience css. And st.mardown dosen't follow css. Nevertheless, i finally found it. I think i understand how it works. Thanks

@andfanilo Жыл бұрын

Yeah that’s the not so easy thing With css, sometimes you go through long div > … chains when there are no ID nor CSS class on the block you want to target… which makes this hard to maintain in the long run There’s a bullet point on better visual styling in the roadmap though, hopefully we can push some design ideas for custom styling But glad you managed to get somewhere!

@saparna1921 2 жыл бұрын

Will this work even if deploy this?

@andfanilo 2 жыл бұрын

Yes, as long as it's in your Python code it will be deployed alongside your app ;)

@ArminEskandary 2 жыл бұрын

there is no method for js

@andfanilo 2 жыл бұрын

No there's no st.js. But you can though cheat by using the last method "breaking out of the " and add js into st.html that breaks out to the main app. But streamlit is not really built to have you mix js and python at the same time. Streamlit wants to handle all js for you so you don't need to think about it. If you want to add your own js, you'll need to build a Streamlit component for JS that stays limited to the scope of your custom widget.

@ArminEskandary 2 жыл бұрын

@@andfanilo it sucks