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

all your streaming widgets looks like everybody else's hello data fans there are multiple workarounds to pimp your stream widgets from the markdown trick to the iframe sandbox breaking yet the streaming developers built another simpler way to restyle widgets but you won't find this Alpha implementation under the stream it experimental namespace I mean it's not even in the streaming nightly package in this video I'll show you how to restyle your app to make it more noticeable stream it is a react web app which compiles to a bunch of HTML JavaScript and CSS for your browser any HTML element style is specified by its CSS so if you want to restyle a widget in your app you want to peek into your streamit app CSS through a mirror as you edit it open your web browser from the menu turn to your browser Dev tools at the elements tab or press the inspector keyboard shortcuts it's a long HTML though we don't have time to browse the full html3 for a specific widget like this not very ground cat image fortunately there is a way to search the html3 for the elements of our not round cut image by clicking on the little arrow button called inspector you will be able to hover any part of the app and the corresponding HTML element will be highlighted in the skeleton another way of doing this is to right click on Save element and inspect it the image tag of the widget should now be outlined and you can even see the CSS skin here in the Styles tab now I want this cat to have round corners notice it is enclosed in a deep container with an st image data test ID attribute and there are some other random CSS classes that we won't be using here because they will probably change between two streaming versions head back to the Styles tab for the outlined image and you know deactivate or edit some of them just to see how it Frankensteins the elements at the top of the tab there is an element Style part which you can edit to add an override CSS properties double clicking this part and add a border radius key with a value of 100 pixels this will override any of the Border radius property and now your cat has beautiful curvy lines this is a good way of training your CSS styling skills now don't worry the CSS changes you make here will be lost the moment you close the browser as a stream later how would you apply CSS round corners to the St image in our python script we would want a CSS child's argument to St Mage with the CSS property you used but that is currently not possible or if you're a streaming power user you could create a SD container with a set of CSS properties that applies to every widget nested inside well using a new CSS pseudo class recently added into browsers except Firefox they decided to hide it behind a flag you can actually simulate a stylable container context manager the secret is in the new CSS has pseudo class one can inject a markdown span element with a key class in an SD container and a CSS selector which only selects containers that contains a stand where certain treatments if you have no clue what I just say that's okay there's basically a way to create a St container which applies CSS styles to all its nested widgets first install the stream it extras package it holds soft launched Alpha features maintained by some streaming developers this package provides the new scalable Contour object move your cat's image in a new styleable Contour context manager just like you would add elements into an expander give the container a unique key and write down the CSS properties to apply a border radius to any image tag directly under any div with the St image data test ID attributes any images in St image divs which are only generated through SD image now have beautiful curves okay let's style some more widgets create a new styleable container fitting the left column paint the Contour nerve with a background color border radius and a bit of padding for some negative space to the text the melody lemon doesn't seem to care about the parent container padding unfortunately it has a fixed Rift defined by the streaming server so you also need extra right padding to the Meltdown element stream it extras accepts a list of CSS Styles make this a list add an extra style for any meltdown element in the container and insert that extra right padding it makes me sad that Magnum elements don't listen to their parents now we can keep adding more and more styleable containers all they do is inject HTML and CSS blocks so the performance overhead to the app is pretty low but we're still talking about an alpha hack feature sometimes if you can't do it it's not because you're bad at CSS it's just it's it's just a pain first this hack abuses the highest CSS pseudo class which if you recall previously Firefox and some mobile browsers decided to disable you can do like other popular websites and add in information in the sidebar to say use Chrome instead of Firefox second widgets with responsive Rift fixed by streaming like the markdown or recital plots or data frames will overlap their parents Contours like columns and you will need to do some work on the target children to properly style them third some widgets with appearing and disappearing elements like the select box may not be fully contained in the parent container now they won't be targeted by the CSS for feather probably more of them and you should write them in the comments below those are reasons why just enabling an external style sheet to a stream it app not an immediate easy solution but for applying quick color and size retouchers to buttons and check boxes this styleable container is absolutely the best solution until an official one emerges from the roadmap and in the harder cases perhaps you should consider those alternative tricks I'll see you around bye

Channel: Fanilo Andrianasolo

Views: 6,357

Keywords: Streamlit hacking, build data science project, css, data analysis, data analytics, data apps, data science, data visualization, html, learn streamlit, python, python streamlit, streamlit, streamlit python, streamlit tips, streamlit tutorial, streamlit css

Id: AtRf_eRQZwQ

Length: 5min 58sec (358 seconds)

Published: Wed Sep 06 2023