How to apply custom CSS styles in Streamlit apps

Рет қаралды 61,289

2 жыл бұрын

In this video, you will learn how to apply custom CSS styles in Streamlit apps. Particularly, you will be changing the background and border colors of the st.metric element of a Streamlit app.
👉 Code github.com/dataprofessor/stre...
Support my work:
👪 Join as Channel Member:
/ @dataprofessor
✉️ Newsletter newsletter.dataprofessor.org
📖 Join Medium to Read my Blogs / membership
☕ Buy me a coffee www.buymeacoffee.com/dataprof...
Recommended Resources
📚 Books kit.co/dataprofessor
😎 Taro (Tech Career Mentorship) www.jointaro.com/r/dataprofes...
📜 Google Data Analytics Professional Certificate imp.i384100.net/google-data-a...
🤔 Interview Query www.interviewquery.com/?ref=d...
🖥️ Stock photos, graphics and videos used on this channel 1.envato.market/c/2346717/628...
Subscribe:
🌟 Coding Professor / @codingprofessor
🌟 Data Professor kzfaq.info...
Disclaimer:
Recommended books and tools are affiliate links that gives me a portion of sales at no cost to you, which will contribute to the improvement of this channel's contents.
#datascience #machinelearning #dataprofessor

Пікірлер: 76

@michaeldimattia9015 Ай бұрын

I just now stumbled upon this tutorial, and was able to replace buttons in my Streamlit app with custom css stuff that uses animations! This was incredibly helpful in unlocking a new level of Streamlit customization. Thanks!

@ernestnketiah5447 2 жыл бұрын

This was awesome! Sucessfully implemented it!

@arseneboundaone3560 Жыл бұрын

❤‍🔥fantastic walkthrough, thank you!

@jorge1869 2 жыл бұрын

What a talent to explain. Thanks, love it.

@DataProfessor 2 жыл бұрын

You're very welcome!

@sanandasaha9859 Жыл бұрын

Very useful tutorial! Thanks

@Ibraheem_ElAnsari 2 жыл бұрын

🔥🔥I really enjoy playing with the CSS in streamlit. Personally I like adding a box on the top with project title and description

@DataProfessor 2 жыл бұрын

Awesome, it is fun indeed 😆

@azwraithlance5159 Жыл бұрын

nice tutorial very helpful 👍

@carlomartinotti3649 Жыл бұрын

This should be in the offical documentation of Streamlit. It unlocks so much customization power in streamlit, big props! Are the css names for the widget going to be constant on any system? Like if I redeploy the app in another environment, would the name of the streamlit element be the same?

@retrorusty2012 Жыл бұрын

Good insights and questions. I'd love to know also!

@Katsiarina1 Жыл бұрын

Thank you for the tutorial! Can we apply styles to any objects in streamlit? Buttons for example or inputs?

@vouky8747 7 ай бұрын

Nicee video thanks for helping us out! I have been trying to include a button within the cards or metric but with no success have you done anything similar?

@lebdev853 2 жыл бұрын

Greate video this was very useful. But i have a question can you make a video to show how to use bootstrap card with tabs inside streamlit ? Where each tab has its own ID that is displayed in the URL. Thank you in advance.

@LemurHT Жыл бұрын

How can I make the text of the metric to be center aligned? Is there something with the new update that won't allow this through css?

@sahil_gidwani 2 жыл бұрын

Hi Can you please help me out I'm trying to display a nav bar with some html code but the latest update of streamlit 1.5 seems to have some changes regarding markdown and allow html

@fabiof.deaquino4731 2 жыл бұрын

🔥 😁

@aodv Жыл бұрын

Great video professor, you should create a video about modal with bootstrap.

@DataProfessor Жыл бұрын

Thanks for the suggestion, I’ll definitely consider that :)

@jerbear97 Жыл бұрын

hi, how do you connect css file to the .py file?

@AliAlias Жыл бұрын

Thank very much for information Can make video about make streamlit app Responsive Ui

@bugito99wichit31 2 жыл бұрын

ขอบคุณครับ

@DataProfessor 2 жыл бұрын

Krub :)

@giuseppesinopoli9548 Жыл бұрын

🔥

@Vazio-ym8xg 2 ай бұрын

Do you have any video this theme for st.dataframe?

@serychristianrenaud 2 жыл бұрын

Thanks ....

@DataProfessor 2 жыл бұрын

You're welcome!

@harshsinha9709 5 ай бұрын

I want to color only one box

@vaibhavk2430 2 жыл бұрын

Is it possible to draw route between two location in streamlit ;if yes then how

@BunkKal Жыл бұрын

hi prof, i would like to ask at 3:51 for the f'{f.read()}' is it an html syntax or streamlit specialized html? what is it called if i want to google more about it

@piscinepatel1398 2 ай бұрын

f''...{variable}.....' is "f string" this is python syntax

@omarronco8819 Жыл бұрын

Great video, I wanted to ask how you can apply different css for each tab, because each tab has the same class css-1r6slb00.e1tzin5v2

@alikoohi8265 2 жыл бұрын

Can we specifically change on each item style among these three?for example if we could give each element an ID and then change only the style of that ID ...as regular css that we do.another question of mine is that in your opinion,which of Dash or streamlit are easier to make modifications?for example you can use bootstrap with Dash which is so helpful.

@jvcss 2 жыл бұрын

i'm building this dash

