Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: The bare site again

Learn more about this course
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.