|
Before creating a Joomla template or converting a Joomla template from a HTML design, you should keep in mind that a Joomla template is composed from components that go in a mainbody area and modules that go in certain areas like columns or other sections of the design. Read this article in order to get an idea how to create correctly a HTML design that will be converted to a Joomla template.
To get an idea of how a Joomla template layout should look like, check the bellow image.
.jpg)
Now, if you have an area for inserting the mainbody part and some modules, you can start creating a Joomla template, or convert it from the HTML design. Be advised that you will be able to visualize the template and changes made only by copying all the template files into joomla_installation_folder/templates/template_name. A Joomla template consists of a CSS file, and index.php file, an XML file and images. The folder structure should look like this: [template_folder]
[template_folder] / [css] / template_css.css
[template_folder] / [images] / all the image files go here
[template_folder] / index.php
[template_folder] / templateDetails.xml template_css.css
The CSS file contains all the styling of the template and there is the place un unleash your imagination. In Joomla, almost every element of the design can be styled. So, for example if you want to style the titles of content items and you don't know how that style class is named, you can easily use Mozilla Firefox and select a title, after which right click and View Selection Source. templateDetails.xml
This file tells the Joomla templating system information about the template. It looks like this:
<mosinstall type="template">
<name>template_folder</name>
<creationdate>08.08.08</creationdate>
<author>Author Name goes here</author>
<copyright>(C) Copyright 2008. All rights reserved!</copyright>
<authoremail>
This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
</authoremail>
<authorurl>www.domain.com</authorurl>
<version>1.0</version>
<description>A simple web template.</description>
<files>
<filename>index.php</filename>
</files>
<images>
<filename>images/image_name.gif</filename>
</images>
<css>
<filename>css/template_css.css</filename>
</css>
</mosinstall>
And you should change the info deppending on your template files, etc. index.php Now let's get to the index.php file and see how to convert our html code to a joomla template. Here are the tags that help you make the index.php
file from a Joomla template. Let's start with the part. Instead of the HTML .. section, you should use the following: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head> In order to get an image into the template, you can use the following code: <?php echo $mosConfig_live_site; ?>/templates/template_folder/images/image_name.gif And here are the tags: <?php mosMainBody(); ?> - in the main content area it will extract that page's content from the database. <?php mosPathWay(); ?> - shows the pathway And you can use the following tags to insert modules into specific areas: <?php mosLoadModules ( 'right' ); ?>
<?php mosLoadModules ( 'left' ); ?>
<?php mosLoadModules ( 'user1' ); ?>
..
<?php mosLoadModules ( 'user9' ); ?>
<?php mosLoadModules ( 'top' ); ?>
<?php mosLoadModules ( 'footer' ); ?>
<?php mosLoadModules ( 'header' ); ?>
etc. Read more about index.php elements. And after making the index.php file, the styling, putting all the images and using them into the design from the [images] folder and you're done. For making things easier for you, we've put a basic Joomla template for download and you can start creating your template based on this one as it contains the files that a Joomla template need to work properly. So, download it and upload it on your joomlainstallation/templates/ folder.
After this login into the admin area and go to Site > Template Manager > Site Templates and activate it. And once the template is published you can start "playing" with the design using joomlainstalationfolder/templates/template_folder/index.php and joomlainstalationfolder/templates/template_folder/css/template_css.css files.
|
Joomla Tutorials 
