Joomla! Documentation - User contributions [en]

Switching templates

2008-04-09T17:29:28Z

Alandove: /* How to switch templates */

=== How to switch templates ===

To change the default Template for the Site (Front-end) or Administrator (Back-end), follow these steps:

{{:To access the Template Manager|}}

From here you manage your templates for Front-end and Back-end. The default view shows your installed Front-end templates.
The default template for the Front-end is marked with a star; in the image below it is rhuk_milkyway.

To change the default template to beez:
* click the radio button left from the template name to select it;
* click "Default" on the toolbar;
the star changes from rhuk_milkyway to beez and you are done.

[[Image:Tpl_tut_switch_template_2.png]]

----

'''Assign more than one template for the Front-end'''

Joomla! gives you the option of switching between two or more templates on the Front-end. This is done with "Menu Assignment", so you can set different templates for each menu or only a menu item.

Click on: Extensions -> Template Manager

You see your installed templates, now choose a template which is '''not''' set as your default one.
Click on the template name '''or''' hit the radio button to the left of the template name, and click "Edit" on the toolbar.
You now see the page "Template: [ Edit ]", click the radio button "Select from List" in the "Menu Assignment" block and choose the menu items on which the template will be shown.
Click "Save" on the toolbar and you´re done.

[[Image:Tpl_tut_switch_template_3.png]]

<noinclude>[[Category:Beginners]]</noinclude>
<noinclude>[[Category:Templates]]</noinclude>
<noinclude>[[Category:Topics]]</noinclude>

Switching templates

2008-04-09T17:26:54Z

Alandove: /* How to switch templates */

=== How to switch templates ===

To change the default Template for the Site (Front-end) or Administrator (Back-end), follow these steps:

{{:To access the Template Manager|}}

From here you manage your templates for Front-end and Back-end. The default view shows your installed Front-end templates.
The default template for the Front-end is marked with a star; in the image below it is rhuk_milkyway.

To change the default template to beez:
* click the radio button left from the template name to select it;
* click "Default" on the toolbar;
the star changes from rhuk_milkyway to beez and you are done.

[[Image:Tpl_tut_switch_template_2.png]]

----

'''Assign more than one template for the Front-end'''

Joomla! gives you the possibility to switch between two ore more templates on Front-end. This will be done with "Menu Assignment", so you can set different templates for each menu or only a menu item.

Click on: Extensions -> Template Manager

You see your installed templates, now choose a template which is '''not''' set as your default one.
Click on the template name '''or''' hit the radio button left from template name and click "Edit" on the toolbar.
You now see the page "Template: [ Edit ]", click the radio button "Select from List" in the "Menu Assignment" block and choose the menu items on which the template will be shown.
Click "Save" on the toolbar and you´re done.

[[Image:Tpl_tut_switch_template_3.png]]

<noinclude>[[Category:Beginners]]</noinclude>
<noinclude>[[Category:Templates]]</noinclude>
<noinclude>[[Category:Topics]]</noinclude>

J1.5:Joomla! 1.5 Template Tutorial

2008-04-09T17:20:22Z

Alandove: New page: The following is the current Table of Contents for the Template Tutorials:- {{Tutorial:Table of Contents}}

The following is the current Table of Contents for the Template Tutorials:-
{{Tutorial:Table of Contents}}

Web designers

2008-04-09T17:19:43Z

Alandove:

{{Web designer profile}}

* [[Accessibility]]
* [[Beez]] - an accessible default template
* [[Creating clickable background images using CSS]].
* The [[Joomla! 1.5 Template Tutorial]] is a work in progress. If you would like to help out with it, please take a look at the [[Joomla! 1.5 Template Tutorials Project | main project page]] and the [[Outline for Template Tutorials]].
* [[jdoc statements]] for templates
* Modify the [[favicon]]

What can you do with a template?

2008-04-09T16:59:21Z

Alandove:

A template is used to manipulate the way content is delivered to a web browser or screen reader. Here are some ways you can employ this on your Joomla!-powered site.

