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