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.
0:01
That part, not so much.
0:04
We want it to look like this, right here
0:06
with new releases, hot off the presses
0:07
and then a list formatted like so.
0:10
Alright, so first of all, it seems like I forgot
0:12
the little subtitle there, so let's put that in place.
0:17
So I want to have a little h2 and then a little subtitle.
0:23
Okay, get in there.
0:24
Those need some styling.
0:26
Alright, bolded, smaller, things like that.
0:28
But it's on the right path.
0:29
Come on down here.
0:31
Now if we look at this, it's going to be in the project list.
0:35
So we're going to use that along with h2, the subtitle
0:38
and the project pieces, just file that.
0:41
So do that again over here.
0:44
So the first thing let's target that h2
0:47
and set the font size to 24 pixels.
0:51
Font weight to bold, and the color to almost black
0:57
but not all the way.
1:00
Lookin' good, lookin' good.
1:03
Also our project list, and then we have
1:05
a little subtitle thing.
1:07
That was sort of italics there.
1:09
So we say font style, is that italic? Good guess.
1:14
Hot of the presses, that's in italics.
1:17
Okay great, the last thing to do
1:18
is to put these bits into those nice little boxes
1:22
and give 'em some spacing and borders and so on.
1:25
So these have just the project for the overall section
1:29
and there's a bunch of styles we want to set here.
1:31
I'll just paste those in.
1:34
So we're going to set the border.
1:37
Apparently I had that in there twice.
1:38
Set the border, the padding, and the background
1:40
the minimum height.
1:42
Set a margin at the top and bottom.
1:44
Let's see how that looks.
1:48
Oooh, looking much better, looking much better.
1:50
So the overall box, I think is ready.
1:52
That looks totally good.
1:54
And then the last thing to do
1:55
is to style those little pieces, right there.
1:58
So our project list.
2:00
Now this you can use just the starting characters here.
2:05
project.title.
2:08
In this one, we just want to set the font size to 20 pixels.
2:11
Make that a little bit bigger.
2:13
See how that affected it. Closer, closer.
2:19
While we're at it, let's go ahead and set that hyperlink
2:21
which is going to be project list.project.title
2:26
that contains the hyperlink.
2:28
I'm going to set it's color to be that value.
2:32
There we go. Startin' to look good.
2:34
Well, yeah just got to do a few more things
2:37
and then we're done. So project list.
2:44
The description, that's also italic, but not bold.
2:48
So we'll say normal. The font size is 16 pixels.
2:54
See how that description is comin' along.
2:57
Oh yeah, lookin' like what we're waiting for.
2:59
The last thing to do
3:01
actually I think the version looks okay.
3:03
The version is good.
3:05
So we're not pulling this data from anywhere
3:07
but we're more or less gettin' what we're after.
3:11
Excellent, let's do a quick run through.
3:14
Sure is lookin' really good.
3:16
This part is lookin' really good and this.
3:20
We still have the outer shell to build.
3:22
Right, we've got the navigation up in the top
3:25
and down at the bottom, we've got this footer thing.
3:28
So maybe we'll work on the navigation next.
3:31
But we are almost done with this page.