Locked lesson.
About this lesson
Once you download and install the files for your theme, you can begin to make changes to personalize the design. In this lesson, we'll discuss how to modify the theme for your own needs.
Exercise files
Download this lesson’s related exercise files.
Modify The Theme To Suit Our Needs.docx57.4 KB 29 - Modify The Theme To Suit Our Needs SOLUTION.docx
59 KB
Quick reference
Modify The Theme To Suit Our Needs
Now that we've added the theme files to our Django project's static directory, we need to modify the html of the web page.
When to use
Do this whenever you use theme files that need to be accessed from a web page.
Instructions
Our theme comes with an html page, but the code needs to be modified. We'll need to go through and change all of the css references, javascript references, and image references to static tags like we learned how to do earlier.
Don't forget to use the "load static" tag at the top of every html page that will reference theme files.
Hints & tips
- {% load static %}
- Use static tags to reference any css, javascript, or image files in the theme
- 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.