Actions

J1.5

Difference between revisions of "Design appearance using default Templates: Joomla! 1.5"

From Joomla! Documentation

(Change templates)
 
(45 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{:GSheader}}
+
{{version/tutor|1.5}}{{:Getting Started Page Index/1.5}}
The aim of this document is to help you to understand the graphical layout of a Joomla! site as background to creating a site.
+
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.
 +
 
 +
===Background to creating a new Joomla! 1.5 web site===
 +
{{:DesignAim}}
  
 
===Who is it written for===
 
===Who is it written for===
Line 8: Line 11:
 
Some aspects of Templates are beyond the scope of this document but there are links to helpful web documents at the end.
 
Some aspects of Templates are beyond the scope of this document but there are links to helpful web documents at the end.
  
===Introduction===
+
==Templates and the appearance of a site==
 
What is meant by the appearance of the Site? This may be an obvious question and even the answer sounds obvious, at least superficially.
 
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.
+
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 layout and the appearance of the menu is handled by the Joomla! system through Templates.  
Line 21: Line 24:
  
 
* Use a web site with 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). 
+
::The localhost site with the sample content is a useful example.  
  
 
Joomla! ships with three Templates. You can see what these look like by changing the Default Template in localhost.  
 
Joomla! ships with three Templates. You can see what these look like by changing the Default Template in localhost.  
Line 29: Line 32:
  
 
Look at the Front-end of the site and note:-
 
Look at the Front-end of the site and note:-
*the colours
+
:*the colours
*the layout of the Menus
+
:*the layout of the Menus
*the layout of the screen
+
:*the layout of the screen
 
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)
 
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)
 
====Change templates====
 
====Change templates====
In the Back-end, look at Template Management
+
In the Back-end, use Template Manager:-
* Pull down the menu called Extensions
+
:* Pull down the menu called Extensions
: Choose Template Manager
+
:: Choose Template Manager
Using Template Management you can alter the Default.
+
Using Template Manager you can alter the Default.
  
Screen of Template Management - JA_Purity is the Default here. The Help pages here are useful - (include Help icon)
+
'''Screen of Template Manager''' - JA_Purity is the Default. The Help pages are useful.
[[Image:GSTemplateMan.png|frame|center]]
+
[[Image:GSTemplateMan.png|frame|center|'''The Template Manager showing the three Templates that ship with Joomla! Here the Template in use is JA_Purity''']]
GSTemplateMan
+
  
Notice that from here you can:-
+
Notice that you can:-
*set the Default  
+
:*set the Default  
*Edit the Template
+
:*Edit the Template
  
 
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.  
 
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.  
  
*Alter the Default.
+
====Alter the Default====
  
:Click on the radio button to select one of the Templates
+
:*Click on the radio button to select one of the Templates
:Click the Default button on the menu
+
:*Click the Default button on the menu
  
 
To see the result of this:-
 
To see the result of this:-
*Click Preview
+
:*Click Preview
:This shows the site with the different Default Template
+
::This shows the site with the different Default Template
 
You can also:-
 
You can also:-
*View the Front-end - and refresh it
+
:*View the Front-end - and refresh it
:It will have a different appearance although the content will be the same.
+
::It will have a different appearance although the content will be the same.
  
 
Look at each of the three Templates in turn to give you an idea of the differences.
 
Look at each of the three Templates in turn to give you an idea of the differences.
Line 66: Line 68:
  
 
;Beez
 
;Beez
:http://docs.joomla.org/Beez
+
:[[Beez]]
 
:Makes use of CSS (Cascading Style Sheet) fomatting. It needs experience to do the customization  
 
:Makes use of CSS (Cascading Style Sheet) fomatting. It needs experience to do the customization  
 
;RHUK_Milkyway
 
;RHUK_Milkyway
:http://docs.joomla.org/Tutorial:Customising_the_Milkyway_template
+
:[[Customising the Milky Way template]]
 
:This is the system's default template. It has only a few configurations.
 
:This is the system's default template. It has only a few configurations.
 
;JA_Purity
 
;JA_Purity
:http://docs.joomla.org/Ja_purity
+
:[[Ja_purity]]
 
:It is highly configurable and includes a large number of parameters. It has the most flexibility without having to modify the code behind it.
 
: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 Templates====
+
===Changes to Templates using Template Manager===
 
RHUK_Milkyway and JA_Purity allow some changes to be made from Edit in Template Management
 
RHUK_Milkyway and JA_Purity allow some changes to be made from Edit in Template Management
 +
====RHUK_Milkyway====
 +
:*Make the Default Template RHUK_Milkyway
 +
:*Click on the name of the Template or Click Edit
  
*Make the Default Template RHUK_Milkyway
+
This opens the Use Template [Edit] screen. With RHUK_Milkyway some colours can be altered.
*Click on the name of the Template or Click Edit
+
  
This opens the Use Template [Edit] screen.
+
:*Try a different colour
 
+
:*Click Apply
With RHUK_Milkyway some colours can be altered.
+
::Either
 
+
:*Refresh the Site page to see the results
*Try a different colour
+
*Click Apply
+
*Either  and then refresh the Site page to see the results
+
 
::Or
 
::Or
*Click Preview (which Previews what the page would look like when the changes are made.)
+
:*Click Preview (which Previews what the page would look like when the changes are made.)
  
'''Repeat with JA_Purity'''
+
====JA_Purity====
*Make the Default Template JA_Purity
+
:*Make the Default Template JA_Purity
*Click on the name of the Template or Click Edit
+
:*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.
+
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.
  
