1 00:00:00,000 --> 00:00:04,000 Now that we have put a whole bunch of articles inside of Joomla!, you might want 2 00:00:04,001 --> 00:00:05,001 to apply some formatting to them. 3 00:00:05,002 --> 00:00:09,002 To start with all we did was we just copied out a bunch of stuff from Notepad 4 00:00:09,003 --> 00:00:11,003 and dropped it all in the Joomla! 5 00:00:11,004 --> 00:00:14,004 and they're really not formatted, and they don't look terribly attractive. 6 00:00:14,005 --> 00:00:18,005 So I want to walk you through some things that you can do with Joomla! 7 00:00:18,006 --> 00:00:20,006 and formatting your articles. 8 00:00:20,007 --> 00:00:26,007 So I am going to go back to the Article Manager, so Content>Article Manager and 9 00:00:26,008 --> 00:00:30,008 you should see a whole bunch of articles here at this point and I think there is 10 00:00:30,009 --> 00:00:35,009 about eight or so that you put in, those include a bunch of Products articles as 11 00:00:35,010 --> 00:00:39,010 well as three About articles and let's just start by clicking on the About 12 00:00:39,011 --> 00:00:44,011 article, the very first one here on the list, and this particular article was 13 00:00:44,012 --> 00:00:47,012 divided into two parts, there was a Mission Statement and then there was a 14 00:00:47,013 --> 00:00:48,013 Company Description. 15 00:00:48,014 --> 00:00:53,014 And normally what you do in this kind of situation, would be to take those 16 00:00:53,015 --> 00:00:57,015 words like Mission Statement and Company Description and you might want to 17 00:00:57,016 --> 00:01:01,016 mark then up, perhaps you want to set these to be H2s and H3s since they are 18 00:01:01,017 --> 00:01:06,017 headings on the page and so to do that, it's a relatively straightforward, 19 00:01:06,018 --> 00:01:10,018 I am just going to highlight the words Mission Statement and I am going to go ahead 20 00:01:10,019 --> 00:01:11,019 and set these to be H2s. 21 00:01:11,020 --> 00:01:16,020 so I am going to pick Heading 2 and there we go, I have set that to be an H2. 22 00:01:16,021 --> 00:01:20,021 But actually the way this article is set up right now is that everything on the 23 00:01:20,022 --> 00:01:24,022 page to be H2s, probably because this is divided up by line breaks. 24 00:01:24,023 --> 00:01:28,023 So I am going to go head and put in an actual return here and set the second 25 00:01:28,024 --> 00:01:33,024 paragraph to be a true paragraph, using that same dropdown, then I am going to 26 00:01:33,025 --> 00:01:38,025 highlight the words here Company Description and set those to be an H2 27 00:01:38,026 --> 00:01:42,026 and so once again we are all tangled up here, probably with line breaks. 28 00:01:42,027 --> 00:01:44,027 How do we know what the HTML looks like? 29 00:01:44,028 --> 00:01:48,028 Well, there is this handy button right here called HTML, if I click that, this 30 00:01:48,029 --> 00:01:52,029 will show me the HTML that makes up my Webpage and you'll see here that I do in 31 00:01:52,030 --> 00:01:55,030 fact have line breaks, double line breaks, dividing up all of the stuff. 32 00:01:55,031 --> 00:01:59,031 What they means is, is I apply H2s or paragraphs, it's applying it to everything 33 00:01:59,032 --> 00:02:03,032 that's on the page rather than to specific lines or specific paragraphs of 34 00:02:03,033 --> 00:02:07,033 information and what I needed to do is make sure that this is actually divided 35 00:02:07,034 --> 00:02:12,034 into separate paragraphs before I go in throughput in the formatting. 36 00:02:12,035 --> 00:02:17,035 You can also see what's going on in the HTML not just through this little HTML button, 37 00:02:17,036 --> 00:02:20,036 which puts things in a pop-up, but you can also turn on and off the 38 00:02:20,037 --> 00:02:23,037 editor here by the Toggle Editor button. 39 00:02:23,038 --> 00:02:25,038 And here's what the difference is. 40 00:02:25,039 --> 00:02:30,039 This HTML here goes through TinyMCE, which is the editor that's in use here by 41 00:02:30,040 --> 00:02:31,040 default on a Joomla! Web site. 42 00:02:31,041 --> 00:02:36,041 So this is filtering some of the stuff that you put into the Webpage. 43 00:02:36,042 --> 00:02:39,042 If you use the Toggle Editor button down here, you're essentially removing the 44 00:02:39,043 --> 00:02:43,043 TinyMCE editor from the entire flow of the Joomla! 45 00:02:43,044 --> 00:02:46,044 Web site, so you're going right straight into Joomla! itself, 46 00:02:46,045 --> 00:02:50,045 into the database rather than filtering anything through an editor first. 47 00:02:50,046 --> 00:02:53,046 Sometimes that's an important distinction to make. 48 00:02:53,047 --> 00:02:57,047 So let me just go ahead and take out these paragraphs. 49 00:02:57,048 --> 00:03:01,048 What I am going to do is just hit the Backspace a couple times and make sure 50 00:03:01,049 --> 00:03:09,049 everything is on its own line just like that and keep on going here, there are a 51 00:03:09,050 --> 00:03:13,050 few more paragraphs to go and there we go. 52 00:03:13,051 --> 00:03:21,051 So now that everything is on its own line, now what I can do is here in the 53 00:03:21,052 --> 00:03:26,052 second paragraph under Mission Statement, I can set this to a paragraph. 54 00:03:26,053 --> 00:03:30,053 Here under Company Description, I want that as an H2, but these other things 55 00:03:30,054 --> 00:03:32,054 I want as a regular old paragraph, there we go. 56 00:03:32,055 --> 00:03:38,055 So now I have set up this page to have our two headings here and I can say Save & Close. 57 00:03:38,056 --> 00:03:44,056 There are some other things I might want to do, say on the Executives page, 58 00:03:44,057 --> 00:03:48,057 I have some executives that are listed here, maybe I want to adapt those headings 59 00:03:48,058 --> 00:03:52,058 in the same kind of way, so I'll let you go ahead and edit this article, so that 60 00:03:52,059 --> 00:03:56,059 you have some H2s set up for these particular executive names followed by 61 00:03:56,060 --> 00:04:01,060 a paragraph of their bio and I am going to hit Save & Close again. 62 00:04:01,061 --> 00:04:04,061 I'll go back and do that offline after I am done here. 63 00:04:04,062 --> 00:04:10,062 Then I am going to go down and to the Company Structure page and here I might 64 00:04:10,063 --> 00:04:12,063 want to do something like KinetECO Inc. 65 00:04:12,064 --> 00:04:18,064 Administrative Headquarters and maybe I want to highlight those words, maybe I 66 00:04:18,065 --> 00:04:20,065 want to make them bold or italic or something. 67 00:04:20,066 --> 00:04:25,066 So I could go through and I could highlight each one of these items 68 00:04:25,067 --> 00:04:26,067 and set them up with italics. 69 00:04:26,068 --> 00:04:32,068 So as you see here there's a whole bunch of stuff on this site, a whole bunch 70 00:04:32,069 --> 00:04:38,069 of buttons that you can use and you can apply it just about anything here inside of Joomla! 71 00:04:38,070 --> 00:04:43,070 in your content, simply highlight and click the button, works pretty much like 72 00:04:43,071 --> 00:04:47,071 Microsoft Word does, so that you have Bold and Italic, up here on the top. 73 00:04:47,072 --> 00:04:52,072 The Underline button, I would not use, it is available, but of course underline 74 00:04:52,073 --> 00:04:55,073 on the Web typically means a link. 75 00:04:55,074 --> 00:04:58,074 So, underlined text that's not clickable is very confusing to users. 76 00:04:58,075 --> 00:05:01,075 I would recommend you stay away from the Underline button. 77 00:05:01,076 --> 00:05:05,076 This is Strikethrough, if you want to have text on your page with a line through it, 78 00:05:05,077 --> 00:05:08,077 you can do some alignment things here, Left, Center, Right or Justified. 79 00:05:08,078 --> 00:05:11,078 You have the dropdowns that I have showed you before, there aren't any 80 00:05:11,079 --> 00:05:17,079 styles here at the moment, but we do have some headings here, located under this dropdown. 81 00:05:17,080 --> 00:05:21,080 You can make Bulleted or Numbered Lists, you can indent things, you can undo 82 00:05:21,081 --> 00:05:25,081 things or redo things, making links, I'll show you in another video, or setting 83 00:05:25,082 --> 00:05:27,082 up anchors and so forth. 84 00:05:27,083 --> 00:05:32,083 But your number of tools here is fairly limited, it is possible to change the 85 00:05:32,084 --> 00:05:37,084 tools that you have available to you and I am going to show you how to do that now. 86 00:05:37,085 --> 00:05:42,085 If we go ahead and say Save & Close and I am going to go to Extensions>Plug-in 87 00:05:42,086 --> 00:05:46,086 Manager and the editor that's in use here in Joomla!, this little editing 88 00:05:46,087 --> 00:05:51,087 window called TinyMCE in a plug-in, it's a little application that's running inside of Joomla! 89 00:05:51,088 --> 00:05:56,088 that it gives us all these funky buttons for formatting texts which are really 90 00:05:56,089 --> 00:05:58,089 great particularly for clients. 91 00:05:58,090 --> 00:06:02,090 If you scroll on down here in the Plug-ins to the Editor, TinyMCE, and click 92 00:06:02,091 --> 00:06:07,091 this, these give us some configuration options for TinyMCE. 93 00:06:07,092 --> 00:06:12,092 Switch here over to the Basic Options and it will give you some options for 94 00:06:12,093 --> 00:06:18,093 functionality and how this should look. So right now we have this set to Advanced. 95 00:06:18,094 --> 00:06:22,094 What I'd like for you to do is set this to Extended and what Extended will do is 96 00:06:22,095 --> 00:06:24,095 give you a whole bunch of buttons. 97 00:06:24,096 --> 00:06:30,096 So if we go ahead and say Save & Close and we go back to our Article Manager 98 00:06:30,097 --> 00:06:34,097 and we click on some article again, you now see that we have an extended array 99 00:06:34,098 --> 00:06:38,098 of buttons, lots and lots of different things that we can do here including adding 100 00:06:38,099 --> 00:06:42,099 tables and formatting things which may be very helpful depending on your kind of 101 00:06:42,100 --> 00:06:47,000 Web site also some silly things, we can put smileys into our text now, woohoo! 102 00:06:47,001 --> 00:06:51,001 Or we could add things like the Embedded Media and that kind of thing which is here as well. 103 00:06:51,002 --> 00:06:54,002 Most importantly we have a button for pasting for Microsoft Word. 104 00:06:54,003 --> 00:06:59,003 So if I had a Word document and I had copied text out of it, if you paste it 105 00:06:59,004 --> 00:07:00,004 directly into Joomla! 106 00:07:00,005 --> 00:07:04,005 what you will wind up having is some horrible, horrible, awful terrible markup, 107 00:07:04,006 --> 00:07:08,006 it's very, very tangled up and it goes on forever and ever and ever. 108 00:07:08,007 --> 00:07:13,007 So you should never paste from Word directly because you'll just get a total 109 00:07:13,008 --> 00:07:17,008 mess for your Web site, but if you click on the Paste from Word button first and 110 00:07:17,009 --> 00:07:22,009 paste here into this window using Ctrl+V or Cmd+V to paste into this window, 111 00:07:22,010 --> 00:07:26,010 this will clean up all of that nasty word formatting and insert the 112 00:07:26,011 --> 00:07:28,011 information into your Joomla! 113 00:07:28,012 --> 00:07:34,012 document without all of the verbose markup that makes such a mess in any content 114 00:07:34,013 --> 00:07:37,013 management system, this is not a problem unique to Joomla! by stretch. 115 00:07:37,014 --> 00:07:42,014 So that is a very important button and it might be a reason that you would want to do this. 116 00:07:42,015 --> 00:07:46,015 You might be wondering how you can control these buttons because, hey, maybe as 117 00:07:46,016 --> 00:07:49,016 much as you love those smileys, you'd really like to turn them off. 118 00:07:49,017 --> 00:07:52,017 So let me show you how to do that real quick. 119 00:07:52,018 --> 00:07:57,018 I am going to hit Save & Close to get out of my About article and if I go back 120 00:07:57,019 --> 00:08:03,019 to Extensions>Plug-in Manager and I go back to TinyMCE, under Advanced 121 00:08:03,020 --> 00:08:07,020 Parameters, now that I have picked Extended, I do have the option here of 122 00:08:07,021 --> 00:08:10,021 turning some of that functionality on and off. 123 00:08:10,022 --> 00:08:15,022 This only works in the Extended mode, so I could hide or show the fonts and 124 00:08:15,023 --> 00:08:20,023 their availability or the Paste buttons and so forth and I can just scroll on down here. 125 00:08:20,024 --> 00:08:25,024 So smileys, I do not want smileys so I can hide those by clicking the Hide 126 00:08:25,025 --> 00:08:32,025 button here and say Save & Close and now when I go back to Content>Article Manager, 127 00:08:32,026 --> 00:08:39,026 I go back to my article, there will be no more smileys up here in my list of tools. 128 00:08:39,027 --> 00:08:43,027 I would recommend that you go through and take out any of these buttons that you 129 00:08:43,028 --> 00:08:48,028 don't want your clients using that would be a wonderful, wonderful thing to do. 130 00:08:48,029 --> 00:08:52,029 The formatting that you do inside of the plug-in for TinyMCE will apply these 131 00:08:52,030 --> 00:08:55,030 buttons to any person who's editing the Web site. 132 00:08:55,031 --> 00:08:58,031 So everybody has the same set of buttons. 133 00:08:58,032 --> 00:09:03,032 If you use one of Joomla!'s editor plug-ins like JCE or some of the other editors, 134 00:09:03,033 --> 00:09:08,033 you may have the option depending on the on editor, of configuring sets 135 00:09:08,034 --> 00:09:13,034 of buttons depending on what group the user falls into, so that might be 136 00:09:13,035 --> 00:09:16,035 something that's of value to you, if you want to have a whole bunch of buttons 137 00:09:16,036 --> 00:09:20,036 available to you, but you want your client to have a smaller subset of buttons. 138 00:09:20,037 --> 00:09:26,037 So that might be something to consider when working with these editors inside of Joomla! 139 00:09:26,038 --> 00:09:27,038 All right. 140 00:09:27,039 --> 00:09:31,039 So I am going to go through and do some more formatting of these articles and 141 00:09:31,040 --> 00:09:33,040 I will catch you in the next video.