1

00:00:00,990 --> 00:00:06,570

So I have downloaded the royalty free admin template that we want, and I've opened a window showing



2

00:00:06,570 --> 00:00:13,110

the contents of the extracted archive here on the right and on the left, I have opened a finder window



3

00:00:13,110 --> 00:00:16,620

and you can see, of course, in windows you'll have it looking a little differently.



4

00:00:16,620 --> 00:00:18,190

But the same basic principle applies.



5

00:00:18,510 --> 00:00:24,900

I have one window that shows the contents of the extracted admin template archive and I have one another



6

00:00:24,900 --> 00:00:28,290

window that shows the contents of my project, the bookings folder.



7

00:00:28,740 --> 00:00:34,860

And if you recall, we have this folder static in bookings and that's where we put all of the things



8

00:00:34,860 --> 00:00:39,450

that are not goaland templates that need to be available to go long templates.



9

00:00:39,930 --> 00:00:45,570

And if you look inside the extracted admin template archive, it has a template folder.



10

00:00:45,570 --> 00:00:46,650

So let's go inside of that.



11

00:00:47,070 --> 00:00:52,110

And inside of that you have the index, that HTML file, which is the starting point for the template,



12

00:00:52,350 --> 00:00:55,140

and we have all of this other stuff which we may need.



13

00:00:55,260 --> 00:01:03,240

So what I'm going to do is select everything except for the index and I'm going to copy that into a



14

00:01:03,240 --> 00:01:05,430

new folder in my static folder.



15

00:01:05,850 --> 00:01:11,720

And I'm going to call that new folder admin because I want to keep the resources for my public site.



16

00:01:11,730 --> 00:01:17,320

These three separate from the resources for my admin site, OK, or my admin pages.



17

00:01:17,430 --> 00:01:24,150

So inside that admin folder, I'm going to copy all of the stuff over here except for that index, that



18

00:01:24,220 --> 00:01:30,900

HTML file, and now those will be available to me if I need them in my admin template.



19

00:01:31,350 --> 00:01:36,780

Now the next step, of course, is to take this index studies HTML file and convert that from what it



20

00:01:36,780 --> 00:01:37,440

is right now.



21

00:01:37,440 --> 00:01:38,340

And let's have a look at it.



22

00:01:38,580 --> 00:01:41,490

So I'll take this and open it up in my favorite text editor.



23

00:01:41,940 --> 00:01:43,110

Drag it down to some line.



24

00:01:46,800 --> 00:01:51,990

That's just an e-mail phone, so we need to take this and convert it into a goaland template and we



25

00:01:51,990 --> 00:01:52,970

already know how to do that.



26

00:01:53,010 --> 00:01:59,570

So what I'm going to ask you to do is to try to convert this into an empty admin template.



27

00:01:59,820 --> 00:02:02,460

So what you're going to have to do, of course, let me go over to my editor.



28

00:02:02,460 --> 00:02:07,570

Here is the same thing that we did in our templates folder for base layout.



29

00:02:08,430 --> 00:02:14,700

So base layout begins with a defined tag that names that and you can't call it base, maybe call it



30

00:02:14,700 --> 00:02:15,210

admin.



31

00:02:15,210 --> 00:02:16,110

That would make sense.



32

00:02:16,560 --> 00:02:22,410

And inside of that, you'll have the DOCTYPE, the head section, the body section and whatever you



33

00:02:22,410 --> 00:02:24,030

want to appear in the bottom of the page.



34

00:02:24,060 --> 00:02:29,850

OK, and what we have here right now in this, this is the wrong one.



35

00:02:30,200 --> 00:02:31,080

Let me try that again.



36

00:02:33,240 --> 00:02:41,760

What we have here in the existing index, that HTML5 is pretty much a lot more information than we actually



37

00:02:41,760 --> 00:02:48,240

need, so you should go through and simplify the menu on the left, simplify the things that are on



38

00:02:48,240 --> 00:02:48,630

the top.



39

00:02:48,630 --> 00:02:52,150

Just make all the changes you want to make it as simple as you possibly can.



40

00:02:52,410 --> 00:02:57,690

So you have a place for content on the main part of the page and a place for menu items on the left



41

00:02:57,690 --> 00:02:58,600

hand side of the page.



42

00:02:58,920 --> 00:03:01,830

You do that as an exercise and I'll do the same thing.



43

00:03:02,040 --> 00:03:06,250

And then in the next lecture, I'll show you what mine looks like and you compare it to yours.



44

00:03:06,390 --> 00:03:09,530

One thing to bear in mind is you're going to have to change some patterns.



45

00:03:10,140 --> 00:03:19,800

So, for example, we have right up here, we have vendors, TV, CSFs, theme icons, access.



46

00:03:19,830 --> 00:03:27,240

You're going to have to change that to slash static slash admin, assuming you want to keep those icons



47

00:03:27,240 --> 00:03:27,570

in there.



48

00:03:27,600 --> 00:03:29,070

And you probably do, but it's up to you.



49

00:03:29,510 --> 00:03:35,280

So you're going to have to prepend those kind of pads for stylesheets and for any JavaScript with slash



50

00:03:35,340 --> 00:03:41,710

static slash admin slash, because that's where they live on our applications web server.



51

00:03:42,450 --> 00:03:43,820

So give that a try.



52

00:03:43,980 --> 00:03:47,880

And then in the next lecture, I'll show you what I did and we can compare notes.