Advanced Template Manager

Getting Started

Introduction

In this video we’ll take a look at what the free version of Advanced Template Manager is and how you can use it in your Joomla website.

Advanced Template Manager is an extension that enhances the way the Joomla template manager works.

With Joomla!, we can normally only assign template styles to certain menu items.

With Advanced Template Manager we can assign template styles to just about anything we want. We can assign template styles by Joomla! Content, Users, Components, Devices and much more. All this gives us full control over our Joomla template styles.

The free version of Advanced Template Manager covers most of the important assignments we might need. The Pro version offers even more in-depth control and assignments.

For now, we’ll take a look at the Free version of Advanced Template Manager. We will get into the Pro version in another video.

To use Advanced Template Manager we will - of course - need to install it first. You can view the installation video to see how to install it.

We now have the latest version of Advanced Template Manager installed, which at the moment is version 3.7.0. And what you see here is a Joomla 3.9.2 setup. If you are using newer versions, things might look a bit different.

Once Advanced Template Manager is installed, the core Joomla template manager will be replaced with the Advanced Template Manager. The ‘Templates’ menu link under ‘Extensions’ will now open the Advanced Template Manager.

Currently, the only template style we have for the Site is the Default version of the Joomla Protostar template.

And of course, it’s set as the default template, meaning it will be used on all pages of the site.

Now, as we know, with Joomla we can create multiple styles from the same template. So, let’s create an alternative template style for Protostar that we can play with.

Of course, you can use any Template Style you have installed on your website.

So, let’s make a copy of the Default Protostar template. And we’ll customize this version by giving it a red color scheme.

So we change the Style Name to “protostar - Red”.

And we change the Template Color and the Background Color to a red scheme.

We will now play around with this template style.

Template Assignments

As mentioned before, the Joomla core template manager only offers you the ability to assign template styles by menu items.
Whereas Advanced Template Manager offers you a whole range of other stuff you can use to conditionally use a specific template style.

These assignments are the same set you might be already familiar with if you use Advanced Module Manager.

Each assignment type has three possible states: Ignore, Include, or Exclude. By default all assignments are ignored, meaning this template style will not be displayed anywhere. Pages that have no template styles specifically assigned to them will use the template style that is set as Default.

To use an assignment, you set the option to Include or Exclude depending on the desired effect. And as you can see, the green and red colouring helps us quickly recognise which is selected.

Menu Items

Just like we can in core, we can Include or Exclude template styles from any Menu Item we want. Say we want to use this template style on all the Fruit menu items. So we select ‘Fruit’ here. We also want to use it on these ‘Citrus’ and ‘Tree-growing’ menus, so we select them too.

But hold on, maybe we’ll add more of these subgroups under the ‘Fruit’ later. And we don’t want to have to remember to change this selection every time we add a new menu item.

So we can solve that with Advanced Template Manager, thanks to this ‘Also on child items’ setting here. Now we only have to select this parent ‘Fruit’ menu item and the template will be used on all current and future menu items placed under it.

Let’s check if that works. Well, this is the homepage, and it is using our default template style here.

But our red template is being used on the “Fruit” menu item.

And yes, it’s also used on these child menu items.

Let’s try something else.

Let’s say we want to assign this template only to the Home Page.

So now the home page uses our red template. And it is no longer used in the Fruits menu item.
What about on this Cats article?

It IS being used here. Why is that?

Well, Joomla will use the home page menu item for any page that hasn’t got a dedicated menu item. So, since the Animal pages are not linked to a menu item, we also see the red template here.

But not on the fruit pages because, as you can see, the ‘Fruit’ menu item is now active.

Home Page

But we want the template to only be used on the homepage. So how do we solve that?

Advanced Template Manager offers a specific “Home Page” assignment. This will only match the real homepage of the website, instead of pages using the Home menu item. So we’ll enable this instead. And we switch off the ‘Menu Item’ assignment by switching it back to ‘Ignore’.

So now the red template is used on the home page.

But it isn’t used any more on the Animal pages. Or any other page. So that’s what we wanted, now our red template is only used on the home page of the site.

Date & Time

Let’s take a look at more Assignment Types.

We can assign a template by certain Date Ranges. Meaning the template style will only be used during a certain time period. And we can also select the date range to be recurring every year. When that is enabled, it will use the template during the selected date range every year.

Languages

The Languages assignment here differs from the core template manager in that we can assign the template to a selection of more than one language.

Joomla! Content

An important assignment type that Advanced Template Manager adds, is the “Joomla! Content” one. This allows us to assign a template based on what Joomla content page is displayed.

We can assign a template to certain Page Types, meaning for example [show dropdown] that this template style will only be used when viewing Single Articles. Or when viewing Category Blog pages. Or in the Article Creation page.

Or we can specify exactly on which Categories we want the template to be used [Include] or not to be used [Exclude], with also the option of including child categories as well.

For example, let’s assign the template to the “Fruit” Category. And we’ll leave the ‘Page types’ set to ‘Category’ and ‘Articles’.

Now, the red template is used when viewing the “Fruit” category page and also on all ‘Fruit’ articles.

And we can even assign a template style to specific Articles, either by individually selecting the articles.

Or by assigning it to articles that contain certain keywords. Or articles that have been created by a certain author.

So let’s assign it to any article that contains the word ‘citrus’.

Now on Limes we see the red template, as we have the word ‘citrus’ in this article, here [select one of the ‘citrus’ words in the article]
Also on Oranges. But here it falls back to the default template.

