So far I've concentrated on Joomla
template styles associated with the Web site, and the ability to assign template
styles to different pages, but there is also the template master side of our
templates, and the template masters are where you can control the HTML and the
CCS that makes up your particular template.
So I'm going to show a little bit about that now.
If we go to Extensions > Template Manager, and we're going to switch over to this
Templates tab here, and you can get to that through the dropdowns, or this link
on the left side of the screen, this will show you all of the currently
installed templates for this version of Joomla,
and these are just some default templates right now.
If you scroll on down to the bottom of the page here, and you go to the
Protostar template, you can click on the Protostar Details and Files link here,
this will take us to a page where we can take a look at our Template Master
Files, and our Stylesheets.
So we have three choices here for our Template Master Files.
We have the main page template; that's pretty much the page that displays
everywhere throughout the Web site.
We have an error page template; that's basically the 404 error page, and we have
the printer friendly view template as well.
So you could click on any of these, and then edit the HTML.
I'm going to click on the main page template, and just show you that what we have
here is a mix of some PHP, and as well as some HTML, and if we scroll on down,
there we go; that's the start of the HTML there, and you can go through here, and
you can edit anything you'd like inside of this HTML. You can make whatever
changes you want to make, and so forth.
You'll see that there are a number of places where PHP is used. Anywhere you see
this angle bracket, question mark,
PHP, and then it's closed with a question mark,
angle bracket, that is PHP code.
Some of it is really more on the Joomla
side of things than strictly PHP, but this is code that Joomla
uses to get certain bits and pieces of information from the database, or from
certain variables that might be defined within the template.
I'll go through what a lot of this code means in the Joomla! 3
Responsive Design course, but just know that that is what is here.
If you do decide to make changes to your template, I strongly recommend that you
back up whatever is here first.
Even if you just highlight all of the source code, copy it, put it in a text file
somewhere, and just have it.
If you go in and then edit, and you make a mistake, and goodness knows, you
don't know what you did, you can always roll back to whatever the original
state of this code was.
Very, very important to have these backups; otherwise you can really mess up your Joomla
Web site very easily by messing with the template masters.
I'll show you the CSS as well.
This is template.css, a single template style file, and there are a lot of styles
here inside of this file. It's quite long.
This particular file was generated as a fusion of some custom styles that
were written for this template, as well as all of the Bootstrap styles that go with it.
These were put together, and outputted in a single template file.
So you can edit this file to change the CSS, and you can change the way the Web site looks.
However, as I said before, make sure you have backups before you go through and
do all of these kinds of things, because you just never know when you're going
to make a mistake. You think you know what you're doing, and you really don't, and
you can definitely really kind and make your Web site look rather bad, so make
sure you have those backups.
So one of the best ways that you can back everything up and make sure you have
a nice clean backup before you go and make changes to this is to click the Copy
button up here on the top, and you can just give this a new template name; make
sure it doesn't have any underscores or spaces. So I'm just going to call this
jenprotostar, and say Copy Template, and this will make a new copy of this template.
If I say Close, right here inside of the list of files, I now have my
jenprotostar, in addition to protostar, and now I can go into jenprotostar, I can
assign it as the default template for my Web site, I could make whatever changes
I want to make to that copy of the template.
And what's nice about that is protostar will stay right here. All of the
original settings, except for the few little styles that we have changed
through the style interface, but the original HTML, and the original CSS are all secured here.
That original HTML and CSS may change as Joomla
is upgraded, so if you work with that original copy of the protostar template,
you may wind up having some changes over written as Joomla
is upgraded in future versions. So I strongly recommend you do this process of
copying that template and working on the copy.