Design appearance using default Templates: Joomla! 1.5
From Joomla! Documentation
Revision as of 12:49, 13 January 2011 by LornaS
GSheader The aim of this document is to help you to understand the graphical layout of a Joomla! site as background to creating a site.
- 1 Who is it written for
- 2 Introduction
- 3 Change a Template to demonstrate that appearances change
- 4 What is a Template and where is it located?
- 5 More about Templates
- 6 Planning
- 7 Cross-references and further information
Who is it written for
Everyone: who is going to create a Joomla! site.
- It will also be useful to someone who is going to alter a Joomla! site
- It is written on the assumption that you do not have experience of designing the appearance of a 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 it is designed separately. You do not have to hand-craft each page but 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. These are a series of files to which we will return later.
Change a Template to demonstrate that appearances change
You can see how the appearance of a site can be changed by using different Templates which illustrates the separation of appearance and content.
- Use a web site with content.
- The localhost site with the sample content is a useful example. (cross ref to Back-end and to localhost doc).
Joomla! ships with three Templates. You can see what these look like by changing the Templates in the Sample data in localhost.
- Login to the Back-end of the site with sample data
- Login to the site itself
Look at the site and note the colours and the layout of the screen. What you see depends on which Template is in use. It ships with MilkyWay and the Template used for most of the screen illustrations in this series of documents is JA_Purity.
In the Back-end, look at Template Management
- Menu Extensions
- Choose Template Manager
Here you can work on a template and alter the Default, which is JA_Purity in this screen.
The Help pages here are useful - (include Help icon) Screen of Template Management GSTemplateMan
Notice that from here you can:-
- set the Default
- Edit the Template
Change the Default Template
The Default Template is the one in use and usually applies to the whole site. (You can assign different Templates to different pages - cross ref) Changing the Default Template alters the appearance of the site. You can see this by altering the Default.
- Click on the radio button to select one of the Templates
- Click the Default button on the menu
- Refresh the Site page
- It will have a different appearance although the content will be the same.
- Look at each in turn.
Summary of Templates shipped with Joomla!
- Makes use of CSS (Cascading Style Sheet) fomatting. It needs experience to do the customization
- This is the system's default template. It has only a few configurations.
- It is highly configurable and includes a large number of parameters. It has the most flexibility without having to modify the code behind it.
Changes to the Templates
RHUK_Milkyway and JA_Purity allow some changes to be made from Edit in Template Management
- Make the Default Template RHUK_Milkyway
- Click on the name of the Template or Click Edit
This opens the Use Template [Edit] screen.
With RHUK_Milkyway some colours can be altered.
- Try a different colour
- Click Apply
- Either and then refresh the Site page to see the results
- Click Preview (which Previews what the page would look like when the changes are made.)
Repeat with JA_Purity
- Make the Default Template JA_Purity
- Click on the name of the Template or Click Edit
Here there are more options for change. Try them in the same way - remember to Apply the change before a Preview.
Other Editing with the Template [Edit] screen 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. They are beyond the scope of this document. These files are, however, documented elsewhere - refs at end probably.
What is a Template and where is it located?
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. 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)
- Use the localhost installation
- Don't edit or delete any of them - obviously.
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.
More about Templates
You do not have to use one of the Templates shipped with Joomla! If you want to use a different Template, you can:-
- Get one from the web and install it - they are sometimes free but you normally have to pay for them.
- Write a new one yourself
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.
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 for part of the web site.(there are other resources that do- cross ref to setting one up for yourself)
This series is about creating a web site which uses core Joomla! and uses one of the Templates that ships with Joomla! So for planning the site, all you have to do is to decide which one has the best appearance for what you want to do.
Cross-references and further information
Basic information on Templates
- Joomla! Administrator's Manual - on-line
- Quick start guide Thisalso has something on your own design and writing your own templates.
More detailed aspects
Get one off the web
- one ref!
--Lorna Scammell January 2011