How to Perfect Your Python Dashboard with Advanced Styling! (HTML/CSS

Transcript#

This transcript was generated automatically and may contain errors.

Hey what's up everyone and welcome back to another video. In this video we're going to see how we can incorporate some advanced styling using HTML, CSS into our Shiny for Python apps.

So to get started you can go to this github link and all of the code and video resources for each of the previous parts of these series can be found in the github repo. But we're going to want to take the code from part 4, basically this app.py file and start from there.

As a reminder, basically in the last video we had an app that looked like this, pretty fully built out, but it just lacks some nice styling. So in this video we're going to see how we can turn this app into a more polished app that has a nice color scheme, etc. that looks like this.

Getting started with HTML and CSS in Shiny

So I think a good starting point, I like to create a new branch to work off so I'll call this video 5. Let's look again at what we're ultimately trying to do. Well we have a dashboard that looks like this and we're trying to convert it into one that looks like this.

So I think that a good approach here is like draw out what you want your design to look like and then ultimately like you modify your code to actually make that happen. So that's kind of what we're following. We have like this polished final product and we're trying to convert our existing code to mimic that. So I think it makes sense to start top down. So let's go ahead and start with this title and logo.

And I think a starting point, let's get some context on modifying HTML and CSS within our app before we actually modify this title. So within Shiny we have really useful abilities to actually directly modify the HTML and CSS of our pages.

So if you're not super familiar with the HTML and CSS on any web page you ever browse on you can right click and this is true in most browsers and click inspect. And then what that basically opens up is all of this HTML source code. So we can see that everything's kind of hidden within this body. We can see the different elements of our screen. So we can see that this H2 tag is our title and all of these different graphs are kind of found in these divs.

To do this, I think a good starting point is to add a UI.tags.style attribute to your Python app. You could do this in the same file or you could create a separate file to do this. But basically anything that you put within this little element will modify the CSS in your app.

So what might we want to do? Well just for proof of concept, how about we change some of this visualization's background colors. I could inspect. I could see that we're in this div. I could see that we're in this sidebar. I can start looking at IDs of things. So we see we have this label class, control label.

So we see the control label now has a blue background for all of these different elements.

So this now, the hash sign, forget the pound sign, specifies an ID in CSS. I could have done city label. I run this. We're going to see that this, oh, I spelled label wrong. If I spell this correct, we'll see that this is still blue, but that other label down here is no longer targeted by the class modification.

Maybe I wanted to change the font size to be like 50px. So we'll see this label now get much bigger. You could do all sorts of customizations. Obviously, I will not leave it like this because maybe you have a different take, but I don't think that this looks particularly good right now. But it's cool to see that we can modify, start modifying the style of random elements.

What's even more useful than this though is that we can start giving elements on the screen. So for example, like this layout sidebar, I could give this full sidebar, a class label, something like custom sidebar, how about, and now I can modify this whole sidebar, the attributes of it by, it's a class. So it's period because whenever we're modifying classes, it's period, custom sidebar.

And that's by adding this class underscore. The reason we add the underscore is because in Python, class like this is a protected name. So basically to get around that, we have to do class underscore. And if you wanted to modify the ID, likewise, you do ID underscore. And that would allow you to customize these specific elements. And you can do that with all UI elements within this.

The reason we add the underscore is because in Python, class like this is a protected name. So basically to get around that, we have to do class underscore.

We're going to remove this though for now, but it's good to see that this is possible.

Like if you're sharing this dashboard, like they don't need to know the plotly controls that you can do here. So if we inspect this, we see we get this mode bar here, class mode bar. We can just, you know, as before you saw before, we can go ahead and add something like class mode bar display none and just hide this completely.

I'm going to copy just basically this snippet of code and apply to the others. So this one uses value now instead of, I should modify the second one. Looks good.

And then I guess the Y-axis label, shoot, now there's a different Y-axis label for quantity ordered. I'm going to pass this in as a, another field.

Now we've modified it to have different titles based on different things. That looks good.

We can now copy this into the last two. So this one pasted in here, then instead of this blues, I think if we just did reds, it will be totally fine. Looks good.

I think the final change is maybe we would want to standardize this font to be like the same blue. So I might just go back to the chat GPT window and I modify the font to be Arial size 12 with a blue color that has color, what was that hexadecimal code that we had before? It was this, and I might just make a variable at the top of our screen called like font color, just so we can standardize and just use this variable if we ever want to change fonts.

We can add this to our style Plotly chart code. Look at that. Now we got a nice change in color. Looks good.

And if I wanted to just clean this up a bit, I could pass in font color to all the places that use it. You could also do the same with font type and make that Arial, set to Arial.