Adding a Bootstrap 4 Theme to Our Wagtail Site

Hello, in this lesson, we are going to make our website look a little nicer. Because right now it's pretty ugly There's a lot of inconsistent stuff already. Even our banner, our homepage banner, is pretty gross. And I mean that's coming from the person who's recording this video. In prior lessons, we have got Wagtail set up. We've got Django debug toolbar set up. Just so everybody knows, I'm using Django version 2. 1, Python 3. 7. Debug toolbar 1. 11 and Wagtail 2. 4. Now this lesson or this video is not necessarily having to do with Wagtail. This video is more about making our site look nicer because what's the point of making an ugly website?

Nobody wants a really ugly website, so I thought we should take a couple minutes and just clean this up. Now if you're not interested in this, you can skip ahead and you can just view the source code and you can copy and paste if you want. No hard feelings there if you don't want to watch this video, because this is purely styling and it's going to be relatively quick. So at the beginning of this course, I said we're going to be using Bootstrap 4. And that's true, we are going to be using Bootstrap 4. Now I have This website booted up called bootswatch. com and it comes with a bunch of free themes. Free themes for Bootstrap. Pretty clear copywriting there. So there are a bunch of different themes here. You can pick and choose whichever one you like. It doesn't necessarily have to be the one that I'm going to be using, but I'm going to use Superhero because I like this one the most.

Now in order to actually get this up and running, it's really really easy. You click on this little tab here and you go into bootstrapmin. css and you just copy and paste that URL So I'm going to open up VS Code and I'm going to open up base. html. And I'm going to replace our regular bootstrap URL with Move this over so you can see it with that URL and that is it. So now I'm gonna go back and refresh our page And we can see that things are already starting to look a little bit better. Nicer font, uh nice background color. That image definitely needs to go, and we should probably have some sort of header, even even though we're not necessarily going to use the header.

Let's grab a nav bar here. And let's grab yeah, let's grab this orange one. So I'm just gonna copy and paste this whole thing and we can refactor this in just a moment. Just a moment. So paste that in there, save, refresh our page, and we have a header. So again, we don't have search, we don't have about pricing, none of these links are actually going to work yet, but we have something visually there to represent us. Next, let's go ahead and let's clear out this background image from this banner and let's make it something without text. So we don't have text on top of text. So I'm going to open up my admin panel, localhost 8000, one slash admin. Pages, edit our homepage, and let's change that image.

Now the image I'm going to choose I got from pexels. com. It's a fairly large image, it's 1. 4 megs, but because it's localhost, it's probably fine. But in production, you never want to use an image for a banner that's Almost uh megabyte and a half. That's just far too large. Okay, that's still pretty gross. So let's uh let's do a little editing here. We're not going to get into this too much, but uh yeah, let's get into this a little bit at least. So background size Cover, background, position, center, and center. So we can see this image is a little bit blurry, so let's go ahead and actually make that a little bit bigger And this just has to do with our cropping.

So let's let's do instead of fill, we're going to do a width of uh, I don't know, 1500, something like that. Okay, so the image is a little better I guess. That text is still hard to read. We can clean that up a little bit later. We're not going to do that in this video. That's entirely up to you because you might be using a different theme, different background image. Uh but this background image could obviously be darker as well, so so that this white text would actually show up. Alright, cool. So we got Something a little nicer look at. We also have a bunch of other stuff here. So in this theme it it comes with full bootstrap styling. So our links are styled differently. We've got block level link, different typography. We've got block quotes in here, tables

forms different types of navs so we've got tabs and pills pagination breadcrumbs indicators so alerts and badges uh we got progress bars We even have containers in here, groups, cards, all sorts of stuff in here. So all of this stuff is already styled for us. We don't have to worry about it. So moving on, we can just focus on the Wagtail stuff And all of our CSS will be styled for us. Now the last thing we need to do is we need to change this from navbar to whatever our site name is called. And then we're going to want to get rid of these links and the search. Now what I'm going to do is I'm just going to comment this out. Now, if you're using Git, you don't need to comment out anything because you can always just go back to a previous commit and look at what you had.

So I'm going to call this startup life. And our list here, I am simply going to comment out. And let's also comment out that form. Alright, good enough. We will come back to that stuff a little bit later. But for now, we have some sort of not totally ugly website. We have something to work with that doesn't look like whatever it is we were working with before. That's all there is to know. If you want to check out any other free bootstrap theme, you can go to bootswatch. com and they have a ton of different themes in here and you can explore them. Use whichever one you like. It doesn't have to be the one I'm using. Uh they're all very very similar. Bootstrap follows a similar pattern. If your nav bar is orange versus blue versus black, it doesn't really matter.

Because moving forward, the premise of this course with all these different videos for Wagtail is we're going to be focusing on Wagtail. So that's it. Thank you for joining me today on this super short video. And don't forget, if you like these videos, you can always hit subscribe, thumbs up, you can share it with your friends, family. Coworkers, your Slack channels, do whatever you like. Any sort of support is always appreciated. See you in the next lesson