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
0:01
a little bit of tearing down.
0:03
Okay, so over here, we've got our CSS in place.
0:06
For our layout, let's just do a quick tour.
0:10
We don't want all of this stuff.
0:12
We want to have more control, right?
0:13
This says every single page is going to have this stuff up here
0:17
and then, somewhere in the middle you'll have
0:20
you know, this inside of a 10, 10/12ths segment
0:25
a 5/6ths segment, you getta put your content
0:27
and we don't want that. We want this to be
0:33
having much more control here.
0:35
So we'll do something like this.
0:37
See where we're getting with that?
0:40
Better. Not great, but better.
0:44
We're here in the content, we're just going to have Home.
0:47
Don't know if we're going to end up using that Home CSS
0:50
but we'll leave this part for here for now.
0:52
It just says Home. I notice there's a lot of this
0:55
design stuff from the theme coming in here
0:58
and we want to go and start rolling some of that back.
1:03
Now, one thing we can do here is
1:05
I would like to keep a lot of the theme
1:07
that is already applied to this site
1:09
but, I don't like the red. I don't like this
1:12
huge margin up here, and things like that.
1:15
So, I want to put them back.
1:17
We could go and start working on the theme itself
1:20
one possibility. Another one, something I like to do
1:23
is when I'm getting started is I come over here
1:26
and I would maybe make a new style sheet
1:28
called Theme Overrides, and what the idea is
1:32
we're going to include that after the Theme up at the top
1:40
and into this section, we're going to put just a bunch
1:42
of changes that override some of the settings
1:44
that we don't like from the theme.
1:46
Alright, instead of typing this out, there's quite a few
1:48
let me just paste them and we'll review them. Okay?
1:51
So, in the body, we want the color to be mostly dark
1:54
and the background white, instead of having all the
1:56
padding and being red and so on.
2:00
Again, the font content of many things
2:03
we're going to reset here, but from the theme
2:05
so the colors are being set
2:07
you can see black and blue for some of the elements.
2:13
A lot of this is just color or underlying changes
2:16
really, really simple.
2:17
We're going to get to the nav bar in a minute
2:19
that's a bootstrap thing that we're going to use
2:21
so there's some changes to just change the color to match.
2:25
These change the color to match pi PI, not the default
2:29
so that's fine, and then here we've just
2:31
sort of reset the margin.
2:33
Okay, so let's see how we're doing now.
2:35
Here we go, something pretty white and clean and plain.
2:40
So let's try and go to work on this page next.
2:43
We're going to try to get this section in.
2:46
Some of this stuff here, these two pieces
2:49
and, actually, this is the real live one.
2:52
We are just going to have one column here, just to keep things
2:55
simple, so our data doesn't get too complicated.