Now that we have put a whole bunch of articles inside of Joomla!, you might want
to apply some formatting to them.
To start with all we did was we just copied out a bunch of stuff from Notepad
and dropped it all in the Joomla!
and they're really not formatted, and they don't look terribly attractive.
So I want to walk you through some things that you can do with Joomla!
and formatting your articles.
So I am going to go back to the Article Manager, so Content>Article Manager and
you should see a whole bunch of articles here at this point and I think there is
about eight or so that you put in, those include a bunch of Products articles as
well as three About articles and let's just start by clicking on the About
article, the very first one here on the list, and this particular article was
divided into two parts, there was a Mission Statement and then there was a
Company Description.
And normally what you do in this kind of situation, would be to take those
words like Mission Statement and Company Description and you might want to
mark then up, perhaps you want to set these to be H2s and H3s since they are
headings on the page and so to do that, it's a relatively straightforward,
I am just going to highlight the words Mission Statement and I am going to go ahead
and set these to be H2s.
so I am going to pick Heading 2 and there we go, I have set that to be an H2.
But actually the way this article is set up right now is that everything on the
page to be H2s, probably because this is divided up by line breaks.
So I am going to go head and put in an actual return here and set the second
paragraph to be a true paragraph, using that same dropdown, then I am going to
highlight the words here Company Description and set those to be an H2
and so once again we are all tangled up here, probably with line breaks.
How do we know what the HTML looks like?
Well, there is this handy button right here called HTML, if I click that, this
will show me the HTML that makes up my Webpage and you'll see here that I do in
fact have line breaks, double line breaks, dividing up all of the stuff.
What they means is, is I apply H2s or paragraphs, it's applying it to everything
that's on the page rather than to specific lines or specific paragraphs of
information and what I needed to do is make sure that this is actually divided
into separate paragraphs before I go in throughput in the formatting.
You can also see what's going on in the HTML not just through this little HTML button,
which puts things in a pop-up, but you can also turn on and off the
editor here by the Toggle Editor button.
And here's what the difference is.
This HTML here goes through TinyMCE, which is the editor that's in use here by
default on a Joomla! Web site.
So this is filtering some of the stuff that you put into the Webpage.
If you use the Toggle Editor button down here, you're essentially removing the
TinyMCE editor from the entire flow of the Joomla!
Web site, so you're going right straight into Joomla! itself,
into the database rather than filtering anything through an editor first.
Sometimes that's an important distinction to make.
So let me just go ahead and take out these paragraphs.
What I am going to do is just hit the Backspace a couple times and make sure
everything is on its own line just like that and keep on going here, there are a
few more paragraphs to go and there we go.
So now that everything is on its own line, now what I can do is here in the
second paragraph under Mission Statement, I can set this to a paragraph.
Here under Company Description, I want that as an H2, but these other things
I want as a regular old paragraph, there we go.
So now I have set up this page to have our two headings here and I can say Save & Close.
There are some other things I might want to do, say on the Executives page,
I have some executives that are listed here, maybe I want to adapt those headings
in the same kind of way, so I'll let you go ahead and edit this article, so that
you have some H2s set up for these particular executive names followed by
a paragraph of their bio and I am going to hit Save & Close again.
I'll go back and do that offline after I am done here.
Then I am going to go down and to the Company Structure page and here I might
want to do something like KinetECO Inc.
Administrative Headquarters and maybe I want to highlight those words, maybe I
want to make them bold or italic or something.
So I could go through and I could highlight each one of these items
and set them up with italics.
So as you see here there's a whole bunch of stuff on this site, a whole bunch
of buttons that you can use and you can apply it just about anything here inside of Joomla!
in your content, simply highlight and click the button, works pretty much like
Microsoft Word does, so that you have Bold and Italic, up here on the top.
The Underline button, I would not use, it is available, but of course underline
on the Web typically means a link.
So, underlined text that's not clickable is very confusing to users.
I would recommend you stay away from the Underline button.
This is Strikethrough, if you want to have text on your page with a line through it,
you can do some alignment things here, Left, Center, Right or Justified.
You have the dropdowns that I have showed you before, there aren't any
styles here at the moment, but we do have some headings here, located under this dropdown.
You can make Bulleted or Numbered Lists, you can indent things, you can undo
things or redo things, making links, I'll show you in another video, or setting
up anchors and so forth.
But your number of tools here is fairly limited, it is possible to change the
tools that you have available to you and I am going to show you how to do that now.
If we go ahead and say Save & Close and I am going to go to Extensions>Plug-in
Manager and the editor that's in use here in Joomla!, this little editing
window called TinyMCE in a plug-in, it's a little application that's running inside of Joomla!
that it gives us all these funky buttons for formatting texts which are really
great particularly for clients.
If you scroll on down here in the Plug-ins to the Editor, TinyMCE, and click
this, these give us some configuration options for TinyMCE.
Switch here over to the Basic Options and it will give you some options for
functionality and how this should look. So right now we have this set to Advanced.
What I'd like for you to do is set this to Extended and what Extended will do is
give you a whole bunch of buttons.
So if we go ahead and say Save & Close and we go back to our Article Manager
and we click on some article again, you now see that we have an extended array
of buttons, lots and lots of different things that we can do here including adding
tables and formatting things which may be very helpful depending on your kind of
Web site also some silly things, we can put smileys into our text now, woohoo!
Or we could add things like the Embedded Media and that kind of thing which is here as well.
Most importantly we have a button for pasting for Microsoft Word.
So if I had a Word document and I had copied text out of it, if you paste it
directly into Joomla!
what you will wind up having is some horrible, horrible, awful terrible markup,
it's very, very tangled up and it goes on forever and ever and ever.
So you should never paste from Word directly because you'll just get a total
mess for your Web site, but if you click on the Paste from Word button first and
paste here into this window using Ctrl+V or Cmd+V to paste into this window,
this will clean up all of that nasty word formatting and insert the
information into your Joomla!
document without all of the verbose markup that makes such a mess in any content
management system, this is not a problem unique to Joomla! by stretch.
So that is a very important button and it might be a reason that you would want to do this.
You might be wondering how you can control these buttons because, hey, maybe as
much as you love those smileys, you'd really like to turn them off.
So let me show you how to do that real quick.
I am going to hit Save & Close to get out of my About article and if I go back
to Extensions>Plug-in Manager and I go back to TinyMCE, under Advanced
Parameters, now that I have picked Extended, I do have the option here of
turning some of that functionality on and off.
This only works in the Extended mode, so I could hide or show the fonts and
their availability or the Paste buttons and so forth and I can just scroll on down here.
So smileys, I do not want smileys so I can hide those by clicking the Hide
button here and say Save & Close and now when I go back to Content>Article Manager,
I go back to my article, there will be no more smileys up here in my list of tools.
I would recommend that you go through and take out any of these buttons that you
don't want your clients using that would be a wonderful, wonderful thing to do.
The formatting that you do inside of the plug-in for TinyMCE will apply these
buttons to any person who's editing the Web site.
So everybody has the same set of buttons.
If you use one of Joomla!'s editor plug-ins like JCE or some of the other editors,
you may have the option depending on the on editor, of configuring sets
of buttons depending on what group the user falls into, so that might be
something that's of value to you, if you want to have a whole bunch of buttons
available to you, but you want your client to have a smaller subset of buttons.
So that might be something to consider when working with these editors inside of Joomla!
All right.
So I am going to go through and do some more formatting of these articles and
I will catch you in the next video.