 |
|
joomla 1.1 template tutorial
|
|
 |
|
In this tutorial I will explain how a custom user joomla 1.1 template can be made from a simple html file. It is really a quick step by step howto, no indepth joomla analysis, even though I will work with module and content calls.
|
|
To get started:
All joomla 1.1 templates reside in the template folder in your installation path.
If you download a joomla 1.1 ready template, they will appear in here.
Every template consists of at least 1 file named index.php. Do not confuse this file with the index.php file in the root of your Joomla installation. The index.php resides in the templates/template_name/ folder of your joomla installation path. Apart from that templates can hold multiple stylesheet, graphic, script files and others.
We will concentrate on the index.php file, which holds the html formatting as well as the necessary php includes and calls.
You won't need any knowledge of the php, and a little knowledge of the html. As the matter of fact if you have a decent wysiwyg editor that can deal with the php code, you won't need the html knowledge as well.
If you decide to work with the index.php file in plain text, simply ignore all the php code except the calls I will specificly note. The calls will allways be on separate lines - copy them as they are including the <?php and ?>.
The start of the php file depending on version used will look like:
<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor();
}
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
//script to determine which div setup for layout to use based on module configuration
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
// banner combos
//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
$colspan = 3;
} elseif ( mosCountModules( 'user1' ) == 1 ) {
$user1 = 1;
$colspan = 1;
} elseif ( mosCountModules( 'user2' ) == 1 ) {
$user2 = 1;
$colspan = 1;
}
//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$right = 1;
}
?>
It's just a initialisation procedure, you rather not mess with it.
The next part is more interesting:
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/template_name/css/template_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
This defines the header information joomla will send in the output. Leave the <meta and <link lines intact, so that you can change the encoding at the joomla admin page.
Note the
<?php echo $mosConfig_live_site;?>
line. This will be interpreted as the filesystem path to the root of your joomla installation. You can use this statement as well, but rather in php than in html. I recommend to address all external files relative to the root of your url you pan to use.
Put all your html that resides between the <head> and </head> tags above the </head> line.
If you have more attributes in the body tag, add them in the <body> tag as needed.
After the header and starting <body> tag, you can put all your html starting from <body> and ending with the last tag before the </body>.
Add following lines to the end of your brand new index.php file:
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>
This includes the footer messages and the final body and html closing tags.
Ok, we're done - well not really. You now have a working index.php file, but no content will appear until we use the function calls promissed at the beggining of this tutorial.
By now you shold know, that Joomla is very modular and the vast number of available extensions is what makes it the best CMS. Joomla 1.1 has 3 kinds of extensions - components, modules and mambots also known as plugins.
By working with templates you have the control over the extension placement, and formatting to a certain extent, within the html. This is not true for mambots, so we will deal only with components and modules.
Components are really easy to deal with, since they can only appear where defined by the
<?php mosMainBody(); ?>
call. This function call can be placed only once within the template and will render components configured for the displaying page. This is really the main body of the page, an article, blog entry, product, etc. . Place it in the main position of your layout.
Modules are used to display shorter pieces of data like links, excerpts, advertisments, and many many others.
They are more complicated to place within the template, since you'll have to understand the logic of module positioning. You can place multiple module calls within the template. The call looks like:
<?php mosLoadModules ( 'right', -2 );?>
This will render the modul positioned 'right'. This position refers to the position parameter in the modules admin page. You can have multiple modules at the same position (meaning joomla position parameter, not the position of the module within the template). If the module gets rendered and the order of the modules rendered gets decided through the module parameters. Joomla first gatheres all the modules at the chosen position ordered by chosen order. Then it looks if the module is supposed to be rendered at the current page (the right multiple select box with menu entries) for the current user (public/special/restricted) and renders all the modules that pass the conditions.
At first is not a bad idea to put a module definition at a unique position in every part of your page where some content might appear. You can the turn off the modules in the joomla admin without having to touch the templete php file, but I recommend to remove all unused module calls for performance reasons after the site goes to production.
Fine tuning:
You will have to spend some time finetuning the template. What comes in handy is the ability to address elements within the template index.php file using the class and id attributes so that you can design the css style sheets.
If you want to use a custom menu image, or a complicated menu style, you might get into trouble. Joomla displays menus as modules. You have to create the menu in the admin, define it's items and then create a module for that menu at a certain position. Even though you can define a custom class suffix string, this might not be enough for you in the mentioned cases. The only thing you can do is to hardcode the links into the template html.
|
Module CpList
Component IpLogger
