The aim of this document is to help you to understand how the graphical design of a Joomla! site is achieved using a Template. This is background to creating a site because the content and the appearance of a Joomla! web site are handled separately.
There are four aspects to designing a new Joomla! web site. These also apply to planning to make alterations(including upgrading versions J1.5 to J2.5+) to an existing site or planning for transferring a site that already exists in another form into the Joomla! CMS.
Everyone: who is going to create a Joomla! site.
Some aspects of Templates are beyond the scope of this document but there are links to helpful web documents at the end.
What is meant by the appearance of the Site? This may be an obvious question and even the answer sounds obvious, at least superficially.
A Joomla! site separates the management of the graphic design of web pages from the content. And thus the appearance is designed separately. You do not have to hand-craft each page and the pages are loaded into an already defined structure. You may already have experienced this in editing an article. When you create an article, it is placed somewhere in the content heirachy, positioned on a menu and much of the appearance of the text is controlled by the Joomla! system.
The layout and the appearance of the menu is handled by the Joomla! system through Templates.
The Templates themselves consist of a series of files to which we will return later.
You can see how the appearance of a site can be changed by using different Templates which illustrates the separation of appearance and content.
Joomla! ships with three Templates. You can see what these look like by changing the Default Template in localhost.
Look at the Front-end of the site and note:-
What you see depends on which Template is in use. (Joomla! ships with MilkyWay but the Template used for most of the screen illustrations in this series of documents is JA_Purity)
In the Back-end, use Template Manager:-
Using Template Manager you can alter the Default.
Screen of Template Manager - JA_Purity is the Default. The Help pages are useful.
Notice that you can:-
The Default Template is the one in use and usually applies to the whole site. Changing the Default Template alters the appearance of the site.
To see the result of this:-
You can also:-
Look at each of the three Templates in turn to give you an idea of the differences.
RHUK_Milkyway and JA_Purity allow some changes to be made from Edit in Template Management
This opens the Use Template [Edit] screen. With RHUK_Milkyway some colours can be altered.
There are more options for change than with the other Templates. Try them in the same way - remember to Apply the change before a Preview.
Note that there are also options on the Toolbar for Edit HTML and Edit CSS.
These give access to the files, so that changes can be made from the Template Manager. These facilities are not covered here for they are beyond the scope of this document. These files are, however, documented elsewhere.
Templates are a series of css, xml, php, html and image files that work together. They are stored in the templates directory of your site. On localhost you can see these files yourself. If you are using an existing web site, you may not be able to view the files (they will be on a server that can usually only be accessed by a few people - for security)
The Templates are located under the templates folder. For each template there are a series of folders with the relevant files for controlling the appearance and the parameters for the changes that can be made in the Template Manager pages.
You do not have to use one of the Templates shipped with Joomla! If you want to use a different Template, you can:-
To buy one with a suitable design, you need to find it, download it and install it. So some computing skills and familiarity with the Back-end of Joomla! is needed for this. This is beyond the scope of the documents in this series but is covered in the on-line resources listed below.
To write your own is also beyond the scope of the documents in this series. You need coding skills and to be the sort of developer who writes their own code, at least for part of the web site. Some background using CSS is helpful too. There are some detailed accounts in the on-line documents and books.
This series is about creating a web site which uses core Joomla! and uses one of the Templates that ships with Joomla!
And remember that you can change Templates after you have created the site.
Basic information on Templates
More detailed aspects
--Lorna Scammell January 2011