@kaankorkmaz8180 Жыл бұрын

Looking for the same thing... Is this possible in Streamlit?

@k2icc 2 жыл бұрын

I am assuming the content can be dynamic. For example, stock data, live weather data, etc. I guess calling a page, webscrapping it, then displayin the class name that contains the data wanted, to display them within a CSS box?

@DataProfessor 2 жыл бұрын

Yes, you display dynamically updated values as you had mentioned for the st.metric

@asifkhanpattan9982 7 ай бұрын

how to change the background color and how can i add the background image to the my streamlit web app?

@joanmok8445 Жыл бұрын

Hey, thanks for your video and it's really helpful for doing styling in Streamlit, but I met an issue here. It works for the property like background, padding, and color. However, it didn't change the font-weight, font-family when I try to change it. Is it any explanation for that? Thanks in advance.

@DataProfessor Жыл бұрын

Hi the font weight and font family can be adjusted in the .Streamlit/config.toml

@ritzchaudhury9448 2 жыл бұрын

Can you make a tutorial on how to change background image in streamlit

@marcussrm4260 4 ай бұрын

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

@Troiler 9 ай бұрын

❤‍🔥

@finuture Ай бұрын

I am getting an error message as no file or directory as style.css even though I have saved the file in app.py, any clue what I might be doing wrong?

@itzzmax888 2 жыл бұрын

YO WAS GOOD

@DataProfessor 2 жыл бұрын

Thanks!

@jackychan4640 Жыл бұрын

Hey Profesor , I have the video and solve it.

@kaankorkmaz8180 Жыл бұрын

how would you change the style of individual items? Can you assign IDs to them?

@DataProfessor Жыл бұрын

We can identify the IDs of the elements from the Chrome browser

@sunnythakkar2008 2 жыл бұрын

thanks for informative vid, however when you resize the window, the css formating goes away, any solution for that?

@samaradossantos9192 2 жыл бұрын

I'm facing the same issue :(

@DataProfessor 2 жыл бұрын

Hi, have you upgraded to the latest Streamlit version, not sure if that could cause the problem.

@Lucasvasconcelos3 2 жыл бұрын

Great Men, congrats! It’s works on my localhost, but when I deploy my app to streamit cloud or heroku the css configs don’t work. the page collor stiil blank and other styles configuration don’t apply. Can you Help me? My file style.css and my app app.py are in the same folder and I use the same method that you teach us.

@DataProfessor 2 жыл бұрын

Hi, to set the background color you can do that by setting it in the config.toml file which should reside in the folder ".streamlit". See this file for details github.com/dataprofessor/streamlit101/blob/main/.config/config.toml

@abrarsyed4734 2 жыл бұрын

Even I'm facing the same issue, have you found the solution ?

@hope-kz6tb Жыл бұрын

Brother please can you make a video on how to show adsense ads in streamlit webapp

@Bloodcurling 7 сағат бұрын

@2:05, nowhere do you explain where the style.css file comes from

@sureshabeyweera6733 2 жыл бұрын

Thanks Professor, Have you forgotten to attach the github repo link to this video

@DataProfessor 2 жыл бұрын

Sorry about that, I thought I did must have forgot. Thanks for the reminder, it is now in the video description.

@maryembenali1468 Жыл бұрын

hey , awsome video , i just tried it ! the result of the change appears only when i click on inspect button, even after many refreshes and made sure everything is saved , do you have any idea why it happened?

@DataProfessor Жыл бұрын

When we inspect the code we’ll see the unique identifier of the elements which allows us to specifically customize those elements with CSS

@milia2029 Жыл бұрын

@@DataProfessor does it mean that specifying the div where to apply the added css is not enough ( an id is needed?) Bcz i already applied changes on that div in a css file.. but it only appears when i click on inspect.

@qkb3128 Жыл бұрын

🔥💥☄☃

@humanquotes1977 10 ай бұрын

the my code cannot works with the css

@MahdiImeni 2 жыл бұрын

How can I make a button that run a code (function) at every click?

@MahdiImeni 2 жыл бұрын

@slkslk7841 Жыл бұрын

Somehow it doesn't work for me. :( I'm giving the right class, and also see the style.css file is being read. Is any other setting overriding this style.css ? I kept the style.css as simple as possible. div.css-10trblm.eqr7zpz0 { background-color: #EEEEEE; }

@arieljumba9754 Жыл бұрын

Does it still work when deployed

@DataProfessor Жыл бұрын

Yes it does, I’ve adjusted the CSS styling on deployed apps, an example here github.com/dataprofessor/dashboard-v2

@inthedark122 Жыл бұрын

Please be careful with this solution because Streamlit uses styled components. Classes can change every time for each building. You cannot guarantee that you will have the same names in the future.

@hajarbensahl8699 Жыл бұрын

Can you please clarify this i don't understand what u mean exactly if i have an app with sreamlit i shoud not use css or what ?

@alvinrachmat9328 Жыл бұрын

so how can we overcome it?

@inthedark122 Жыл бұрын

@@alvinrachmat9328 I did not listen for this library, but you can do like on the video with a bit risk. The best way to have id on each element or have official solution

@inthedark122 Жыл бұрын

@@hajarbensahl8699 all classes that generated by internal Streamlit application uses effector to generate uniq random name of class. This function should use hash function of the styles for each class. So during streamlis will have same styles for each class - you will have right style. When streamlist decide to change their styles - you will have different class names