Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: The bare site again
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's start her building by doing a little bit of tearing down. Okay, so over here, we've got our CSS in place.
0:07
For our layout, let's just do a quick tour. We don't want all of this stuff. We want to have more control, right?
0:14
This says every single page is going to have this stuff up here and then, somewhere in the middle you'll have
0:21
you know, this inside of a 10, 10/12ths segment a 5/6ths segment, you getta put your content and we don't want that. We want this to be
0:34
having much more control here. So we'll do something like this. See where we're getting with that? Better. Not great, but better.
0:45
We're here in the content, we're just going to have Home. Don't know if we're going to end up using that Home CSS
0:51
but we'll leave this part for here for now. It just says Home. I notice there's a lot of this design stuff from the theme coming in here
0:59
and we want to go and start rolling some of that back. Now, one thing we can do here is I would like to keep a lot of the theme
1:08
that is already applied to this site but, I don't like the red. I don't like this huge margin up here, and things like that.
1:16
So, I want to put them back. We could go and start working on the theme itself one possibility. Another one, something I like to do
1:24
is when I'm getting started is I come over here and I would maybe make a new style sheet called Theme Overrides, and what the idea is
1:33
we're going to include that after the Theme up at the top and into this section, we're going to put just a bunch
1:43
of changes that override some of the settings that we don't like from the theme. Alright, instead of typing this out, there's quite a few
1:49
let me just paste them and we'll review them. Okay? So, in the body, we want the color to be mostly dark
1:55
and the background white, instead of having all the padding and being red and so on. Again, the font content of many things
2:04
we're going to reset here, but from the theme so the colors are being set you can see black and blue for some of the elements.
2:14
A lot of this is just color or underlying changes really, really simple. We're going to get to the nav bar in a minute
2:20
that's a bootstrap thing that we're going to use so there's some changes to just change the color to match.
2:26
These change the color to match pi PI, not the default so that's fine, and then here we've just sort of reset the margin.
2:34
Okay, so let's see how we're doing now. Here we go, something pretty white and clean and plain. So let's try and go to work on this page next.
2:44
We're going to try to get this section in. Some of this stuff here, these two pieces and, actually, this is the real live one.
2:53
We are just going to have one column here, just to keep things simple, so our data doesn't get too complicated.