#100DaysOfWeb in Python Transcripts
Chapter: Days 37-40: Introduction to Pyramid framework
Lecture: Design and hero images
0:00 I think it's time to create a little bit more design feel
0:03 and customize our site.
0:04 So, the rest of the time we're working with it
0:06 it feels really good.
0:08 We need to do two basic things. Over here on the layout
0:12 notice there's this copyright, pylons and what not.
0:15 Footer, I want to use a different footer
0:17 and a different title and so on.
0:20 So, I'm just going to drop in a new layout here.
0:23 Notice, that's a new copyright.
0:25 It links to our 100 Days of Web project
0:28 and it just says it's a demo.
0:30 Right, then it has our content and that's pretty much it.
0:34 Nothing else really has changed.
0:36 Let's run that and see what happened.
0:38 Okay, looks a little bit better
0:40 stuff's not starting in the middle of the page
0:42 it's going up a little bit higher here's our hero section.
0:45 The hero section has no styling
0:47 so it doesn't look very heroic but it's about to.
0:51 The other thing that we got to do
0:53 we're going to need an image for our heroes.
0:55 Let's go over to our static image section
0:57 and I'll paste in this one called finance.
0:59 If you want to look at it real quick it looks like this.
1:02 And by the way this image came from a place called Unsplash.
1:06 Unsplash has awesome, beautiful images.
1:10 I'm taking a moment and pausing to tell you about it
1:12 because images are so important in how your site looks
1:16 but often people either steal images, not a good idea
1:20 or they decide to just not get them
1:24 they use crappy clipart and whatever.
1:26 So here if I want finance for example
1:29 you can see there's all sorts of cool pictures
1:31 which I can use royalty free.
1:33 And then I don't see the one that I chose
1:35 but it's in here somewhere.
1:36 Right, so there's tons of things you can search for
1:39 that's where this image right here came from.
1:41 And we're going to use that in our hero.
1:43 Now just having it in that image folder does nothing
1:46 we have to add the CSS as well. Just like with the
1:50 SQLAlchemy, we've already spent a whole section on design
1:53 and CSS, so I'm not going to go through too much detail
1:55 but let's just look at a few highlights.
1:57 Changing the color of the body and the main content.
2:00 The main body's going to be like a gray
2:03 and the content is going to be white.
2:05 So that means our footer and stuff will be gray
2:07 but the main content will be a proper color.
2:10 And then here we're setting some stuff on the footer
2:12 and then finally the most interesting one
2:14 probably is the hero. We're setting a minimum height
2:17 setting a background image that covers it
2:19 and things like that. Let's see how it looks now.
2:22 Are you ready for the grand presentation?
2:26 Get rid of this. Here we go. Boom.
2:29 That looks good, right? That looks real good actually.
2:31 So here's our site
2:32 we just put a little more spacing around these things.
2:36 Put a little background on our H1 up here.
2:38 This is our hero, and our hero image.
2:41 See as we resize it it does what it's supposed to do.
2:45 So, here's our new design. That was pretty easy.
2:47 Oh, and let's look at the footer.
2:48 It's not the most amazing looking footer
2:50 but it's going to have to do for this.
2:52 I guess we could change the color just a little bit
2:54 but we have a little de-emphasized footer at the bottom
2:57 and we have our main content up here.