Tutorial:More advanced Joomla! templates

Jump to: navigation, search
 This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment.

If you would like to try writing this article you're welcome to do so. The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar.

Thank you.

Contents

Which DocType header to use

Current thinking is that XHTML 1.0 Transitional should be used for Joomla! templates.

List of recommended DocTypes for different circumstances:-



References about recommended DocTypes:




This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment.

If you would like to try writing this article you're welcome to do so. The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar.

Thank you.

About CSS page layouts

Professional websites separate styling from content. There are many reasons for this, the most obvious (to a developer) being the ability to control the appearance of many pages by changing one file. Styling information includes: fonts; backgrounds; images (that recur on every page); position and dimensions of elements on the page. Your HTML file will now be left with: header information; a series of elements; the text of your website. Because you are creating a Joomla! template, you will actually have: some header information; php code to request the rest of the header information; a series of elements; php code to request each module position; php code to request the main content.

Style information is coded in CSS, cascading style script, and usually stored in files with the suffix .css. A webpage contains a link to the associated .css file so a browser can find the appropriate style information to apply to the page. CSS can also be placed inside a html file between <script></script> tags.

All CSS code is applied to an element of the html/xml page. If you want a style to encompass a whole page, you would probably apply it to the <body> element. You can apply styles to any html element such as <p>, <table> or <div> elements. To style a particular element it needs to have an ID. For example, to apply styles to the <div> containing the title, you would first include an ID in the html - <div ID="title">.

This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment.

If you would like to try writing this article you're welcome to do so. The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar.

Thank you.
Horizontal centering
This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment.

If you would like to try writing this article you're welcome to do so. The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar.

Thank you.

PHP essentials

Many web designers and casual website owners are not conversant with the PHP language in which Joomla! is written and since Joomla! templates usually contain PHP statements it is necessary to understand at least a little of the language in order to be able to create or customise templates. This chunk will describe, in simple terms, how to use each aspect of PHP in the context of a Joomla! template. For example, a simple explanation of the PHP if-then-else syntax using extracts from a template for illustration.

The best resource to learn PHP is probably hands on experience and Joomla can provide that to you thanks to it's native PHP code. This can be overwhelming for people who have not programed before. Though Joomla is easy enough to install with the help of the community and a little of your time you'll have people asking you to do their websites.

One place that has a nice short list if functions and examples is http://en.wikiversity.org/wiki/25_Essential_PHP_Functions which is good to get familiar with PHP. Though for an extensive function list, explanations, and examples go to http://www.php.net.

Once you have the basics of PHP you'll need to get the basics of the Joomla PHP syntax. Start by looking at some existing extensions and check out the code and also take a look at some these Tutorials about Joomla:

How to create a Joomla! Plugin

Developing a Model-View-Controller Component - Part 1

Developing a Model-View-Controller Component - Part 2 - Adding a Model

Developing a Model-View-Controller Component - Part 3 - Using the Database

Developing a Model-View-Controller Component - Part 4 - Creating an Administrator Interface

That will help you get familiar with some of the functions available within Joomla's system and what they do (using the API). Take paticular care to understand the MVC (model view control) setup.

(eg. echo, if-then-else)
This article is a small, well-defined item that could be completed by someone with a reasonable knowledge of the subject matter and a modest time commitment.

If you would like to try writing this article you're welcome to do so. The subject may be self-evident, but if not then further details should be available on the discussion page. Please add {{inuse}} at the top of this page while editing. For other small, well-defined tasks, please look in the Cookie jar.

Thank you.
Declaring module positions

In order for Module positions to be available for selection in the Module Manager they must be declared in the templateDetails.xml file for your template. The <positions> element in this file contains sub-elements for each Module position that is supported by the template.

For example, here is a typical <positions> element in the templateDetails.xml file for a typical template. 

<positions>
	<position>left</position>
	<position>right</position>
	<position>top</position>
	<position>user1</position>
	<position>user2</position>
	<position>user3</position>
	<position>user4</position>
</positions>

You can add and define new Module positions and give them any name you like, but it is recommended that you support at least those shown in the example above. This is so that some level of consistency is maintained when switching Templates or using multiple Templates on a single site.

Further information on placement of the module position in the template file can be found in Use and Implementation.




To get a visual indication of all module positions used on a page you can follow this procedure:-

  • navigate to the page in your web browser.
  • click into the URL field in your browser.
  • look for any "parameters" at the end of the URL. These are separated from the main part of the URL by a question mark. For example, in the URL "http://mydomain.com/index.php?id=17", the "id=17" is a parameter.
  • if there are no parameters, append "?tp=1" to the URL and press RETURN. For example, "http://mydomain.com/index.php?tp=1".
  • if there are already parameters in the URL, append "&tp=1" to the URL and press RETURN. For example, "http://mydomain.com/index.php?id=17&tp=1".
  • the module positions will be outlined in red.

Note that in some circumstances there may be module positions available that are not outlined in red. This can happen when a template defines those module positions as conditional on there being modules enabled in that position. If there are no modules enabled in that position then the template may adapt and the position will not be visible.



  1. Create a 16x16 pixel image. You may use graphic software such as Photoshop, Gimp or Windows Paint or an online tool such as http://antifavicon.com/
  2. Convert to ico format using free online sites such as:
  3. The file you created in this way will have the extension .ico. Copy the file to the /joomla/templates/<your template> directory and name it favicon.ico.
  4. Open a browser. Do you see your new icon? If so, congratulations. If not, that doesn't necessarily mean you did anything wrong. Browsers are designed to minimize data traffic, so they don't refresh the favicon every time they show a page. Even refreshing the page (F5) wont help. So you need to refresh more thoroughly:
    • Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
    • IE: hold Ctrl while clicking Refresh, or press Ctrl-F5;
    • Konqueror: simply click the Reload button, or press F5;
    • Opera users may need to completely clear their cache in Tools→Preferences.

If this doesn't work you will need to delete the temporary internet files and the history and then open your page again.


Some templates contain code that redirects the browser to another directory or another icon file. To determine where your new favicon should be, examine /templates/index.php and look for code that contains the text <link rel="shortcut icon". There you will find the directory and the name of the icon file. Copy your icon to that place and give it the right name. Look at the example below. 
<link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/favicon.ico" />
Retrieved from "http://docs.joomla.org/Tutorial:More_advanced_Joomla%21_templates"
Personal tools