Modify The Theme To Suit Our Needs

Quick reference

• 00:04 Okay, so we've got our theme files downloaded and sort of installed.
• 00:08 If we go to our static folder here, we can see these new folders that we created in
• 00:13 the last video, img, js, scss, and vendor.
• 00:16 And we've got this index.html file, but we haven't actually saved it yet.
• 00:20 So let's do that now.
• 00:21 So let's head over to our templates directory and let's create a new file.
• 00:28 And let's go file Save As and let's just call this resume.html for now.
• 00:34 And head over to our index.html page, right click and click Select All, and
• 00:39 then right click Copy.
• 00:40 And then just head back over to our resume.html page and right click Paste.
• 00:45 And then go ahead and save this.
• 00:48 So, now we can get rid of this index file, we don't really need it anymore.
• 00:52 Now this is actually a kind of interesting theme.
• 00:54 This is a one page theme so
• 00:56 we really don't need to extend our base at all, right?
• 01:00 We will need to load our static, so let's copy this tag and
• 01:05 let's put this right at the top.
• 01:07 So we'll load our static.
• 01:09 And if we look at our home.html page, we don't really need our block content
• 01:13 because we're not going to pull in the base page.
• 01:16 We're just going to use this page as it is.
• 01:19 So let's go ahead and save this, but
• 01:22 remember we need to add this resume.html page to our app.
• 01:26 Because a webpage is always a three part process, you have to have a template,
• 01:32 you have to have a URL, and you have to have a view.
• 01:35 So let's go to our URL, so we want to be in resume.
• 01:38 And then let's kind of close some of these because it's hard to navigate.
• 01:43 urls.pi and I'm just going to copy this one,
• 01:47 Copy, come down a line and right click Paste.
• 01:52 So instead of about.html, we want this to be resume.html.
• 01:56 And we want it to point to views.resume and we want to call it resume.
• 02:03 Okay, so go ahead and save that.
• 02:04 Now we need a view.
• 02:05 So head over to our views.py and I'm just going to copy one of these,
• 02:10 it really doesn't matter which.
• 02:13 And let's paste it in and
• 02:16 we want to call this resume and we don't need this.
• 02:21 And we want to render resume.html and
• 02:24 we don't need to pass in anything right now if at all, okay?
• 02:29 So let's save this and let's head over and check.
• 02:32 Now this is not going to work yet, but we can actually point
• 02:37 to resume.html and we're going to get this, right?
• 02:41 So this is a start, right.
• 02:44 But it does not look at all like this and we can go ahead and close this.
• 02:50 So why is that?
• 02:51 Well, if we come back over to our code and
• 02:55 look at our resume.html, and just start to look through here.
• 03:00 There's all these links to for instance, this css.
• 03:04 But we know to add CSS to our app, we need to use a Django tag, so
• 03:09 let's start to do that.
• 03:11 We remember how to do that, we just call static the name of the thing.
• 03:17 And that's just this thing right here.
• 03:21 So we can paste this in, but we need to add a resume to the beginning of it.
• 03:27 Because remember, it's in our static resume directory,
• 03:32 and then vendor, bootstrap, CSS, etc.
• 03:36 Now this is an external Google one, so we don't need to change it.
• 03:40 This is another external Google one.
• 03:42 This is a vendor one again.
• 03:44 And this is just what we're going to have to do.
• 03:46 We're just going to have to kind of go through here and add these things.
• 03:52 So static, and then we could just copy this whole thing,
• 03:57 Ctrl+C to copy, Ctrl+V to paste.
• 04:00 Don't forget to put a resume in front of it and spell it right.
• 04:05 And we can do the same thing here.
• 04:10 I'm just going to start to copy each of these
• 04:14 things resume/ Closing tag.
• 04:22 Okay, stylesheet.
• 04:24 And let's see, this looks okay, but here we have an image.
• 04:28 So again paste in our static tag.
• 04:31 And this is going to be resume/img and then close that.
• 04:40 And this is just sort of tedious work, but just come through here we're almost done.
• 04:48 Now we could just go down to the very bottom where there's some JavaScript
• 04:52 references.
• 04:53 Probably, yep, down here.
• 04:56 So again, resume/vendor/whatever closing tag.
• 05:06 Same thing for this guy, resume/vendor and
• 05:12 at the end close our tag.
• 05:16 And this one too, resume/ close our tag.
• 05:21 Almost done, one more, boom,
• 05:25 resume/ that's not that bad, right?
• 05:32 Close our tag and that should be it.
• 05:35 Let's go ahead and save this and hopefully fingers crossed.
• 05:38 If this all worked, we can come back here and hit reload,
• 05:41 and boom, it looks like it did.
• 05:43 So if we click on this, it scrolls in a very JavaScript the way, so
• 05:47 we know the JavaScript stuff is working.
• 05:49 If we click here, it goes back to the top.
• 05:52 These things are links to external stuff.
• 05:55 So very cool.
• 05:56 So now all that′s left is to sort of add our own picture,
• 06:00 add our own text and stuff.
• 06:02 If we have our own LinkedIn profile and
• 06:04 all this stuff, we will put links to those things in there.
• 06:06 And we′ll start to look at all of this and
• 06:09 modifying it to suit our needs in the next video.

Lesson notes are only available for subscribers.