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