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.
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.
