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