Locked lesson.
About this lesson
In this lesson, we'll continue to modify the theme being used in your Django project.
Exercise files
Download this lesson’s related exercise files.
Modify The Theme Part 2.docx57.5 KB Modify The Theme Part 2 - Solution.docx
56 KB
Quick reference
Modify The Theme Part 2
The last part of modifying a theme for use is to go through the HTML of the webpage and simply add whatever content you want to add.
When to use
Do this when using any theme.
Instructions
Open the HTML of your resume.html file in Sublime text and add whatever content you like. First, swap out the original headshot image with your own. Then go through the resume content and replace the dummy text with your own resume information.
Hints & tips
- Be sure to swap out the original headshot image with your own.
- Add your own resume information to the web page, replacing the dummy text that came with the theme.
- 00:04 Okay, so we've got our resume working, the template works.
- 00:07 Now we want to kind of modify it a little bit and
- 00:09 the first thing I notice is this picture.
- 00:11 Let's go ahead and get rid of that but first, let's right-click, and
- 00:14 click View image.
- 00:15 And you'll see up here at the top, it's a JPEG that's 500 by 500 pixels.
- 00:20 So if you want something that looks good here,
- 00:23 you're going to want to use an image that's about 500 by 500, or,
- 00:27 proportional 100 by 100, 200 by 200 will probably look okay but
- 00:32 aim for 500 by 500 if you want to be sure, so I'm going to minimize this.
- 00:37 I have an image right here.
- 00:38 So let's head back over to our code and let's go to our static>resume>img folder,
- 00:44 and we can right-click here and there's the image.
- 00:48 And let's right click and Open Containing Folder, and
- 00:51 that opens the folder where this thing is sitting.
- 00:53 So if I minimize this, I can drag this over here.
- 00:57 Now I'm just going to delete this and I'm going to rename this profile because
- 01:01 that's what it was called in the template, okay?
- 01:03 So now we almost are probably good to go, we can see there it is.
- 01:08 You can come back over here and hit reload and it should work, okay, but
- 01:12 if it doesn't, head back over to your terminal and
- 01:14 Ctrl+C to break out of the server, and then just run the server again,
- 01:18 sometimes with images when you add new images you have to restart the server.
- 01:23 Okay, so we've got our image and that's cool.
- 01:25 Click here, click on the image it goes back to the top.
- 01:28 So now we want to start to modify the stuff to make it our own.
- 01:33 So let's head over to our code and go to our resume.html, and
- 01:36 then just come through here and start modifying.
- 01:39 So here's the title.
- 01:41 I might change this to John Elder's resume, whatever.
- 01:48 Come down here and instead of Clarence Taylor, I want it to be John Elder.
- 01:53 And you can change the links on the left hand side if you want,
- 01:58 to say different things.
- 02:00 And here I'm going to go John and Elder and then just,
- 02:06 come through here and modify these things.
- 02:11 So if we look here, you might not want your email or
- 02:13 phone number listed on your resume.
- 02:15 So if not, you could just find the phone number and
- 02:21 the email and delete them.
- 02:24 I live in Las Vegas,
- 02:29 Nevada, 89137.
- 02:34 Let's call this 12345 Elder Street and
- 02:39 just come through here and start changing things.
- 02:44 So I'm going to Ctrl+S to save this.
- 02:47 Now if you have LinkedIn profile, a GitHub profile and a Twitter page, for
- 02:51 instance, you can add links to those right here.
- 02:54 You know, for instance, I have a GitHub account, it's github.com/flatplanet.
- 03:01 No, I don't think the world is flat, I just find it hilarious some people do.
- 03:05 So we can go ahead and save this.
- 03:07 And click reload, now it says John Elder.
- 03:11 If we click on the GitHub thing, it actually goes to my GitHub account.
- 03:15 That's cool.
- 03:16 And that's how you add those things, right?
- 03:18 So just come through here and change these things.
- 03:21 So whatever jobs you've had, just go through here and
- 03:25 eyeball it, and kind of instead of senior web developer,
- 03:28 maybe you were a junior web developer so, change it to junior, whatever.
- 03:32 Maybe you're not a web developer at all, whatever you've done in your resume,
- 03:37 just sort of add these things and notice here are the dates for each thing.
- 03:41 So modify those to put your dates.
- 03:43 Come down here.
- 03:44 The only other thing that's kind of interesting are these programming
- 03:47 language things.
- 03:48 So let's look at that, it's skills I think it's under, yeah.
- 03:51 We have these cool little icons, maybe you don't know these things, so
- 03:54 you want to get rid of those.
- 03:56 You could do that or you could keep them or whatever.
- 03:59 Workflow, different things you can do.
- 04:02 Interests, a little paragraph for that, if you've won some awards,
- 04:06 notice that they each have little trophies next to them.
- 04:09 That's kind of cool.
- 04:10 If we look at that.
- 04:11 These are just icons probably.
- 04:13 Let's see, where are they?
- 04:15 Yeah, these things right here, fa slash trophy.
- 04:19 Where are those icons?
- 04:20 Well, they're sitting somewhere in our static folder,
- 04:25 maybe in vendor> fontawesome>webfonts,
- 04:30 maybe yeah, fa fa maybe it's in there.
- 04:34 Anyway, if you're interested, you can poke around and, and learn that.
- 04:38 So that's very cool.
- 04:38 So we're calling this resume.
- 04:42 If we wanted to make this, the main page of our website, for
- 04:45 instance, we could get rid of our homepage completely.
- 04:49 So let's do that, let's just delete the homepage.
- 04:52 So let's head over to our resume directory or templates, and
- 04:57 then just right click on home and click Delete.
- 05:01 Now we can head over to resume and let's go Rename.
- 05:06 And down here at the bottom of the screen, we could just type in home.html.
- 05:11 That's cool.
- 05:12 Now we can go to our views.py file.
- 05:14 And we don't need to import this stuff anymore.
- 05:19 And we're not passing anything into our context dictionary anymore,
- 05:23 we can get rid of that.
- 05:25 And we don't need this resume function because we just renamed it to home, so
- 05:30 if we save that.
- 05:31 And finally if we come to our urls.py file, we can get rid of this resume URL,
- 05:35 we don't need that anymore.
- 05:37 Come to our new, our old homepage, it becomes this page right here.
- 05:41 Very cool.
- 05:42 Now if you wanted to reference that other about page that we used to have,
- 05:48 you still could, you just go to our home.html and just find our links.
- 05:54 So like right here, for instance.
- 05:56 Now we just copy all of this and add a new one, and
- 06:01 let's just call this About Me 2, all right?
- 06:06 And here, we could just point this to our old about page, like that.
- 06:13 If we save this and back over here and it reload, now we have this About Me 2 link.
- 06:18 If we click on it, it goes to our old about page, remember that one.
- 06:21 I don't think we would really want to do that, but
- 06:23 I just wanted to show you really quickly that we could.
- 06:26 So I'm going to call this done, you can go through here and
- 06:29 customize this however you like it.
- 06:31 I'm just going to leave this stuff as the default because there's no
- 06:34 real need to make you guys watch me manually change all this stuff up,
- 06:37 but that's all there is to it.
- 06:39 In the next section of the course, l'm going to show you how to actually push all
- 06:43 of this up to the internet so that we can make this live and online so
- 06:47 other people can see it and we'll start to look at that in the next video.
Lesson notes are only available for subscribers.