So finally the moment you have all been waiting for.
To this point in time, we have built our Web site based on the protostar template,
exactly as it is out of the box.
Now what I would like to do is show you a little bit about how we can go about
changing the way this Web site looks, using our template styles inside of Joomla.
So, now I am going to happen to the back-end of the Web site, and I am going to go
to Extensions > Template Manager.
As you know, we have two administrator templates, and we have two front-end
templates, or Web site templates.
By Default, we have protostar as our template, and it's actually assigned to all
of the pages on the Web site.
How do I know that?
I see that something is Default here, using the star, and then in the
Assigned column, nothing is selected.
If I wanted to, I could take the Beez3 template, and assign it to part of the
Web site, so let's go ahead and do that.
If I clicked on Beez3, and I clicked on the Menu assignment, I could say let's
put Beez3 on the Products portion of the Web site.
So I will check off a bunch of pages on my list here, and I will go ahead and say Save.
When I refresh the front-end of the Web site from the Home page, I get my
different picture for my random image, but other than that, nothing changes on
this part of the Web site.
Nothing has changed on the About part of the Web site either, but if I go to
Products, I get a completely different looking template.
This is the Beez3 template, and as you can see, it has some formatting issues. It
doesn't come with dropdown menus, so it's showing the secondary navigation
for Products right here on top of the main banner for this particular design.
And if the design looks familiar, this is the same design that shipped with Joomla! 2.5.
This was the default type of template. There it was called Beez2, and
now it's called Beez3.
You can see that we can navigate around our different pages, and you see that we
have a somewhat different looking template.
But the important thing that this brings to mind is that just because you have
your modules and your layout all perfected for one template, when you switch to
another, it has different modules, different module positions, and things are
organized differently.
So you may wind up with some of these odd little formatting issues that you'll
wind up having to address by taking your modules, and assigning them to new
positions, or correct positions, and maybe you'll have to make some other tweaks
to the template as well.
As you can see here, my banner says Joomla!
Open Source Content Management, and KinetECO doesn't appear anywhere on
this particular page.
Now, this is kind of a fashion no; you're probably not going to have this
radically different type of layout between one part of the Web site and
another, but you may want to have some minor variations between, say, your Home
page, and your inside pages, or you might style things slightly differently.
Some people like to use a different color for each section of the Web site;
that kind of thing.
All right, so I am going to go hop back into the back-end of Joomla.
I am just going to say Save & Close, so you can see that when another template
style is assigned, you have a green checkmark here that indicates that it is
assigned to some other part of the Web site. But I really don't want Beez3 to
stay as the template when it's in use on the Product pages, so I am going to
click on this again.
I am going to go back to my Menu assignment, and I'm going to uncheck all of
these items, and just say Save & Close. And now you see again that protostar is
the only template in use on the site, that it's the Default, and when I
refresh my Products portion of the Web site here, it has returned to my design with protostar.
So that's the way you can work with styles and so forth on your Web site, but
let's see what we can do about customizing the protostar template.
All of these templates, or at least many of them, have the ability to be
customized through another screen.
If I click on protostar as my Default template, I have the ability to assign
names and so forth here, but under the Options tab, some templates have this, and some don't.
I am able to assign, in the case of protostar, a few additional fonts, and a few
additional colors, as well as a logo for the Web site.
So this is a very nice interface for adding these particular items.
What shows up under the Options tab depends completely on what template
you happen to be using.
Some templates don't even have an Options tab, because there's no option for the
template, whereas other templates may have screens and screens full of things
that you can customize where that template is concerned.
I'll go through how you make an options tab like this, and customize some of
these values in my Joomla! 3: Responsive Templates course.
But it's kind of beyond the scope of Essential Training.
So what I would like to do, first of all, is I would like to assign some colors
for the Template Colour and the Background Colour.
You're probably wondering where these are applied, and so the Template Colour is
this little blue line that's at the top of the page, as well as the blue that's
in use for these links, the background colors on the buttons, it's in use in a
number of different places.
So what I am going to do first is change that color, and right here under
Template color -- and this is in your Exercise Files; there is a little text file
that will tell you what colors I am using --
I am going to copy this first color here, Ctrl+C or Command+C to Copy, Ctrl+V
or Command+V to Paste.
If you notice, this is also new in Joomla! 3,
we have this lovely little color picker pop up here if you would want to pick
something else just by using this interface for picking a color.
And if I apply this first color to the site, and say Save, and refresh the
front-end of the Web site, you will see that color has changed. It's darkened up a little bit.
And then the other color that I can apply is the Background color.
Right now it's a very pale gray.
What I am going to change it to is this color right here; Ctrl+C or Command+C to
Copy, Ctrl+V or Command+V to Paste, and I am going to say Save, and when I refresh
the front-end into the Web site, now I've got a brighter orange background color.
These two colors that I have picked are part of the branding that goes with
KinetECO, and in terms of their logo and so forth, this is the style guide that the
designer gave me, so I've picked some colors from that.
The last thing I would like to do is change the banner.
So, right now we just have the words KinetECO, Inc.
at the top of the screen, which is fine, but I have this great banner that the
graphic designer has put together for me, and I would like to show that on the Web site.
So here I can go ahead and upload that.
Going to the Options tab, here under Logo, I can click the Select button, and I
am going to upload a picture here, so I am going to hit my Browse button.
I am going to go into my Exercise Files in Chapter 10, folder number 2, and
here is the header.
I am going to go ahead and say Open, and then say Start Upload.
And this is will upload my banner right into the media manager, and I can
scroll down to find it.
It's called Kineteco_header.jpg, and I am going to go ahead and choose that, and
say Insert, and then I am going to say Save.
When I refresh the front-end of the Web site, there. Now it's finally looking
like a real Web site,
now that I have a really pretty graphic designed header right here at the top of
the page. It's quite lovely, it blends all the colors together, and I can flip
through pages here on the Web site. You can see that finally it's looking
actually kind of professional, and not quite as low-key as it was before.
The last things you can customize here inside of the protostar template are the
Google Font for Headings, you can turn that on or off, or you can type in one of
the Google Font Names.
If you go to the Google Fonts Web site, you can choose some of those options.
The last thing I am going to show you is the Fluid Layout option here at the bottom.
Right now inside of Joomla,
I have talked to you about the responsive nature of these templates before.
If I make this page a bit smaller, just by dragging in the corner of my browser,
you'll see that this design snaps to different widths.
So it snaps, and looks like the header is not quite resizing here inside of
Firefox, and if I narrow this up a little bit more, and then as I continue to
narrow it, you will see that I have my navigation, I have my header up here at
the top of the page.
But I can change those breakpoints. So, right now it just sort of snaps in a few places.
By changing this to the Fluid Layout, and saying Save, and refreshing this
page, this will actually push the design all the way out of the edges of the
browser window. We will probably need it to change the treatment of this
header if we use this type of method. And as I make the page smaller here, it
collapses very, very nicely.
This is using Bootstrap's fluid grid, as opposed to its default grid; that's where
the changes are coming from in regards to this particular template.
I am going leave this set to you the, quote, Static Grid; it's kind of misleading
name, because both designs are responsive; it's just a question of whether it's
continuously resizing over different screen widths, or whether it has got some
more distinct breakpoints as part of that design.
So I am going to go ahead and say Save & Close, and I am going to refresh the
front-end of the Web site. So now we have a very cool looking Web site, and
we've made some big improvements using the interface for improving the
protostar template.