Back several videos ago, we added some styles to some of the images that were
located inside of our Joomla
site, and they were image-circle, image-polaroid, and image-rounded, and those
three styles come with the Bootstrap style sheet.
They didn't show up inside of TinyMCE, the editor that we are using inside of Joomla,
and the reason why is TinyMCE loads a style sheet that's located elsewhere in Joomla's
file structure if there isn't an editor.css style sheet available within the
template that we are working with.
So what I'd like to show you now is how you can pull some of those styles, and
put them into a style sheet, and you will really improve TinyMCE's interface if
you follow this process.
just to be a little bit clearer about what I'm saying here, if we go to
Content > Article Manager, and I go edit the About page, this image over here, I'd
just like to apply one of those classes, image-circle, image-polaroid, or
image-rounded to it.
Wouldn't it be nice if that was available here on the Styles menu?
So what I'm going to show you how to do is how to add those particular styles to
this Styles menu, rather than taking the route that we had before, where we
selected the image, we went to the tree icon, and we had to know what the style
was, and we had to type it in.
So I am going to show you how this works.
What we are going to have to do is go up to Joomla's file structure.
Since we are working locally here on the computer, I'm going to have to go to
my Windows Explorer.
Mac people, just open up the Finder, and we're going to go to the ht docs
folder inside of MAMP.
PC people, you're going to open up your My Computer folder, we are going to go
to the wamp folder, and go to the www folder.
So I'll show you how to do that.
We are going to go to Computer here, going to the C drive, going to wamp, and going to www.
So this is Joomla's file structure.
Mac people, this is what you should see inside of your ht docs folder; the same
kind of folder structure.
If you go into the templates folder, you will see that I have now four of these
items here inside of this folder, and that is because we have beez3, and
protostar; those are the two templates that came installed with Joomla.
Here's jenprotostar; that's the copy of the template that I made in a previous
video, and then last of all, we have something here called system, and system
contains some style sheets, and some functionality that is called by other
templates inside of Joomla.
If we hop into the back-end of Joomla
here, and if I go to Extensions > Plug-in Manager, and I scroll on down here to the
TinyMCE plug-in, and I switch over to the Basic Options, and scroll on down the
page here a bit, there is an option here for Template CSS classes, and if you
roll your mouse over it, it will tell you that, by default, TinyMCE is looking
for an editor.css file. If it can't find one in the default template CSS folder,
it loads editor.css file from the system template.
So now we can translate what that means.
Here inside of my file structure, we look for an editor.css file inside of
protostar; that's my default template for this Web site, and that's the default
template that note is referring to.
So if I look inside of a protostar, and I look inside of the css folder, I only
see one style sheet: template.
So what that means is, TinyMCE is looking for editor.css in the system template.
So I am going to go back to my main templates folder, and I am going to look
inside of the system folder, inside of css; here is that editor stylesheet.
So I am going to make a copy of editor.css. All I need to do is right-click on
this, and pick Copy, or Ctrl+C or Command+C will also copy this.
Then I am going to go back to my templates folder, to my protostar folder, to my
css folder, and I can right-click, and say Paste, or Ctrl+V or Command+V will
also paste that file into place.
So now I have an editor.css file. This is what TinyMCE will be looking at when
it is styling text just inside of Joomla, just inside of the editor. This is
not styling any text that's showing on the public facing side of the Web site;
this is just for styling text in the editor.
So now what I am going to do is I'm going to edit this CSS file using Notepad.
If you have Dreamweaver available, or any kind of text editor, like TextEdit, or
BBEdit, you are more than welcome to open up this file using one of those. So I
am going to just edit this; this will open it up for me in Notepad.
And this is showing me some of the styles that I have here inside of this
particular editor document. I'm not concerned about what's there, so the fact
that it's kind of illegible doesn't really bother me.
What I'm going to do is put a few returns at the bottom of this document, and
then I am going to open up, in my Exercise Files, I've given you a document
called additional styles.
These are styles that are pulled directly from the Bootstraps style sheet, and
this is how the styling works for rounded images, ones with the rounded corners,
the Polaroid, and the circle-based images.
What I am going to do is just highlight all of that, and say Edit > Copy, and then I
am going to paste this into the editor; say Edit > Paste.
So now I have those three classes that are located here.
Then I am just going to say File > Save. And now when I am here inside of
the back-end of Joomla,
I am going to get out of this TinyMCE window that I am in, just by hitting Close.
I am going to go to Content > Article Manager. I am going to go into my About
article, which has a nice image. I can select that image over here. Notice
also, that image is already styled here inside of TinyMCE. That's because this
image has assigned the class of image-circle. Before, TinyMCE didn't know how to
style that image. Now that the style is defined within editor.css, TinyMCE does
indeed know how to style that image, and is styling it.
And what's more, over here in the dropdown for Styles, we have three additional
styles: image-rounded, image-polaroid, and image-circle, so I could change the
styling of this image if I wanted to, just by selecting any of the other options
that are here, but I really do want to leave it with image-circle.
So image-circle; there we go.
I think that image looks particularly good in a circle.
So I can go ahead and save those changes, or I can just say Close, because I
didn't really change anything here, and that is how you can lift some of the
styles that you would like your clients maybe to access. Those image styles are
a great example of this. And make sure that they show up inside of the editing
environment in TinyMCE, and that way your clients can apply those styles to the
images very easily, and they don't have to remember what those classes are named.