Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: New releases
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So first two sites is lookin' great. That part, not so much. We want it to look like this, right here with new releases, hot off the presses
0:08
and then a list formatted like so. Alright, so first of all, it seems like I forgot the little subtitle there, so let's put that in place.
0:18
So I want to have a little h2 and then a little subtitle. Okay, get in there. Those need some styling. Alright, bolded, smaller, things like that.
0:29
But it's on the right path. Come on down here. Now if we look at this, it's going to be in the project list.
0:36
So we're going to use that along with h2, the subtitle and the project pieces, just file that. So do that again over here.
0:45
So the first thing let's target that h2 and set the font size to 24 pixels. Font weight to bold, and the color to almost black but not all the way.
1:01
Lookin' good, lookin' good. Also our project list, and then we have a little subtitle thing. That was sort of italics there.
1:10
So we say font style, is that italic? Good guess. Hot of the presses, that's in italics. Okay great, the last thing to do
1:19
is to put these bits into those nice little boxes and give 'em some spacing and borders and so on.
1:26
So these have just the project for the overall section and there's a bunch of styles we want to set here. I'll just paste those in.
1:35
So we're going to set the border. Apparently I had that in there twice. Set the border, the padding, and the background the minimum height.
1:43
Set a margin at the top and bottom. Let's see how that looks. Oooh, looking much better, looking much better. So the overall box, I think is ready.
1:53
That looks totally good. And then the last thing to do is to style those little pieces, right there. So our project list.
2:01
Now this you can use just the starting characters here. project.title. In this one, we just want to set the font size to 20 pixels.
2:12
Make that a little bit bigger. See how that affected it. Closer, closer. While we're at it, let's go ahead and set that hyperlink
2:22
which is going to be project list.project.title that contains the hyperlink. I'm going to set it's color to be that value.
2:33
There we go. Startin' to look good. Well, yeah just got to do a few more things and then we're done. So project list.
2:45
The description, that's also italic, but not bold. So we'll say normal. The font size is 16 pixels. See how that description is comin' along.
2:58
Oh yeah, lookin' like what we're waiting for. The last thing to do actually I think the version looks okay. The version is good.
3:06
So we're not pulling this data from anywhere but we're more or less gettin' what we're after. Excellent, let's do a quick run through.
3:15
Sure is lookin' really good. This part is lookin' really good and this. We still have the outer shell to build.
3:23
Right, we've got the navigation up in the top and down at the bottom, we've got this footer thing. So maybe we'll work on the navigation next.
3:32
But we are almost done with this page.