Tags

Similarly to what we’ve seen with categories, we can also assign a template to items tagged with certain Tags.

User Group Levels

And we can even make a template style be used based on the User Groups. If we want to use a different template only to Guests, or only a certain group of people, we can.

We can also assign a template only to certain Components. For example, let’s assign it to the “Search” component.

Components

Now the red template is used whenever we are on a Search page.

But it isn’t used when we click through to the article.

URLs

Now this URL assignment is a powerful one. You can pretty much use this to assign the template style to any specific page or group of pages you want.

You can just put a part of the url in here that it should be used on. For instance, let’s activate this template style on all urls that have the word ‘berries’ in it.

So it is not used here. But it is on Blueberries and Strawberries. And if we search for ‘berries’, then yes, this page is also red, as this results page has ‘berries’ in the url.

This URL assignment gets even more powerful and interesting when using Regular Expressions. Now Regular Expressions are a whole new topic, so we won’t get into that now.

Devices

Advanced Template Managers also allows us to assign a Template to certain Devices. So if we want to use a template only on Desktop, or only on Mobile, we can. Let’s do that, assign it just to ‘Mobile’ devices.

So we don’t have the red template here on desktop.

But when viewing this page on a mobile device, Advanced Template Manager will automatically recognize the device. So now we do get the red template.

Operating Systems

Advanced Template Manager can also recognize what Operating System the visitor is using. Make sure to show the dropdown list].
So we could - for example - use a template only for visitors on Windows, a different template for Mac users, and another template for Linux.

The last assignment in the Free version of Advanced Template Manager is Browsers. Make sure to show the dropdown list.
So we can use a template depending on whether the visitor is using a certain version of Chrome, Firefox, or other browsers. For example, let’s set the template to only be used on Firefox.

Now, we don’t see the red template here on Chrome.

But if we visit the website from Firefox, we can see the red template being used.

As you’ve seen, the possibility are literally endless. Slowly scroll back up to show all the possible assignments. Take your time with it to make people digest everything that we’ve seen.

Matching Method

Now let’s go a little deeper! Maybe the best part is that you can use and combine any of these assignments. You don’t have to just use one.

To control how multiple assignments are applied, Advanced Template Manager offers a Matching method. If it’s set to “ALL”, the template will be used only if ALL the selected assignments are matched at the same time.

If it is set to “ANY”, the template will be published even if just one of the selected assignments is matched.

So we’ll set the category assignment to ‘Fruit’ and the tags assignment to ‘Green’. And the Matching method is set to ALL.

As you can see, the red template is used here on Apples. And on Limes. But not on Strawberries. Because, as we all know, strawberries are fruit, but they are not green.

Now if we switch this Matching Method to ANY, it means the template should be used if the category is ‘Fruit’ OR if the article has the tag ‘Green’. Only one of these assignments needs to pass.

So the red template is still used here on Apples. But now it is also used on Strawberries, because it’s a fruit. It isn’t used on Cats, as that is neither in the category Fruit. And the cats do not have the ‘Green’ tag. But it is used here on Dogs. Because, as we all know, dogs are not fruit, but they are green most of the year! ;)

Show Assignments

If we now look at this assignments page, it is not very easy to see on what pages this template will be used, as we need to scroll a lot to see the active assignments. Well, that’s where this ‘Show Assignments’ option comes in handy.

Now all the inactive assignments are hidden from view. That makes it a lot cleaner.

Extra Features - Notes & Description

In addition to the Assignment options, Advanced Template Manager also provides a few extra features.

As you can see here, we have a new “Notes” tab. Here we have a big text field that we can use to enter detailed internal notes.

You can click this button to insert your name and the current date.

This is useful to keep track of who added what note and when. If you click it again [click], you see it adds a new comment line at the top.

Back to the “Details” tab, here on the right we also have a Description field. This allows us to enter a short description that is displayed in the template listing.

For example, let’s write a short description for this template.

And here is our description under the template style name.

Extra Features - Colour Tags

In the template styles listing you might have also noticed an additional column here on the left.

Another feature offered by Advanced Template Manager, is the ability to assign colour tags to template styles. These colour tags are just for organizing template styles in the administrator side, they do not change the way template styles look on the frontend.

This comes very much in handy with our example.

Let’s assign a blue color tag to the default template, and a red color tag to our red variation.

This makes it a lot easier and faster to distinguish our template styles.

Now we only have 2 template styles here. But you might have a website using 20 template styles or more. Then this will greatly benefit you.

We can even sort template styles by colour if we need to!

We can customize the available colours in the Advanced Template Manager settings, which we’ll take a look at in a video dedicated to the Settings.

Obviously, you can have as many template styles as you want, each with their own unique sets of assignments.

Pro version

In the next video, we will get into the additional features and assignments offered by the Pro Version of Advanced Template Manager, such as Seasons, Months, Days and Time, Users, IP Addresses, Geolocating, and more.

Recap

So, to recap, we have seen all the Assignment Types offered by the free version of Advanced Template Manager, and how to use each of them.

And we’ve seen how to use cool extra features such as organizing template styles with colours or adding descriptions.

And we’re excited to see what the Pro version can do!

Let’s head over to the next videos that will cover the assignments the Pro version offers and the Settings. Or, if you need, first watch the installation video to see how easy it is to get Advanced Template Manager installed.