'''Layout'''

The template is the place where the design of the main layout is set for your site. This includes where you place different elements (components, modules, and plugins), which are responsible for different types of content. For example:
#The various menus (you can chose from existing options and create your own)
#Advertising banners
#Polls
#The main body of the page (you can select from different styles such as typical blog layout, a news article, etc.)

If the template is designed to provide choices, you can also "dynamically" alter the content placement on your site, perhaps putting the main menu on the right or left side of the screen.

'''Color scheme'''

Using CSS within the template design, you can change the colors of your backgrounds, text, links or just about anything that you could within your ordinary (x)html code.

'''Images and effects'''

You can also control the way images are displayed on the page, and even create flash-like effects or include [http://en.wikipedia.org/wiki/AJAX AJAX] applications such as drop-down menus.

'''Fonts'''

The same applies to fonts. The designs for these are all set within the template's CSS file(s) to create a uniform look across your entire site, which makes it fantastically easy to change the whole look just by altering one or two files rather than every single page.

'''Browser specific solutions'''

A template can be designed to alter how it displays on different web browsers, allowing you to take full advantage of the latest developments without making your site inaccessible to those who are not able to run "up-to-the-minute" system upgrades (such as certain companies who limit what software their employees can use).
[[Category:Templates]]

What is the purpose of a template?

2008-04-09T16:49:05Z

Alandove: /* Why does Joomla! Use templates? [A real beginners guide!] */

=== What is the purpose of a template? ===

A template controls the overall look and layout of your site. It provides the framework that brings together common elements, modules and components as well as providing the cascading style sheet for your site. Both the front-end and the back-end of your site have templates.

When Joomla! is first installed several templates are automatically included. You can find many more templates at other websites. Some are available without charge under various licenses, and some are for sale. In addition, there are many designers available who can make custom templates. You can also make your own template.

Templates are managed with the Template Manager, which is located on the Extensions menu on the back-end (administrator) area of your site.
<noinclude>[[Category:Beginners]][[Category:Templates]][[Category:Topics]]</noinclude>

=== Why does Joomla! Use templates? [A real beginners guide!] ===

The way Joomla! is designed separates out the key tasks involved in producing a website for efficient maintenance of the software. One of these tasks is to create the aesthetic (the look, feel and layout) of the site. This includes making decisions such as which content elements (components, modules and plugins) you may want to place in any given page.

When producing a web page, the location of most elements will stay the same (menus, banner locations, sidebars etc.). Additionally, you will want to create the same look (fonts, header styles, colour scheme etc.) for every page. For some parts of the site you may want to alter the general feel to indicate a different purpose for those pages (such as a blog section). A little planning is required for this, but once you have settled on the overall layout for your site, you then have the task of producing each page of content.

And that’s where the template comes in. You can either write all the code for each page separately, or use a template for each major section of your site so that when you want to create a new page you simply “fill in the blanks”. Okay, perhaps its not that simple, but this tutorial is designed to give you a step by step guide for effective template use, starting with how to use one and ending with how to create one for yourself.

#Use one of the templates supplied with Joomla!
#Download one of the many free offerings from the internet
#Pay for one to be modified or produced from scratch if your needs cannot be met any other way.

Summary – a template controls the look of your site and makes your life a great deal easier when creating new pages.

For further details on what you can achieve with templates go the next section, “What can I do with templates?”

JDOC:Joomla! 1.5 Template Tutorials Project/Outline

2008-04-09T16:16:23Z

Alandove:

Suggested outline for the new template tutorials. This suggests a breakdown into numerous smaller tutorials.

= Introduction to Joomla! templates =
* [[What is the purpose of a template?|What is the purpose of a template?]]
* [[What can you do with a template?|What can you do with a template?]]
* [[Templates supplied with Joomla!|Templates supplied with Joomla!]]
* [[How to switch templates|How to switch templates]]
* [[How to install templates|How to install templates]]

= Understanding Joomla! templates =
* [[Where are templates located?|Where are templates located?]]
* [[What is the typical template directory structure?|What is the typical template directory structure?]]
* [[What is the purpose of the templateDetails.xml file?|What is the purpose of the templateDetails.xml file?]]
* [[What is the purpose of the index.php file?|What is the purpose of the index.php file?]]

= Upgrading a Joomla! 1.0.x template =
* [[New features introduced in Joomla! 1.5 templates|New features introduced in Joomla! 1.5 templates]]
* [[Legacy mode|Legacy mode]]
* [[Upgrading your index.php file|Upgrading your index.php file]]
* [[Upgrading your templateDetails.xml file|Upgrading your templateDetails.xml file]]
* [[Changes to CSS classes|Changes to CSS classes]]
* [[Replacing patTemplate|Replacing patTemplate]]

= Customising the default Joomla! templates =
* [[Pros and cons of table layout]]
* [[Understanding the Milkyway template]]
* [[Understanding the Beez template]]
* [[Customizing the Milkyway template]]
* [[Customizing the Beez template]]
* [[Troubleshooting modified templates]]
* [[What to avoid when modifying a template]]

= Creating a basic Joomla! template =
* [[Setting up a directory structure]]
* [[Verifying permissions]]
* [[How to edit the files]]
* [[Creating a basic templateDetails.xml file]]
* [[Creating a basic index.php file]]
* [[Testing the template]]

= More advanced Joomla! templates =
* [[Quirks mode and how to avoid it|Quirks mode and how to avoid it]]
* [[Which DocType header to use|Which DocType header to use]]
* [[Setting up page width|Setting up page width]]
* [[About CSS page layouts|About CSS page layouts]]
* [[Source ordering|Source ordering]]
* [[Horizontal and vertical centering]]
* [[PHP essentials|PHP essentials]] (eg. echo, if-then-else)
* [[Adding images|Adding images]]
* [[Changing image paths of default system images]]
* [[Declaring module positions|Declaring module positions]]
* [[Finding module positions on any given page|Finding module positions on any given page]]
* [[Changing the site favicon|Changing the site favicon]]

= Cascading Style Sheets (CSS) =
* [[Where to put CSS files|Where to put CSS files]]
* [[Using multiple CSS files]]
* [[List of Joomla! generated core CSS classes (with explanations)]]
* [[Suggested CSS methods to introduce new declarations or alter generated ones]]
* [[Page class suffixes|Page class suffixes]]
* [[Module class suffixes|Module class suffixes]]
* [[Supporting multiple browsers]]

= More on Joomla! modules =
* [[Counting modules in a given module position|Counting modules in a given module position]]
* [[Counting modules in multiple module positions|Counting modules in multiple module positions]]
* [[Collapsing columns|Collapsing columns]]
* [[Creating rounded corners|Creating rounded corners]]
* [[What is module chrome?|What is module chrome?]]
* [[Applying custom module chrome|Applying custom module chrome]]
* [[Cascading module chrome styles|Cascading module chrome styles]]

=Web Standards=
* [[What are web standards?]]
* [[Why follow web standards?]]
* [[Considering future browsers and new devices]]
* [[Considering backwards compatibility]]
* [[Web standards resources]]

= Web content accessibility =
* [[Introduction to web content accessibility|Introduction to web content accessibility]]
* [[Section 508 and other laws about disability access]]
* [[Accessibility standards|Accessibility standards]]
* [[Validating against accessibility standards|Validating against accessibility standards]]
* [[Source ordering|Source ordering]]

= Template parameters =
* [[Defining a parameter in templateDetails.xml|Defining a parameter in templateDetails.xml]]
* [[Parameter types supported|Parameter types supported]]
* Page for each parameter type
* [[Retrieving parameter data in a template file|Retrieving parameter data in a template file]]

= Fonts and typography =
* [[Font families|Font families]]
* [[Font metrics|Font metrics]]
* [[Text resizing|Text resizing]]

= Template overrides =
* [[How to override the output from the Joomla! core|How to override the output from the Joomla! core]]

= Template translations =
* [[Overview of translation]]
* [[Creating a language definition (INI) file|Creating a language definition (INI) file]]
* [[Adding a language file to the templateDetails.xml file|Adding a language file to the templateDetails.xml file]]
* [[Embedding translatable strings in the template file|Embedding translatable strings in the template file]]

= Distributing Joomla! templates =
* [[How to choose a suitable license|How to choose a suitable license]]
* [[How does template installation work?|How does template installation work?]]
* [[File structure for packaging|File structure for packaging]]
* [[Creating a thumbnail preview image|Creating a thumbnail preview image]]
* [[Packaging the template|Packaging the template]]

= Advanced topics =
* [[How are templates executed?|How are templates executed?]]
* [[System error pages|System error pages]]
* [[Custom error pages|Custom error pages]]
* [[Adding JavaScript|Adding JavaScript]]
* [[Mootools JavaScript library]]
* [[Adding stylesheets for other output devices]]
* [[Enhancing template performance|Enhancing template performance]]
* [[Administrator (back-end) templates|Administrator (back-end) templates]]

= Appendix =
* [[What jdoc include types are available?|What jdoc:include types are available?]]
* [[Standard module chrome styles|Standard module chrome styles]]
* [[Default CSS classes|Default CSS classes]]
* [[Configuration variables deprecated in Joomla! 1.5|Configuration variables deprecated in Joomla! 1.5]]
* [[Where can you learn about HTML?]]
* [[Where can you learn about CSS?|Where can you learn about CSS?]]
* [[Where can you learn about Javascript?]]
* [[Where can you learn about Mootools]]
* [[Where can you learn about PHP]]
* [[Where can you learn about MySQL?]]
* [[Where can you learn about server configuration]]
* [[Where can you learn about Unix?]]
* [[Operators for use with the countModules function|Operators for use with the countModules function]]
* [[Objects methods and properties available from your template|Objects methods and properties available from your template]]
* [[Security do's and don't's|Security do's and don't's]]
* [[AJAX|AJAX]]
* [[Where to find diagnostic tools|Where to find diagnostic tools]]
* [[Where to find design tools|Where to find design tools]]
* [[Glossary|Glossary]]
[[Category:Templates]]

J1.5:Installing a template

2008-04-09T15:16:49Z

Alandove: /* How to install templates */

=== How to install templates ===

'''Install via Admin Panel''' (packed template file)

Log into the back-end of your site (''www.your-site.com''/administrator/)

Click on: Extensions -> Install/Uninstall

[[Image:Tpl_tut_install_template_1.png]]

You see the page "Extension Manager"

From here you can install your Templates, Plugins, Modules, Components and Languages. You have three options:
* Upload Package File - (select a package from your PC, upload and install it)
* Install from Directory - (enter the path where the package is located on your server)
* Install from URL - (enter the URL to the package)
Here, we choose the first method: Upload Package File

Select the package from your PC and click the button "Upload File & Install"

[[Image:Tpl_tut_install_template_2.png]]

If the package contains no errors you are done and get a success message like the one below.

[[Image:Tpl_tut_install_template_3.png]]

----

'''Install via FTP''' (unpacked template file)

Templates can also be installed via FTP without packaging them. Simply select the template folder on your PC and upload it to your server, using your favorite FTP software. Be sure you upload the template folder to the directory: /''path_to_joomla''/templates/ - where /''path_to_joomla''/ is the location of your Joomla! installation on the server. This method is mostly used when you have created a template yourself, and do not want to have to package it to install the template, or if you want to upload more than one template at once.

''Note: Do not try to use FTP to install Components, Modules and Plugins if you are a beginner/novice. These items need database entries which have to be inserted manually if you bypass the package installer.''

<noinclude>[[Category:Beginners]]</noinclude>
<noinclude>[[Category:Templates]]</noinclude>
<noinclude>[[Category:Topics]]</noinclude>