'''Other Editing with the Template [Edit] screen'''
+
====Other Editing with the Template [Edit] screen====
 
Note that there are also options on the Toolbar for Edit HTML and Edit CSS.
 
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.
+
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.
  
===What is a Template and where is it located?===
+
==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
+
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)
 +
[[Image:GSfilesTemplateSample.png|frame|right|'''The location of the template files for ja_purity under the sample site on localhost''']]
 +
:* Use the localhost installation
 
:Don't edit or delete any of them - obviously.
 
: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.  
+
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.
 
+
GSfilesTemplateSample
+
  
 
===More about Templates===
 
===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:-
 
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.
+
:*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
+
:*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)
+
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.
  
==Planning==
+
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! 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.
+
  
 +
==Planning your site==
 +
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.
  
 +
And remember that you can change Templates after you have created the site.
  
==Cross-references and further information==
+
==Further information==
  
Basic information on Templates
+
'''Basic information on Templates'''
*[http://docs.joomla.org/Administrators Joomla! Administrator's Manual - on-line ]
+
*[http://help.joomla.org/ghop/feb2008/task048/joomla_15_quickstart.pdf Quick start guide ] This has something on your own design and writing your own templates.
*[http://help.joomla.org/ghop/feb2008/task048/joomla_15_quickstart.pdf Quick start guide ] Thisalso has something on your own design and writing your own templates.
+
'''More detailed aspects'''
*http://docs.joomla.org/Tutorial:Introduction_to_Joomla!_templates
+
*[[JDOC:Joomla! 1.5 Template Tutorials Project/Outline|Outline for Template Tutorials]]
More detailed aspects
+
*[[Introduction to Joomla! templates]]
*http://docs.joomla.org/Outline_for_Template_Tutorials
+
*[[Customising the Beez template]]
*http://docs.joomla.org/Beez
+
*[[Customising the JA Purity template]]
*http://docs.joomla.org/Ja_purity
+
*[[Customising the Milky Way template]]
*http://docs.joomla.org/Tutorial:Customising_the_Milkyway_template
+
'''Advanced documentation'''
Get one off the web
+
*[[Joomla! 1.5 Template Tutorial]]
* one ref!
+
*[[Template Development]]
 +
'''Books'''
 +
*See [[References|Books and references]] All books have material on Templates. The most detailed is in ''Joomla! Bible''
  
  
 
----
 
----
 
--[[User:LornaS|Lorna Scammell]] January 2011
 
--[[User:LornaS|Lorna Scammell]] January 2011

Latest revision as of 06:20, 6 June 2013

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.

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.

Background to creating a new Joomla! 1.5 web site

Tip-icon.png
Designing a Joomla! Website

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.

  • The content hierarchy:
    • Joomla 1.5 The content hierarchy is defined as Sections with Categories. (Another way of visualising this, Sections are the labeled drawers of a filing cabinet and Categories are the file folders in each drawer.)
    • Joomla 2.5 The Sections have been removed and now the content hierarchy is Categories and Subcategories.
  • Who you expect to use the site and what you want them to be able to do
  • The layout of the menus and the position of some functionality on the page
  • The graphical design of the whole site
These should all be based on the purpose and expected content of the site, so you do need a clear idea of what you are trying to communicate and plan accordingly. Easier said than done!

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.

Templates and the appearance of a site

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.

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.

Joomla! ships with three Templates. You can see what these look like by changing the Default Template in localhost.

  • Login to the Back-end of the site with the Sample data
  • Login to the Front-end of the site itself in a different Tab or window (so you can look at both)

Look at the Front-end of the site and note:-

  • the colours
  • the layout of the Menus
  • the layout of the screen

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)

Change templates

In the Back-end, use Template Manager:-

  • Pull down the menu called Extensions
Choose Template Manager

Using Template Manager you can alter the Default.

Screen of Template Manager - JA_Purity is the Default. The Help pages are useful.

The Template Manager showing the three Templates that ship with Joomla! Here the Template in use is JA_Purity

Notice that you can:-

  • set the Default
  • Edit the Template

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.

Alter the Default

  • Click on the radio button to select one of the Templates
  • Click the Default button on the menu

To see the result of this:-

  • Click Preview
This shows the site with the different Default Template

You can also:-

  • View the Front-end - and refresh it
It will have a different appearance although the content will be the same.

Look at each of the three Templates in turn to give you an idea of the differences.

Summary of Templates shipped with Joomla!

Beez
Beez
Makes use of CSS (Cascading Style Sheet) fomatting. It needs experience to do the customization
RHUK_Milkyway
Customising the Milky Way template
This is the system's default template. It has only a few configurations.
JA_Purity
Ja_purity
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 Templates using Template Manager

RHUK_Milkyway and JA_Purity allow some changes to be made from Edit in Template Management

RHUK_Milkyway

  • 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
  • Refresh the Site page to see the results
Or
  • Click Preview (which Previews what the page would look like when the changes are made.)

JA_Purity

  • Make the Default Template JA_Purity
  • Click on the name of the Template or Click Edit

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.

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 for they are beyond the scope of this document. These files are, however, documented elsewhere.

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 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 location of the template files for ja_purity under the sample site on localhost
  • 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 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.

Planning your site

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.

And remember that you can change Templates after you have created the site.

Further information

Basic information on Templates

  • Quick start guide This has something on your own design and writing your own templates.

More detailed aspects

Advanced documentation

Books

  • See Books and references All books have material on Templates. The most detailed is in Joomla! Bible



--Lorna Scammell January 2011