Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Final footer
0:00 Down here we're missing the footer.
0:03 That's what we're going to add next.
0:04 I think once we have that in place
0:06 this page will be basically done.
0:09 The footer's going to appear on all of the pages.
0:12 We're going to come down here and put that
0:16 I think we want to put it in this section here.
0:18 We're going to use a footer tag.
0:20 This is HTML5, after all.
0:22 I'm going to say div.copy. Copyright.
0:26 Put that in here. We'll just something like
0:28 "This is a fake site." Alright.
0:32 So we'll just put this
0:33 "Hey, this is a fake site.
0:34 It's meant to simulate the real one.
0:35 Go check that out if you actually want something.
0:38 And it's ours." Okay.
0:40 Let's do a little refresh and see what we get. Hmm.
0:44 Not exactly what we were hoping for.
0:46 Let's put a little style in there.
0:49 I want to apply this style to the footer
0:51 the width. At 100%
0:54 just to make sure that it totally stretches
0:56 the padding.
0:58 Want nice, big bold spacing down here
1:00 so I have 30 pixels all the way around.
1:05 Text-to-line is going to be center.
1:08 Color it's going to be white.
1:10 Background color 006.
1:14 Notice that it's finding this in the style sheet
1:16 and saying, "Here is one you've already used.
1:18 If you want to be consistent just grab that."
1:20 That's pretty cool. How're we doing?
1:24 Oh, yeah. There we go.
1:26 Go back to our About. Refresh that.
1:29 Probably need a little padding but, you know
1:31 it's more or less working across
1:34 the two places here. Looks good. Looks good.
1:37 Let's do one more thing.
1:38 Let's add a margin on top of that
1:40 just so we have a little more space. Margin top.
1:43 Let's put that at 50px. There we go.
1:47 This one was okay more or less. But, there we go.
1:50 That's a little bit better. Still a bit tight
1:52 but I think that's okay. The final thing to do
1:56 let's go and actually set the background
2:00 of our whole thing up here to this. Now
2:08 we still want to leave that white here.
2:09 That'll make our footer sort of fade all the way
2:12 to the bottom. Even on these short pages.
2:15 We have page. This page content id thing here.
2:24 That's background color. Set to be white.
2:27 Just like that. Here we go.
2:31 Now, it looks like the way we want it.
2:33 Oh! Alright, great.
2:35 All the main page content is going to be white
2:37 but not matter how tall the site is
2:39 our little footer thing will fade through the bottom.
2:43 Quite nice. Now, I do want to work on this page
2:47 project/requests. This one
2:51 here's what it's supposed to look like.
2:53 It's supposed to have all this great detail here.
2:56 We're going to put this in place
2:58 but a lot of these things are hard to do
3:00 until we actually have some data.
3:02 Let's come back to this when we get to the
3:03 SQLAlchemy section in our... Finish that up.
3:06 We'll build out this page here. Alright.
3:09 Just looks basically blank
3:10 but we don't have any data to fill it.
3:12 It's a lot easier to do when we actually have
3:14 that data. But it looks like the overall site design is
3:18 off to a really good start.