Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Make the theme fit your layout
0:01 So you've seen we did a pretty good job bringing this theme into our site.
0:04 There are things that are not great, so for example this border and so on,
0:08 the multiple colors up here, the height, there is a lot of things
0:13 that we might want to change about this theme,
0:16 so let's go and tweak it so it feels much more like the design that we're hoping for.
0:21 Just to remind you, what does that look like,
0:24 that looks like... this.
0:26 It didn't have to match it perfectly, but it has to be sort of where we are going.
0:31 Let's try to make this fit the best it can with the current design,
0:34 then we'll start bringing in our elements.
0:36 So I want to put the changes required for making this site feel like ours,
0:41 into two places, the stuff that is going to affect the _layout, that is going to affect the entire site,
0:47 I am going to go and just put it right in here,
0:50 the stuff that is only relevant for the homepage
0:53 because the homepage is going to be fairly styled up, relative to the rest of our site,
0:59 I am going to actually create the CSS page for that.
1:05 Alright, so here is our home.css, let's go over here and let's add that in.
1:10 Now remember, we added this little section for additional CSS,
1:14 it's exactly what we need, let me just copy what we got up here,
1:17 so I don't have to type it out again, so down here we're going to put home,
1:22 this is blank right now, so it will have no effect but it's going to be all lined up,
1:27 now this is at the bottom but remember, it fills a slot which is at the top, so that's all good,
1:32 let's just make sure everything is holding together,
1:34 if we refresh, do some view source,
1:38 it looks like I had misspelled this
1:42 yeah, here we go, alright so now you can see we have our home section
1:46 and now we have our custom CSS that our home page is adding back as well,
1:51 it's empty so there is not much to it, but it allows us to kind of go crazy,
1:56 not worry about messing up the rest of our site, like I said,
2:00 I find the landing pages usually have a lot of styling done to them, relatively speaking.
2:03 What else is funky, like what is this white space on the left?
2:06 We could use our developer tools to find out.
2:10 So it looks like this main_content here has this padding,
2:13 if we could take away, oh wouldn't that look better? Heck yeah, OK,
2:17 So this is from site.css line 6. Thank you Chrome for telling me that,
2:22 so over here, on line 6, we don't want that anymore, do we,
2:26 let's make it actually super explicit, main_content has now no padding,
2:31 when we refresh it,
2:33 oh yeah, it's coming along, it's looking better.
2:36 Next, let's work on this stuff up here, why is this black and that's not black?
2:42 So let's look and figure out why it has a color, whatever it does.
2:47 I see, so we're setting this .nav to have some various properties,
2:51 that the rest of the navbar doesn't.
2:55 So let's actually go up and let's just apply this a little bit higher,
2:58 I mean, we have two options, one, we could say you know what, forget this,
3:02 we could even tone down the fonts but I don't mind them being that large,
3:06 but, we could say turn this off and just accept the gray color or if we want black,
3:11 let's suppose we do, we want to just apply that a little higher.
3:16 So up here, it's really the nav-inverse that is setting the color,
3:20 so we are going to go back over here,
3:27 right here, let's do this.
3:30 And we'll just say background-color, let's see what they have here.
3:33 Sometimes it's helpful to actually just go and you can see because it's got
3:36 a border color a background color, you can just copy this, and drop it in here
3:41 and then we can change it, so while I am a big fan of the 222,
3:46 I want to use 000 for that, let's see what the border color means for us,
3:50 oops, did I save this? Oh, there we go, I forgot my . (dot)
3:56 I must have missed that when I copied it, OK, now it runs,
3:59 OK, this is good, fiddling with that gets us pretty close.
4:03 Instead of spending more time tweaking it, let me just drop in another CSS file,
4:07 and we can talk about it.
4:10 So offline I created this thing called navbar,
4:13 it sets the border radius, we talked about that earlier,
4:16 it sets the actual height of the branding image which we'll have in a moment,
4:20 what it does if the text has to wrap, as well as a few other elements.
4:27 Now of course we want to include those, and so I mean nav here, nav there,
4:34 so we've got this lined up pretty well, let's do one final thing
4:39 let's go over here and we have these "brs" that we threw in when we had the weird layout,
4:44 and that was just to hold them for a minute.
4:47 Now, we have our navbar looking pretty solid,
4:50 we can go check her albums, there they are, we can check out book us,
4:54 that one we haven't written, contact, we've written that, sort of,
4:57 of course we are going to need to something a little more interesting here.
5:01 In fact, I think this is going to be the problem throughout the whole site,
5:05 so let's go and try to address that in, let's go put in the site,
5:10 so that has to do with this main content section here,
5:14 so let's go down here and add a margin-top to this,
5:18 and let's say 50px, see if that is sufficient, I think it is,
5:22 this, however high this is, we probably want the margin to be that high.
5:29 And it tells us here the height is 51 so you know, why not, let's say 51 I guess.
5:35 There we go.
5:37 So now as we click around, except for pages that don't exist,
5:41 so if we click around, you can see this fits right to the top.
5:45 Maybe for the pages we want to actually give it a little more of a margin or whatever,
5:49 but this is looking pretty good, now, the last thing about the navigation up here
5:53 is this Start Bootstrap, that is not what this is about, is it?
5:57 Let's see what were we supposed to say, Blue / Yellow Rockets, like this.
6:02 Right, so let's go and add that, again, let's go up here in the brand section,
6:08 so here we have that part, and I was going to paste this thing in,
6:12 we are going to drop that, I was going to say Blue / Yellow Rockets
6:17 I don't know if I've got our image or logo yet, it does not look like it,
6:21 so let's start bringing in some of our images.
6:24 So here we have our logo let's go and throw in the hero on as well,
6:29 and we'll put those into images.
6:32 Now, if we run it again, it won't quite look like what we were going for,
6:35 but let's have a look.
6:38 OK, there we go, we've got that, now,
6:41 we need to do something about that layout, don't we.
6:45 The fonts are too big, or something to that effect,
6:48 so we can deal with that in a second, but this is looking good almost,
6:51 except for we were aiming for having colors right here as well.
6:56 So if you look, these have yellow foreground, blue foreground,
7:00 so let's add that into our site down here, so that's the official Python,
7:07 something close to the official Python yellow and the official Python blue,
7:11 so if we go over here and look again, there we go.
7:17 There is our Blue / Yellow Rockets. Of course, all of these fonts are too big,
7:21 so let's change the font size of those to see what we get here
7:25 and over in site we have our old nav settings about the navigation fonts
7:31 let's take that out, we don't have them indicated twice, that's just weird,
7:36 OK, there we go, we've got that, I guess the final thing is
7:42 we probably want to push these down a little bit
7:45 and then we can call our navigation done.
7:49 So if we set the padding top to be 10, I think that's going to line up pretty well,
7:53 let's get it over and see what we're going to get.
7:59 And maybe 8 is better.
8:04 It doesn't sound like much but sometimes that's all the difference,
8:07 so all we want to set this padding top, which we already had been fiddling with,
8:12 over here, let's set that to 8.
8:17 I think we can call this done.
8:20 Here we go, maybe we want to change the fonts a little bit, and so on,
8:23 but I think this is close enough for us to work with,
8:27 that's what I am going to call our navbar for this site,
8:30 maybe on a real professional thing you would keep them going,
8:33 but for this demo app, I think it's good enough.