template-managerTemplates are Joomla Exensions that define the layout of your site.  There are Templates for the Front End and for the Back End or for the Administrative Interface. The core installation of Joomla 3 comes with four templates.  Two define the look and feel of the Front End and two define the look and feel of the Back End.  

The two core templates for the Front End are Protostar and Beez3. Each of these templates have a different approach to how they function and how they are set up.  Protostar is the default template - which means if you don't change it to something else within Template Manager, this is the Template defining your site's layout.  You can change it to Beez3 and the layout will look different.  Templates do not change your content, your modules or your components - but they might present them in a different manner.

There are hundreds of third-party templates to choose from - which are available for free or for purchase.  Some common sites for these templates are www.yootheme.com, www.rockettheme.com and www.gavick.com. The advantage to using a third party theme is that you can find one that fits your needs and not need to do a lot of custom styling.  Professional themes will have an Administrative Interface that allows you to quite a bit of customization without having to code the stylesheets by hand.  They may have options for background color, uploading your custom logo, different font options and color schemes.  They may even let you determine the column layout - such as two columns to the right or a column on each side of the content, or content and just one column.  The latest craze in themes these days is styling for a Responsive Layout so that the site automatically shifts and resizes for mobile devices such as phones and tablets.

Templates can be very complicated or they can be quite simple.  For those web developers that desire to customize their site to be unique, you may want to choose a fairly simple template that you can customize with the stylesheets and modify the layout by editing the index.php and templateDetails.xml.  For others that just want to quickly put up a website without custom coding, choose a premade template to your liking.  They are available in a wide variety of layouts.

One difference between templates is the way they label and place the Positions and Content. You cannot always just switch from one template to another without loosing some of your modules when you view the Front End.  The Modules are really lost - they are still in the database and still there when you look at Module Manager.  What happens is that the new template may have different names for their positions and or the stylesheet may modify their visibility.  What you need to do is simple go through each of your Modules and give them a new Postion that exists in the new Template.

Learn by Example

We are returning to our example site with Thomas Greenthumb and the website for his garden center.  Thomas wants his site to be very responsive because he is assigning an iPad each of the employees that helps people out in the garden center.  He wants to be sure that the customers are being given the correct information about the plants they are choosing, so each employee will be able to access the website and look up the proper growing conditions and planting instructions for each plant.  The employees can also access the catalog to see if more plants are on order if the stock is running low.  He is expecting seasoned customers and contractors to bring their own iPad or Smart Phone to look things up themselves.

Thomas has found a third-party template that he feels reflects his store and the needs of his site quite well.  He may need to do a little tweaking of the stylesheet, but he knows a web developer that he can hire to help him with the minor changes.  Thomas downloads the templates .zip file from the provider.  He doesn't have much information on his site at this point, so he isn't too worried about backing up the site - but he knows that he should if he has much on the site.  He uploads the template extension .zip file just like he uploaded the JCE Editor extension in the example under Understanding Extension Manager. Joomla installs all the files in the right places.  He then goes into Template Manager and sees his new template in the list.

Thomas clicks on the empty grey star next to his new template to set it as the Default Template for the Front End, it changes to a yellow star.  He clicks on View Site in the lower left corner and verifies that his template has been installed.  The Front End will reflect the styling and layout of the new template.  His template is a Front End template - which means that it won't change the look or feel of the Administrative Interface on the Back End.  It does have an Admin section for setting the different features that will modify the Front End of the site.

Note:  If possible, it is best to install your Template early on in site development.  Changing to a different template after placing all of your modules may mean that you spend some time reassigning the positions for the modules.  If you have done a great deal of custom styling - that can be lost as well since each template uses its own stylesheets.  Any changes that you made to the layout configuration in index.php and templateDetails.php won't be reflected in the new template.

Open source templates can be customized, but for our examples here on the joom3 site - we are keeping to the styling and positions set by the template.