Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Mix in the theme
0:01 Here we are back in PyCharm. And this is our master layout page.
0:04 What we want to do is we want to bring in the common elements, files actually,
0:09 from that landing page theme that we were just working with.
0:13 So over here, we have our CSS, we are going to be using Font Awesome.
0:18 Now, I believe I already installed Font Awesome here, yes I did, using Bower
0:22 so I am not going to use their copy of Font Awesome.
0:25 Remember, Bower lets us track for updates and automatically update and things like that,
0:29 they have some fonts, this actually comes from Bootstrap itself,
0:33 so we are not going to need to do anything for that, we have some images,
0:36 we are going to bring those over initially,
0:39 and then we are going to throw them away because I don't think we are going to use any of their images.
0:42 We are going to use index.html to basically build our master page
0:47 as well as our home/index.pt file, we'll take the common look and feel,
0:53 we'll put it in the master, we'll take the inner bits
0:56 that are just the landing page, we'll put that into index.pt.
1:05 So, let's just start deleting stuff until we get it down to what we actually need,
1:10 so here is CSS, we don't need that, in fact all we need is this landing CSS
1:14 and this index.html, and the images.
1:18 So that's really nice. Let's go over here to our CSS
1:21 and we'll just put the landing page in here, I can copy from finder into PyCharm,
1:26 that's pretty sweet, so we got this,
1:29 and we are going to need to include that of course,
1:31 so let's go up here and we'll include that right at the top up here.
1:38 So there is our landing page and don't forget to update it over here,
1:42 or otherwise that little cache stuff will no longer work,
1:45 we are not going to change that page much, but nonetheless.
1:49 You don't want to get caught with the stale CSS,
1:51 so we have this, and we are going to need our images,
1:54 and now I am going to make a folder just so we know like what to keep clean
1:57 so I'll call this "theme", remember, we are going to mostly throw these away,
2:01 but I'll put them here for now because we want to get the site looking like the theme,
2:05 and then like what we are looking for, OK, so I'll put these over here,
2:09 of course, we are going to have to patch up the HTML,
2:12 speaking of HTML, let's go and look at that. So we can come here,
2:16 we can see, depending on your experience with HTML how easy it is to go
2:20 OK this matters, this doesn't matter,
2:22 all of this stuff we already have all of that here,
2:25 so if you look, here you can see we have all those things, all the title, the author,
2:30 let's change that and I suppose I don't really care for taking credit
2:34 but I don't want really to give credit to someone else, that would be weird,
2:37 so let's just start deleting, I think maybe it's not the safest
2:40 but it's the clear so landing page is out, we have Bootstrap,
2:44 the order matters, so Bootstrap first, let's double check we are doing that up here,
2:48 we are of course, we were already, so there is Bootstrap,
2:51 we're going to go back here and see what else we've got, now look,
2:56 they are including this Google APIs font, so there is a cool place I think it's
3:01 fonts.google.com, yeah, and Google has a bunch of great fonts that you can use,
3:08 you can include them into your web page and so on
3:11 but they come down in many different formats and varieties
3:14 and it's easiest just to link directly into them and that's what this theme is doing,
3:19 I don't know where the fonts appear on this page but we are going to put this,
3:25 and you can see they're also doing the fonts from Font Awesome.
3:30 Let's make sure those both get in here
3:32 but we are going to have to of course change Font Awesome a little bit.
3:35 So we'll go over here like this, organize it, so we can keep track,
3:38 now we are not going to go to relative Font Awesome
3:41 in fact, we are going to go to /static/, this is easier, bower, font-awesome
3:51 we'll just copy the path and then we'll have to fix it
3:54 because it's going to have my full path,
3:56 we'll go back here and it's top of the static that we're looking for,
4:00 alright, so there is our Font Awesome,
4:03 and we've got the Google fonts here in HTTPS,
4:06 sometimes you'll see this written like that,
4:09 which means use whatever scheme to access the fonts that you have here
4:14 so on a basic HTTP go to HTTP Google,
4:18 if you are in encrypted page will do HTTPS, we'll just leave it though.
4:22 Alright, I think we have the CSS integrated.
4:25 Let's go back and we'll just keep chipping away at this sucker
4:28 until it looks like the way we want, so that's done,
4:30 we already have this working, so the head is done,
4:34 we again have the English language set and HTML 5 DOCTYPE,
4:39 now they have a navigation bar over there let's go and just take this,
4:43 and we'll fix that up, so down here we have our little navbar but remember,
4:48 this is not the Bootstrap one, this is just a cheesy one I threw in here,
4:51 we did our Bootstrap one in a separate file
4:55 so let me just keep this here for just a minute so we can copy the pieces
4:58 that we are going to need for our links, OK,
5:01 so we'll come up here, all this stuff is just about the little collapse responsive design,
5:06 so we can forget about that, this is really what we're after,
5:09 we need some "lis" with some references in them,
5:17 OK, I have moved those pieces around so we have exactly what we had
5:22 in the previous page other than I drop the full long home path there.
5:26 Let's look at our target to see where we're going
5:29 so we can have it look more like that.
5:31 So we have albums, "book us", and let me just actually copy the path here,
5:36 so we have home, let's forget this for a minute.
5:40 OK, great, so now we have what we are aiming for in the final design here,
5:45 now notice, I think "book us" is not going to work.
5:48 So now you can see I have basically the navigational items
5:51 that we are aiming for in the final one, right,
5:55 we don't have to get this perfect, we're just going to get it mostly working
5:58 and I think "book us" might not work yet, I'm not sure.
6:01 We can at least get the structure the, navigation in place.
6:04 So, let's go up here and see how we're doing, so far so good.
6:07 Now if we go down here, this part is "about", this is the landing page,
6:13 this is actually the title, this is the content of the homepage.
6:17 So let me start collapsing stuff because
6:19 we don't want that in our general layout, right,
6:22 the general layout is for all the site, not for the homepage,
6:24 we are just going to start collapsing these little sections until we get to a section,
6:28 this one, we want to make sure we have the footer,
6:31 at the end, so let's take this footer and bring it out,
6:34 and notice we have jQuery and Bootstrap, but I think we have that already,
6:38 so now we go down past our navigation, here is the main content,
6:41 the stuff we left in index.html it's going to go here but not in this page,
6:45 it's going to go into index.pt.
6:48 Now, after that of course, we are going to have a footer.
6:51 A proper HTML 5 footer that is, and for now I am going to leave it
6:55 looking like things look here.
6:58 OK, we have jQuery, we have Bootstrap,
7:01 and we even have a spot for our additional stuff when we want it.
7:04 So I think things are OK, we are going to be missing a few images,
7:08 but we don't have any content yet.
7:11 Let's go and run this and just see how things work, OK?
7:14 I'll just change the title while we are at it up here,
7:15 this is going to be the Blue / Yellow Rockets, I think I had spelled it like this,
7:21 are you guys ready to see what happens? Let's go.
7:25 I'll put it over into Firefox.
7:28 Well, we're getting somewhere, we got a few things that we need to work on, right?
7:33 That doesn't look great, we do have these elements up here
7:37 and we did actually set their color to be black or something,
7:40 so now we are going to need to start working on this page.
7:45 This is kind of how it goes, you know like oh that looks sort of like something,
7:48 but not so much, so first thing we don't want a default light navbar,
7:54 we want an inverse, navbar-inverse, so we refresh this,
7:59 that's closer, let's look over here,
8:04 I like for the navbars to be extra dark and so we can keep them in place,
8:09 so they stay in place, and they kind of stand out over the various colors of black,
8:13 so we can go and work on that, but what you've seen so far
8:17 is how to bring this template into our page, let's go ahead and do one more piece,
8:22 let's go ahead and finish bringing in the main content,
8:25 here you can see we've got something there,
8:27 there is a bit of a top bar being stuck in a weird way there
8:31 like there is this overlap and we can easily solve that,
8:34 but let's just finish bringing in the main elements of the page,
8:37 so this is everything that goes into the shared layout.
8:41 We are going to need to of course redo the footer text and so on, it's not quite right,
8:45 but, everything else that you saw here, from there upward,
8:51 all of that is only specific to the home page, it's not specific to the entire site
8:58 so where does that go? Let's close this stuff, actually, I am going to need this again in a minute,
9:02 that goes in home/index, right, that's our homepage.
9:05 And so what goes there is this, and just for a minute,
9:09 I am going to do a couple of "brs", just so we can see it because remember,
9:12 that the navbar is over top, we'll fix this but let's drop it like this.
9:15 Now, here, I am sure there are many images that are not working,
9:19 for example, here, let's go and fix that,
9:23 so this is going to be /static/image/theme, like that.
9:29 Let's double check, static/image/theme OK, cool.
9:35 And let me fix these over here, there is a few more, the dog, of course,
9:40 the dog is good but the dog is there;
9:43 the phones are good, but the phone's over here.
9:45 OK, everything looks good.
9:47 Now, it looks like this is going to work, but what may be the most important feature
9:51 is actually missing, let's reload this and see what we got.
9:54 OK, well, there is the landing page, and alright, look at this!
9:58 It's coming along very well actually.
10:01 Remember that cool big landing thing right here, with a little pencil,
10:04 the guy and the pencil being creative or something, glasses mean creative,
10:08 we're missing that and where does that come from?
10:10 Well, it turns out that over in the CSS, it's actually referring to the file right there.
10:16 So just like all the other files, we need to appoint to where it goes.
10:20 Now, it should be in good shape, ta-da, there we go, beautiful.
10:24 Now there is some weirdness about the body having padding and stuff,
10:28 because we're mixing our old design to the new design.
10:31 What I am going to do next is we are going to go through
10:34 and try to make this look a little better, we need to do some work up here
10:37 and we need to do some work on the padding and whatnot.
10:40 You can see how we've taken this theme from, this time we started with Start Bootstrap
10:46 of course, I said if you want a premium one, they have premium ones here,
10:49 they have great premium ones at Wrap Bootstrap as well, we talked about that,
10:52 we've taken this one and in just a few minutes we've migrated into our site
10:57 and our site looks sort of like we wanted.
11:00 Obviously, we want to use different pictures,
11:03 we want to have different horizontal slices, but the actual hard work is done,
11:08 the hard work that remains, is not web design, the hard work that remains
11:13 is actually selecting the pictures, writing the copy that is really compelling,
11:18 what is the story you've got, you know, 30 seconds or 15 seconds
11:22 to tell everybody what you are about, how do you do that, that's where the hard part is.
11:26 But, you know, that's up to your business, you will have to that yourself,
11:29 we'll go and move all the other pieces and sort of make this our design
11:33 by copying over our goal into this site, in the next video.