1 00:00:00,000 --> 00:00:02,000 So finally the moment you have all been waiting for. 2 00:00:02,001 --> 00:00:08,001 To this point in time, we have built our Web site based on the protostar template, 3 00:00:08,002 --> 00:00:10,002 exactly as it is out of the box. 4 00:00:10,003 --> 00:00:15,003 Now what I would like to do is show you a little bit about how we can go about 5 00:00:15,004 --> 00:00:18,004 changing the way this Web site looks, using our template styles inside of Joomla. 6 00:00:18,005 --> 00:00:23,005 So, now I am going to happen to the back-end of the Web site, and I am going to go 7 00:00:23,006 --> 00:00:24,006 to Extensions > Template Manager. 8 00:00:24,007 --> 00:00:29,007 As you know, we have two administrator templates, and we have two front-end 9 00:00:29,008 --> 00:00:31,008 templates, or Web site templates. 10 00:00:31,009 --> 00:00:35,009 By Default, we have protostar as our template, and it's actually assigned to all 11 00:00:35,010 --> 00:00:37,010 of the pages on the Web site. 12 00:00:37,011 --> 00:00:38,011 How do I know that? 13 00:00:38,012 --> 00:00:42,012 I see that something is Default here, using the star, and then in the 14 00:00:42,013 --> 00:00:45,013 Assigned column, nothing is selected. 15 00:00:45,014 --> 00:00:49,014 If I wanted to, I could take the Beez3 template, and assign it to part of the 16 00:00:49,015 --> 00:00:52,015 Web site, so let's go ahead and do that. 17 00:00:52,016 --> 00:00:57,016 If I clicked on Beez3, and I clicked on the Menu assignment, I could say let's 18 00:00:57,017 --> 00:01:00,017 put Beez3 on the Products portion of the Web site. 19 00:01:00,018 --> 00:01:06,018 So I will check off a bunch of pages on my list here, and I will go ahead and say Save. 20 00:01:06,019 --> 00:01:11,019 When I refresh the front-end of the Web site from the Home page, I get my 21 00:01:11,020 --> 00:01:14,020 different picture for my random image, but other than that, nothing changes on 22 00:01:14,021 --> 00:01:15,021 this part of the Web site. 23 00:01:15,022 --> 00:01:20,022 Nothing has changed on the About part of the Web site either, but if I go to 24 00:01:20,023 --> 00:01:22,023 Products, I get a completely different looking template. 25 00:01:22,024 --> 00:01:28,024 This is the Beez3 template, and as you can see, it has some formatting issues. It 26 00:01:28,025 --> 00:01:31,025 doesn't come with dropdown menus, so it's showing the secondary navigation 27 00:01:31,026 --> 00:01:36,026 for Products right here on top of the main banner for this particular design. 28 00:01:36,027 --> 00:01:40,027 And if the design looks familiar, this is the same design that shipped with Joomla! 2.5. 29 00:01:40,028 --> 00:01:44,028 This was the default type of template. There it was called Beez2, and 30 00:01:44,029 --> 00:01:45,029 now it's called Beez3. 31 00:01:45,030 --> 00:01:50,030 You can see that we can navigate around our different pages, and you see that we 32 00:01:50,031 --> 00:01:52,031 have a somewhat different looking template. 33 00:01:52,032 --> 00:01:57,032 But the important thing that this brings to mind is that just because you have 34 00:01:57,033 --> 00:02:02,033 your modules and your layout all perfected for one template, when you switch to 35 00:02:02,034 --> 00:02:07,034 another, it has different modules, different module positions, and things are 36 00:02:07,035 --> 00:02:08,035 organized differently. 37 00:02:08,036 --> 00:02:12,036 So you may wind up with some of these odd little formatting issues that you'll 38 00:02:12,037 --> 00:02:15,037 wind up having to address by taking your modules, and assigning them to new 39 00:02:15,038 --> 00:02:20,038 positions, or correct positions, and maybe you'll have to make some other tweaks 40 00:02:20,039 --> 00:02:21,039 to the template as well. 41 00:02:21,040 --> 00:02:24,040 As you can see here, my banner says Joomla! 42 00:02:24,041 --> 00:02:26,041 Open Source Content Management, and KinetECO doesn't appear anywhere on 43 00:02:26,042 --> 00:02:27,042 this particular page. 44 00:02:27,043 --> 00:02:32,043 Now, this is kind of a fashion no; you're probably not going to have this 45 00:02:32,044 --> 00:02:36,044 radically different type of layout between one part of the Web site and 46 00:02:36,045 --> 00:02:40,045 another, but you may want to have some minor variations between, say, your Home 47 00:02:40,046 --> 00:02:45,046 page, and your inside pages, or you might style things slightly differently. 48 00:02:45,047 --> 00:02:48,047 Some people like to use a different color for each section of the Web site; 49 00:02:48,048 --> 00:02:49,048 that kind of thing. 50 00:02:49,049 --> 00:02:53,049 All right, so I am going to go hop back into the back-end of Joomla. 51 00:02:53,050 --> 00:02:57,050 I am just going to say Save & Close, so you can see that when another template 52 00:02:57,051 --> 00:03:01,051 style is assigned, you have a green checkmark here that indicates that it is 53 00:03:01,052 --> 00:03:05,052 assigned to some other part of the Web site. But I really don't want Beez3 to 54 00:03:05,053 --> 00:03:09,053 stay as the template when it's in use on the Product pages, so I am going to 55 00:03:09,054 --> 00:03:10,054 click on this again. 56 00:03:10,055 --> 00:03:15,055 I am going to go back to my Menu assignment, and I'm going to uncheck all of 57 00:03:15,056 --> 00:03:19,056 these items, and just say Save & Close. And now you see again that protostar is 58 00:03:19,057 --> 00:03:23,057 the only template in use on the site, that it's the Default, and when I 59 00:03:23,058 --> 00:03:30,058 refresh my Products portion of the Web site here, it has returned to my design with protostar. 60 00:03:30,059 --> 00:03:34,059 So that's the way you can work with styles and so forth on your Web site, but 61 00:03:34,060 --> 00:03:38,060 let's see what we can do about customizing the protostar template. 62 00:03:38,061 --> 00:03:43,061 All of these templates, or at least many of them, have the ability to be 63 00:03:43,062 --> 00:03:44,062 customized through another screen. 64 00:03:44,063 --> 00:03:49,063 If I click on protostar as my Default template, I have the ability to assign 65 00:03:49,064 --> 00:03:55,064 names and so forth here, but under the Options tab, some templates have this, and some don't. 66 00:03:55,065 --> 00:04:01,065 I am able to assign, in the case of protostar, a few additional fonts, and a few 67 00:04:01,066 --> 00:04:05,066 additional colors, as well as a logo for the Web site. 68 00:04:05,067 --> 00:04:10,067 So this is a very nice interface for adding these particular items. 69 00:04:10,068 --> 00:04:14,068 What shows up under the Options tab depends completely on what template 70 00:04:14,069 --> 00:04:15,069 you happen to be using. 71 00:04:15,070 --> 00:04:19,070 Some templates don't even have an Options tab, because there's no option for the 72 00:04:19,071 --> 00:04:24,071 template, whereas other templates may have screens and screens full of things 73 00:04:24,072 --> 00:04:27,072 that you can customize where that template is concerned. 74 00:04:27,073 --> 00:04:31,073 I'll go through how you make an options tab like this, and customize some of 75 00:04:31,074 --> 00:04:35,074 these values in my Joomla! 3: Responsive Templates course. 76 00:04:35,075 --> 00:04:38,075 But it's kind of beyond the scope of Essential Training. 77 00:04:38,076 --> 00:04:43,076 So what I would like to do, first of all, is I would like to assign some colors 78 00:04:43,077 --> 00:04:45,077 for the Template Colour and the Background Colour. 79 00:04:45,078 --> 00:04:50,078 You're probably wondering where these are applied, and so the Template Colour is 80 00:04:50,079 --> 00:04:54,079 this little blue line that's at the top of the page, as well as the blue that's 81 00:04:54,080 --> 00:04:59,080 in use for these links, the background colors on the buttons, it's in use in a 82 00:04:59,081 --> 00:05:01,081 number of different places. 83 00:05:01,082 --> 00:05:05,082 So what I am going to do first is change that color, and right here under 84 00:05:05,083 --> 00:05:10,083 Template color -- and this is in your Exercise Files; there is a little text file 85 00:05:10,084 --> 00:05:12,084 that will tell you what colors I am using -- 86 00:05:12,085 --> 00:05:17,085 I am going to copy this first color here, Ctrl+C or Command+C to Copy, Ctrl+V 87 00:05:17,086 --> 00:05:19,086 or Command+V to Paste. 88 00:05:19,087 --> 00:05:21,087 If you notice, this is also new in Joomla! 3, 89 00:05:21,088 --> 00:05:25,088 we have this lovely little color picker pop up here if you would want to pick 90 00:05:25,089 --> 00:05:28,089 something else just by using this interface for picking a color. 91 00:05:28,090 --> 00:05:34,090 And if I apply this first color to the site, and say Save, and refresh the 92 00:05:34,091 --> 00:05:39,091 front-end of the Web site, you will see that color has changed. It's darkened up a little bit. 93 00:05:39,092 --> 00:05:43,092 And then the other color that I can apply is the Background color. 94 00:05:43,093 --> 00:05:44,093 Right now it's a very pale gray. 95 00:05:44,094 --> 00:05:50,094 What I am going to change it to is this color right here; Ctrl+C or Command+C to 96 00:05:50,095 --> 00:05:56,095 Copy, Ctrl+V or Command+V to Paste, and I am going to say Save, and when I refresh 97 00:05:56,096 --> 00:06:01,096 the front-end into the Web site, now I've got a brighter orange background color. 98 00:06:01,097 --> 00:06:05,097 These two colors that I have picked are part of the branding that goes with 99 00:06:05,098 --> 00:06:10,098 KinetECO, and in terms of their logo and so forth, this is the style guide that the 100 00:06:10,099 --> 00:06:13,099 designer gave me, so I've picked some colors from that. 101 00:06:13,100 --> 00:06:17,000 The last thing I would like to do is change the banner. 102 00:06:17,001 --> 00:06:19,001 So, right now we just have the words KinetECO, Inc. 103 00:06:19,002 --> 00:06:23,002 at the top of the screen, which is fine, but I have this great banner that the 104 00:06:23,003 --> 00:06:28,003 graphic designer has put together for me, and I would like to show that on the Web site. 105 00:06:28,004 --> 00:06:30,004 So here I can go ahead and upload that. 106 00:06:30,005 --> 00:06:37,005 Going to the Options tab, here under Logo, I can click the Select button, and I 107 00:06:37,006 --> 00:06:41,006 am going to upload a picture here, so I am going to hit my Browse button. 108 00:06:41,007 --> 00:06:46,007 I am going to go into my Exercise Files in Chapter 10, folder number 2, and 109 00:06:46,008 --> 00:06:47,008 here is the header. 110 00:06:47,009 --> 00:06:51,009 I am going to go ahead and say Open, and then say Start Upload. 111 00:06:51,010 --> 00:06:55,010 And this is will upload my banner right into the media manager, and I can 112 00:06:55,011 --> 00:06:56,011 scroll down to find it. 113 00:06:56,012 --> 00:07:01,012 It's called Kineteco_header.jpg, and I am going to go ahead and choose that, and 114 00:07:01,013 --> 00:07:07,013 say Insert, and then I am going to say Save. 115 00:07:07,014 --> 00:07:12,014 When I refresh the front-end of the Web site, there. Now it's finally looking 116 00:07:12,015 --> 00:07:13,015 like a real Web site, 117 00:07:13,016 --> 00:07:17,016 now that I have a really pretty graphic designed header right here at the top of 118 00:07:17,017 --> 00:07:22,017 the page. It's quite lovely, it blends all the colors together, and I can flip 119 00:07:22,018 --> 00:07:26,018 through pages here on the Web site. You can see that finally it's looking 120 00:07:26,019 --> 00:07:32,019 actually kind of professional, and not quite as low-key as it was before. 121 00:07:32,020 --> 00:07:37,020 The last things you can customize here inside of the protostar template are the 122 00:07:37,021 --> 00:07:41,021 Google Font for Headings, you can turn that on or off, or you can type in one of 123 00:07:41,022 --> 00:07:42,022 the Google Font Names. 124 00:07:42,023 --> 00:07:48,023 If you go to the Google Fonts Web site, you can choose some of those options. 125 00:07:48,024 --> 00:07:53,024 The last thing I am going to show you is the Fluid Layout option here at the bottom. 126 00:07:53,025 --> 00:07:55,025 Right now inside of Joomla, 127 00:07:55,026 --> 00:07:59,026 I have talked to you about the responsive nature of these templates before. 128 00:07:59,027 --> 00:08:04,027 If I make this page a bit smaller, just by dragging in the corner of my browser, 129 00:08:04,028 --> 00:08:09,028 you'll see that this design snaps to different widths. 130 00:08:09,029 --> 00:08:13,029 So it snaps, and looks like the header is not quite resizing here inside of 131 00:08:13,030 --> 00:08:20,030 Firefox, and if I narrow this up a little bit more, and then as I continue to 132 00:08:20,031 --> 00:08:24,031 narrow it, you will see that I have my navigation, I have my header up here at 133 00:08:24,032 --> 00:08:25,032 the top of the page. 134 00:08:25,033 --> 00:08:31,033 But I can change those breakpoints. So, right now it just sort of snaps in a few places. 135 00:08:31,034 --> 00:08:38,034 By changing this to the Fluid Layout, and saying Save, and refreshing this 136 00:08:38,035 --> 00:08:43,035 page, this will actually push the design all the way out of the edges of the 137 00:08:43,036 --> 00:08:46,036 browser window. We will probably need it to change the treatment of this 138 00:08:46,037 --> 00:08:52,037 header if we use this type of method. And as I make the page smaller here, it 139 00:08:52,038 --> 00:08:54,038 collapses very, very nicely. 140 00:08:54,039 --> 00:08:59,039 This is using Bootstrap's fluid grid, as opposed to its default grid; that's where 141 00:08:59,040 --> 00:09:03,040 the changes are coming from in regards to this particular template. 142 00:09:03,041 --> 00:09:07,041 I am going leave this set to you the, quote, Static Grid; it's kind of misleading 143 00:09:07,042 --> 00:09:12,042 name, because both designs are responsive; it's just a question of whether it's 144 00:09:12,043 --> 00:09:18,043 continuously resizing over different screen widths, or whether it has got some 145 00:09:18,044 --> 00:09:21,044 more distinct breakpoints as part of that design. 146 00:09:21,045 --> 00:09:26,045 So I am going to go ahead and say Save & Close, and I am going to refresh the 147 00:09:26,046 --> 00:09:31,046 front-end of the Web site. So now we have a very cool looking Web site, and 148 00:09:31,047 --> 00:09:36,047 we've made some big improvements using the interface for improving the 149 00:09:36,048 --> 00:09:38,048 protostar template.