1 00:00:00,000 --> 00:00:02,000 So far I've concentrated on Joomla 2 00:00:02,001 --> 00:00:08,001 template styles associated with the Web site, and the ability to assign template 3 00:00:08,002 --> 00:00:13,002 styles to different pages, but there is also the template master side of our 4 00:00:13,003 --> 00:00:18,003 templates, and the template masters are where you can control the HTML and the 5 00:00:18,004 --> 00:00:21,004 CCS that makes up your particular template. 6 00:00:21,005 --> 00:00:24,005 So I'm going to show a little bit about that now. 7 00:00:24,006 --> 00:00:29,006 If we go to Extensions > Template Manager, and we're going to switch over to this 8 00:00:29,007 --> 00:00:33,007 Templates tab here, and you can get to that through the dropdowns, or this link 9 00:00:33,008 --> 00:00:37,008 on the left side of the screen, this will show you all of the currently 10 00:00:37,009 --> 00:00:39,009 installed templates for this version of Joomla, 11 00:00:39,010 --> 00:00:43,010 and these are just some default templates right now. 12 00:00:43,011 --> 00:00:46,011 If you scroll on down to the bottom of the page here, and you go to the 13 00:00:46,012 --> 00:00:53,012 Protostar template, you can click on the Protostar Details and Files link here, 14 00:00:53,013 --> 00:00:57,013 this will take us to a page where we can take a look at our Template Master 15 00:00:57,014 --> 00:00:59,014 Files, and our Stylesheets. 16 00:00:59,015 --> 00:01:03,015 So we have three choices here for our Template Master Files. 17 00:01:03,016 --> 00:01:07,016 We have the main page template; that's pretty much the page that displays 18 00:01:07,017 --> 00:01:09,017 everywhere throughout the Web site. 19 00:01:09,018 --> 00:01:15,018 We have an error page template; that's basically the 404 error page, and we have 20 00:01:15,019 --> 00:01:17,019 the printer friendly view template as well. 21 00:01:17,020 --> 00:01:20,020 So you could click on any of these, and then edit the HTML. 22 00:01:20,021 --> 00:01:25,021 I'm going to click on the main page template, and just show you that what we have 23 00:01:25,022 --> 00:01:31,022 here is a mix of some PHP, and as well as some HTML, and if we scroll on down, 24 00:01:31,023 --> 00:01:36,023 there we go; that's the start of the HTML there, and you can go through here, and 25 00:01:36,024 --> 00:01:39,024 you can edit anything you'd like inside of this HTML. You can make whatever 26 00:01:39,025 --> 00:01:42,025 changes you want to make, and so forth. 27 00:01:42,026 --> 00:01:47,026 You'll see that there are a number of places where PHP is used. Anywhere you see 28 00:01:47,027 --> 00:01:49,027 this angle bracket, question mark, 29 00:01:49,028 --> 00:01:52,028 PHP, and then it's closed with a question mark, 30 00:01:52,029 --> 00:01:56,029 angle bracket, that is PHP code. 31 00:01:56,030 --> 00:01:58,030 Some of it is really more on the Joomla 32 00:01:58,031 --> 00:02:02,031 side of things than strictly PHP, but this is code that Joomla 33 00:02:02,032 --> 00:02:07,032 uses to get certain bits and pieces of information from the database, or from 34 00:02:07,033 --> 00:02:09,033 certain variables that might be defined within the template. 35 00:02:09,034 --> 00:02:13,034 I'll go through what a lot of this code means in the Joomla! 3 36 00:02:13,035 --> 00:02:17,035 Responsive Design course, but just know that that is what is here. 37 00:02:17,036 --> 00:02:25,036 If you do decide to make changes to your template, I strongly recommend that you 38 00:02:25,037 --> 00:02:26,037 back up whatever is here first. 39 00:02:26,038 --> 00:02:31,038 Even if you just highlight all of the source code, copy it, put it in a text file 40 00:02:31,039 --> 00:02:32,039 somewhere, and just have it. 41 00:02:32,040 --> 00:02:37,040 If you go in and then edit, and you make a mistake, and goodness knows, you 42 00:02:37,041 --> 00:02:40,041 don't know what you did, you can always roll back to whatever the original 43 00:02:40,042 --> 00:02:42,042 state of this code was. 44 00:02:42,043 --> 00:02:46,043 Very, very important to have these backups; otherwise you can really mess up your Joomla 45 00:02:46,044 --> 00:02:50,044 Web site very easily by messing with the template masters. 46 00:02:50,045 --> 00:02:52,045 I'll show you the CSS as well. 47 00:02:52,046 --> 00:02:59,046 This is template.css, a single template style file, and there are a lot of styles 48 00:02:59,047 --> 00:03:02,047 here inside of this file. It's quite long. 49 00:03:02,048 --> 00:03:07,048 This particular file was generated as a fusion of some custom styles that 50 00:03:07,049 --> 00:03:12,049 were written for this template, as well as all of the Bootstrap styles that go with it. 51 00:03:12,050 --> 00:03:15,050 These were put together, and outputted in a single template file. 52 00:03:15,051 --> 00:03:23,051 So you can edit this file to change the CSS, and you can change the way the Web site looks. 53 00:03:23,052 --> 00:03:27,052 However, as I said before, make sure you have backups before you go through and 54 00:03:27,053 --> 00:03:31,053 do all of these kinds of things, because you just never know when you're going 55 00:03:31,054 --> 00:03:35,054 to make a mistake. You think you know what you're doing, and you really don't, and 56 00:03:35,055 --> 00:03:40,055 you can definitely really kind and make your Web site look rather bad, so make 57 00:03:40,056 --> 00:03:41,056 sure you have those backups. 58 00:03:41,057 --> 00:03:47,057 So one of the best ways that you can back everything up and make sure you have 59 00:03:47,058 --> 00:03:52,058 a nice clean backup before you go and make changes to this is to click the Copy 60 00:03:52,059 --> 00:03:56,059 button up here on the top, and you can just give this a new template name; make 61 00:03:56,060 --> 00:04:00,060 sure it doesn't have any underscores or spaces. So I'm just going to call this 62 00:04:00,061 --> 00:04:09,061 jenprotostar, and say Copy Template, and this will make a new copy of this template. 63 00:04:09,062 --> 00:04:14,062 If I say Close, right here inside of the list of files, I now have my 64 00:04:14,063 --> 00:04:20,063 jenprotostar, in addition to protostar, and now I can go into jenprotostar, I can 65 00:04:20,064 --> 00:04:24,064 assign it as the default template for my Web site, I could make whatever changes 66 00:04:24,065 --> 00:04:27,065 I want to make to that copy of the template. 67 00:04:27,066 --> 00:04:33,066 And what's nice about that is protostar will stay right here. All of the 68 00:04:33,067 --> 00:04:36,067 original settings, except for the few little styles that we have changed 69 00:04:36,068 --> 00:04:42,068 through the style interface, but the original HTML, and the original CSS are all secured here. 70 00:04:42,069 --> 00:04:46,069 That original HTML and CSS may change as Joomla 71 00:04:46,070 --> 00:04:52,070 is upgraded, so if you work with that original copy of the protostar template, 72 00:04:52,071 --> 00:04:55,071 you may wind up having some changes over written as Joomla 73 00:04:55,072 --> 00:04:59,072 is upgraded in future versions. So I strongly recommend you do this process of 74 00:04:59,073 --> 00:05:02,073 copying that template and working on the copy.