1 00:00:00,000 --> 00:00:06,000 Back several videos ago, we added some styles to some of the images that were 2 00:00:06,001 --> 00:00:10,001 located inside of our Joomla 3 00:00:10,002 --> 00:00:16,002 site, and they were image-circle, image-polaroid, and image-rounded, and those 4 00:00:16,003 --> 00:00:19,003 three styles come with the Bootstrap style sheet. 5 00:00:19,004 --> 00:00:24,004 They didn't show up inside of TinyMCE, the editor that we are using inside of Joomla, 6 00:00:24,005 --> 00:00:30,005 and the reason why is TinyMCE loads a style sheet that's located elsewhere in Joomla's 7 00:00:30,006 --> 00:00:36,006 file structure if there isn't an editor.css style sheet available within the 8 00:00:36,007 --> 00:00:38,007 template that we are working with. 9 00:00:38,008 --> 00:00:43,008 So what I'd like to show you now is how you can pull some of those styles, and 10 00:00:43,009 --> 00:00:49,009 put them into a style sheet, and you will really improve TinyMCE's interface if 11 00:00:49,010 --> 00:00:51,010 you follow this process. 12 00:00:51,011 --> 00:00:56,011 just to be a little bit clearer about what I'm saying here, if we go to 13 00:00:56,012 --> 00:01:01,012 Content > Article Manager, and I go edit the About page, this image over here, I'd 14 00:01:01,013 --> 00:01:05,013 just like to apply one of those classes, image-circle, image-polaroid, or 15 00:01:05,014 --> 00:01:07,014 image-rounded to it. 16 00:01:07,015 --> 00:01:10,015 Wouldn't it be nice if that was available here on the Styles menu? 17 00:01:10,016 --> 00:01:15,016 So what I'm going to show you how to do is how to add those particular styles to 18 00:01:15,017 --> 00:01:19,017 this Styles menu, rather than taking the route that we had before, where we 19 00:01:19,018 --> 00:01:23,018 selected the image, we went to the tree icon, and we had to know what the style 20 00:01:23,019 --> 00:01:25,019 was, and we had to type it in. 21 00:01:25,020 --> 00:01:27,020 So I am going to show you how this works. 22 00:01:27,021 --> 00:01:32,021 What we are going to have to do is go up to Joomla's file structure. 23 00:01:32,022 --> 00:01:36,022 Since we are working locally here on the computer, I'm going to have to go to 24 00:01:36,023 --> 00:01:38,023 my Windows Explorer. 25 00:01:38,024 --> 00:01:43,024 Mac people, just open up the Finder, and we're going to go to the ht docs 26 00:01:43,025 --> 00:01:44,025 folder inside of MAMP. 27 00:01:44,026 --> 00:01:49,026 PC people, you're going to open up your My Computer folder, we are going to go 28 00:01:49,027 --> 00:01:51,027 to the wamp folder, and go to the www folder. 29 00:01:51,028 --> 00:01:53,028 So I'll show you how to do that. 30 00:01:53,029 --> 00:02:00,029 We are going to go to Computer here, going to the C drive, going to wamp, and going to www. 31 00:02:00,030 --> 00:02:02,030 So this is Joomla's file structure. 32 00:02:02,031 --> 00:02:06,031 Mac people, this is what you should see inside of your ht docs folder; the same 33 00:02:06,032 --> 00:02:07,032 kind of folder structure. 34 00:02:07,033 --> 00:02:13,033 If you go into the templates folder, you will see that I have now four of these 35 00:02:13,034 --> 00:02:18,034 items here inside of this folder, and that is because we have beez3, and 36 00:02:18,035 --> 00:02:21,035 protostar; those are the two templates that came installed with Joomla. 37 00:02:21,036 --> 00:02:26,036 Here's jenprotostar; that's the copy of the template that I made in a previous 38 00:02:26,037 --> 00:02:30,037 video, and then last of all, we have something here called system, and system 39 00:02:30,038 --> 00:02:36,038 contains some style sheets, and some functionality that is called by other 40 00:02:36,039 --> 00:02:38,039 templates inside of Joomla. 41 00:02:38,040 --> 00:02:40,040 If we hop into the back-end of Joomla 42 00:02:40,041 --> 00:02:47,041 here, and if I go to Extensions > Plug-in Manager, and I scroll on down here to the 43 00:02:47,042 --> 00:02:53,042 TinyMCE plug-in, and I switch over to the Basic Options, and scroll on down the 44 00:02:53,043 --> 00:02:59,043 page here a bit, there is an option here for Template CSS classes, and if you 45 00:02:59,044 --> 00:03:03,044 roll your mouse over it, it will tell you that, by default, TinyMCE is looking 46 00:03:03,045 --> 00:03:09,045 for an editor.css file. If it can't find one in the default template CSS folder, 47 00:03:09,046 --> 00:03:12,046 it loads editor.css file from the system template. 48 00:03:12,047 --> 00:03:16,047 So now we can translate what that means. 49 00:03:16,048 --> 00:03:23,048 Here inside of my file structure, we look for an editor.css file inside of 50 00:03:23,049 --> 00:03:26,049 protostar; that's my default template for this Web site, and that's the default 51 00:03:26,050 --> 00:03:28,050 template that note is referring to. 52 00:03:28,051 --> 00:03:33,051 So if I look inside of a protostar, and I look inside of the css folder, I only 53 00:03:33,052 --> 00:03:35,052 see one style sheet: template. 54 00:03:35,053 --> 00:03:42,053 So what that means is, TinyMCE is looking for editor.css in the system template. 55 00:03:42,054 --> 00:03:47,054 So I am going to go back to my main templates folder, and I am going to look 56 00:03:47,055 --> 00:03:53,055 inside of the system folder, inside of css; here is that editor stylesheet. 57 00:03:53,056 --> 00:03:57,056 So I am going to make a copy of editor.css. All I need to do is right-click on 58 00:03:57,057 --> 00:04:01,057 this, and pick Copy, or Ctrl+C or Command+C will also copy this. 59 00:04:01,058 --> 00:04:06,058 Then I am going to go back to my templates folder, to my protostar folder, to my 60 00:04:06,059 --> 00:04:14,059 css folder, and I can right-click, and say Paste, or Ctrl+V or Command+V will 61 00:04:14,060 --> 00:04:17,060 also paste that file into place. 62 00:04:17,061 --> 00:04:24,061 So now I have an editor.css file. This is what TinyMCE will be looking at when 63 00:04:24,062 --> 00:04:30,062 it is styling text just inside of Joomla, just inside of the editor. This is 64 00:04:30,063 --> 00:04:34,063 not styling any text that's showing on the public facing side of the Web site; 65 00:04:34,064 --> 00:04:36,064 this is just for styling text in the editor. 66 00:04:36,065 --> 00:04:43,065 So now what I am going to do is I'm going to edit this CSS file using Notepad. 67 00:04:43,066 --> 00:04:48,066 If you have Dreamweaver available, or any kind of text editor, like TextEdit, or 68 00:04:48,067 --> 00:04:53,067 BBEdit, you are more than welcome to open up this file using one of those. So I 69 00:04:53,068 --> 00:04:57,068 am going to just edit this; this will open it up for me in Notepad. 70 00:04:57,069 --> 00:05:02,069 And this is showing me some of the styles that I have here inside of this 71 00:05:02,070 --> 00:05:07,070 particular editor document. I'm not concerned about what's there, so the fact 72 00:05:07,071 --> 00:05:10,071 that it's kind of illegible doesn't really bother me. 73 00:05:10,072 --> 00:05:14,072 What I'm going to do is put a few returns at the bottom of this document, and 74 00:05:14,073 --> 00:05:18,073 then I am going to open up, in my Exercise Files, I've given you a document 75 00:05:18,074 --> 00:05:21,074 called additional styles. 76 00:05:21,075 --> 00:05:25,075 These are styles that are pulled directly from the Bootstraps style sheet, and 77 00:05:25,076 --> 00:05:31,076 this is how the styling works for rounded images, ones with the rounded corners, 78 00:05:31,077 --> 00:05:35,077 the Polaroid, and the circle-based images. 79 00:05:35,078 --> 00:05:40,078 What I am going to do is just highlight all of that, and say Edit > Copy, and then I 80 00:05:40,079 --> 00:05:43,079 am going to paste this into the editor; say Edit > Paste. 81 00:05:43,080 --> 00:05:47,080 So now I have those three classes that are located here. 82 00:05:47,081 --> 00:05:54,081 Then I am just going to say File > Save. And now when I am here inside of 83 00:05:54,082 --> 00:05:55,082 the back-end of Joomla, 84 00:05:55,083 --> 00:06:00,083 I am going to get out of this TinyMCE window that I am in, just by hitting Close. 85 00:06:00,084 --> 00:06:05,084 I am going to go to Content > Article Manager. I am going to go into my About 86 00:06:05,085 --> 00:06:10,085 article, which has a nice image. I can select that image over here. Notice 87 00:06:10,086 --> 00:06:15,086 also, that image is already styled here inside of TinyMCE. That's because this 88 00:06:15,087 --> 00:06:20,087 image has assigned the class of image-circle. Before, TinyMCE didn't know how to 89 00:06:20,088 --> 00:06:26,088 style that image. Now that the style is defined within editor.css, TinyMCE does 90 00:06:26,089 --> 00:06:29,089 indeed know how to style that image, and is styling it. 91 00:06:29,090 --> 00:06:34,090 And what's more, over here in the dropdown for Styles, we have three additional 92 00:06:34,091 --> 00:06:39,091 styles: image-rounded, image-polaroid, and image-circle, so I could change the 93 00:06:39,092 --> 00:06:43,092 styling of this image if I wanted to, just by selecting any of the other options 94 00:06:43,093 --> 00:06:49,093 that are here, but I really do want to leave it with image-circle. 95 00:06:49,094 --> 00:06:52,094 So image-circle; there we go. 96 00:06:52,095 --> 00:06:56,095 I think that image looks particularly good in a circle. 97 00:06:56,096 --> 00:07:00,096 So I can go ahead and save those changes, or I can just say Close, because I 98 00:07:00,097 --> 00:07:05,097 didn't really change anything here, and that is how you can lift some of the 99 00:07:05,098 --> 00:07:10,098 styles that you would like your clients maybe to access. Those image styles are 100 00:07:10,099 --> 00:07:15,099 a great example of this. And make sure that they show up inside of the editing 101 00:07:15,100 --> 00:07:19,000 environment in TinyMCE, and that way your clients can apply those styles to the 102 00:07:19,001 --> 00:07:25,001 images very easily, and they don't have to remember what those classes are named.