Wagtail CMS: Enabling the Styleguide

Hello, welcome to a lesson on Wagtail Style Guide. Now the Wagtail Style Guide is actually really important for local development. If you are looking to possibly modify your admin styles, now this has nothing to do with your front end. This is purely in the back end. You can also use it just as a reference, as in a style guide. Now if you don't know what I'm talking about, let's dive right in. So the first thing I'm going to do is get into my environment, pip env shell. And I'm going to run manage. py run server 0008000 and 1 because I know I have port 8000 already in use. Alright, so we have our website up here.

Let's just go into our admin and let's close that. Now let's say you're working on a page and You're creating a stream field, and this stream field has some sort of icon. For instance, one of these. And you don't really know which one to go with, because like where do you get that list of icons? Well A quick place to get that is your style guide. Now your style guide is usually found inside of your settings, but it's turned off by default. So let's open up our editor. I'm using VS Code, but you can use any editor you like. And let's open up dev. py. And we want to, where it says installed apps, we just want to install one more in here. And this one is a Wagtail. contrib.

style guide. Give that a second or two to refresh in our console and let's refresh. Yes, leave the page. And here we see we have a style guide. Yes, leave the page. Now this style guide is actually really really important for for several reasons here Now I'm going to zoom out just a little bit here so we can see a little bit more. Uh the content of this page is not necessarily important for the video You should probably enable this for local development anyways if you're looking to change the success message color or uh warning or error message. Uh it has a little table of contents here so you can jump down. But what I was talking about is icons. Now icons are what you can use in your stream fields.

You can actually use these all over the place if you really wanted to. And as a general rule of thumb when you're looking for more icons, really all you have to do is enable your style guide, come down to icons, and you will see that they're all available here. And you have a pretty good list of icons to use. But this is not just an icon listing page. There's a lot more to it. So let's quickly go through this. This is your default Wagtail color palette. These are the different colors that are used in the admin. Accessible color combinations. And we can see there's a lot in here. This is a lot like a brand guideline for Wagtail. This is the default stuff that comes with it. Now, if you wanted to change this, you absolutely could. You could register a hook to add additional CSS to overwrite any of these. And that will be something that I will cover in a separate video.

We have some typography. I am actually going to make this a little bit bigger here. We have some typography in here. We have help text, so we've got like these nice little alerts. Listings, different types of listings. We've got tables, we've got lists. We have pagination styling, different buttons. We have all sorts of different buttons in here. These are pretty nice. That's a huge button, by the way. We have all sorts of stuff in here. So we've got drop-downs , we've got forms, we have Page editor, different tabs , breadcrumbs, progress indicators, uh MISC formatters. We've got all sorts of stuff in here. So at any point in time, if you're ever editing your Wag tell admin and you're like, oh well, how do I change some of that styling? You can see all of that stuff in here. Now, a good place to find

the actual styling is if I come back down. You can see that we have uh for example we've got color salmon light on color gray one. And if you were wondering how do I overwrite these CSS styles, well, right-click, inspect. I'm gonna have to do that once more. There we go. And you can see that we have a list with Color gray one as the class and then we have a span just for the text color and that uses color salmon light text And so you can basically grab any of the CSS styles that you need right from here. You don't have to reference the docs

or anything like that. It's all accessible in your style guide Now that's all there really is to know about the Wagtail style guide. It's really nice. It is a straightforward document that tells you everything you need to know about styling your back-end administration area Now this was a nice quick video, and that's really all there is to know about the Wagtail Admin style guide. And you can basically inspect anything on this page and find out exactly how it's being applied to your back end. And actually I'm gonna do one more example here. Just because my previous example was not very good. So in this case we have color blue, that's the background color, and we can see that here dot palette dot color blue and a color black text so we can see palette

dot color black text but if we didn't just want to work with colors if we wanted to work with uh let's say Let's do the H1. Right click inspect. We'll see we've got an H1 in here and you can see your styling is there. And then all you have to do is basically overwrite this. So uppercase, let's put this as capitalize and you can see that this turned from uppercase to capitalized. In fact, let's maybe make that bigger and try once more. So here I've set it to capitalize and I'm just going to change it back to uppercase. And then in your actual. css file you can apply that To your admin area and it will override it. So again, that's all there really is to know here. This is a nice quick video. Thanks for tuning in.

My name is Caleb Tallin. I am an author on learnwagtail. com. That is a website where you can find all of these tutorials and more videos about learning Wagtail. If you want, you can always check out the documentation at docs. wagtail. io. The docs are pretty good. And don't forget, if you like this video, you can share, subscribe, or leave a comment. I love hearing feedback from people. And if you're interested in watching all of these Wagtail videos, I have several hours of content available. All you have to do is click that rectangle on the right side of your video screen. Thanks for tuning in and I'll see you in the next one.