Joomla Layout

This tutorial will explain the different parts of the Joomla layout. If you don't have a Joomla website installed yet, you can check
our tutorial on How to install Joomla. You can also get a free professional Joomla installation with your Joomla Hosting account
at SiteGround.com.

How to change the Joomla Frontpage Layout?

The layout and content positioning of your Joomla website is defined by the Joomla template you currently use. Below you can
see a screenshot that represents the basic items,added by the default Joomla template. You will find a short explanation of
each item under the image. This will help you understand better the structure and key concepts of a Joomla website layout and
how to change it.

The available positions in Joomla are defined by the template you are using. In this tutorial we will show the positions 1-10 in
one of Joomla's default templates which is included in the official installation package. To change the position of a certain
module, you can access it from the Extensions -> Module Manager page and then change its "Position" setting. Some of
the most commonly used position names are top, user1 to user6, left, right, header, footer, breadcrumb, and
newsflash.
1. In the "top" position of the Joomla website the "Banners" and "Newsflash" modules are placed by default.

The Banners module allows you to upload images that link to a desired URL. You can define your banners from
Components -> Banners and then display the selected items by publishing the "Banners" module from the
Extensions -> Module Manager page in your Joomla administrative area.

The Newsflash module displays a single random article, or a number of articles in a horizontal or vertical
configuration. From your Joomla administration area you can select a category of articles that will be displayed by this
module.
 
2. The "Top menu" module is published into the "user3" position by default. You can easily create and manage menus
from the Menus -> Menus Manager page. You can then set your "Top menu" module to display the menu you
have just created.
 
3. The "Breadcrumbs" module is placed into the "breadcrumb" position. It is a convenient navigation method which
displays the current page you are on and the full "path" to it. If you are in a page called "Sample Page" that is under
the main menu, the "Breadcrumbs" will display Home -> Sample Page. Using Breadcrumbs is very useful especially
when you have multi-level menus.
 
4. The "Search" module is published in the "user4" position of the template. It gives your users the option to search
within the content of your website.
 
5. Several modules are published into the "left" position of the template. In this position you can publish vertical menus,
login forms and many other modules depending on your particular needs.
 
6. The "Latest News" module is published into the "user1" position of the template. It displays the most recently added
articles from the selected category or from all categories. In addition, you can specify the number of displayed articles
depending on your preferences.
 
7. The "Popular" module is published into the "user2" position of the template. It will display a selected number of
articles that are visited the most. You can either select a category from which the articles will be displayed or you can
set the module to display the most visited articles in the entire site.
 
8. This is the main part of your website. Here are the newest articles you have set to be displayed on the front page.
 
9. A "Polls" module is published into the "right" position of the template. You can create the actual polls from the
Components -> Polls page in the administrative back-end of your Joomla application. Once you have created your
Polls, you can choose which one to be displayed on your website by editing the preferences of the "Polls" module
from the "Module manager".
 
10. "Banners" and "Footer" modules are displayed in the "footer" position of the template. You can use the "Footer"
module to display useful links, your copyright and other useful information at the bottom of your page.
 Create a simple Joomla 1.5 template

This tutorial will show you how to create a simple Joomla 1.5 template. You can get ideas how to create your new Joomla
template from our Free Joomla templates gallery.

How to create a basic Joomla 1.5 template?

First, open the "templates" directory in your Joomla installation. Then create a subfolder in it named "tutorial_template". All the
files of your template will reside in it.

Inside your new directory, create a file called index.php, and another named templateDetails.xml. Then create a folder
named css and in it - a new file name template.css. In order to create these files, you can use a simple Notepad and store
the files on your computer, and upload them later via FTP or the File Manager of your cPanel.

Those are the basic files that each Joomla template needs to function properly. O

index.php - Specifies the available module positions and the path to your Stylesheet file. This is the main "section" of your
template;

templateDetails.xml - This is a system file that provides information about your template to the Joomla application;

css/template.css - The stylesheet file of your template. It defines the looks of your website;

Once you have done that, change the default template for your website to the newly created one. For more information how to
do this, check our tutorial on Changing the default template of Joomla 1.5.

Now, let's take a detailed look on what each file should contain:

The index.php file should start with:

<!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" xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>

Those lines specify the beginning of the HTML output of your website. This PHP code - <jdoc:include type="head" /> will
include in your page the Joomla header content (the page title, meta description, keywords, etc.) that you have added in the
administrative end of your application.

Next, we have to add the "body" part of your website:

<body> 
 
<jdoc:include type="component" /> 
  
</body> 
</html>

The <jdoc:include type="component" /> line will display the main content of any given page.

Now, it is time to check our template. Save the index.php file and login to the Administrative end of your Joomla application.
From it, make the new "tutorial_template" template default for your website. For more information on how to do that you can
refer to our tutorial on how to change the default template of Joomla 1.5. Your page should look like this one depending on the
content you have:

This page includes only your articles without any styling or modules displayed. Now, let's add some module positions. Edit your
index.php file and change the lines between <body> and </body> to:

<div id="container"> 
    <div id="header"> <jdoc:include type="modules" name="top" /> </div>   
    <div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left" />
</div> 
    <div id="content" class="float"> <jdoc:include type="component" /></div> 
    <div id="sidebar_right"class="float"> <jdoc:include type="modules"
name="right" /> </div>  
    <div id="footer" class="clear"> <jdoc:include type="modules" name="footer" />
</div> 
</div>

The <jdoc:include type="modules" name="left" /> line tells the Joomla application where to insert the modules
published in the "left" position. We have just added the top, left, right and footer positions to your template.
Note that we have surrounded those in <div> tags and added information about their classes and ID's. In addition, we have
wrapped everything in a div with ID "container" which allows us to set the basic dimensions of your page. The div classes will
be defined in the template.css file once we create it. At this point, however, your index.php should look like this:

<!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" xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" > 
<head> 
<jdoc:include type="head" /> 
</head>
<body>
<div id="container"> 
    <div id="header"><jdoc:include type="modules" name="top" /> </div>   
    <div id="sidebar_left" class="float"><jdoc:include type="modules" name="left"
/></div> 
    <div id="content" class="float"><jdoc:include type="component" /></div> 
    <div id="sidebar_right"class="float"><jdoc:include type="modules" name="right"
/></div>  
    <div id="footer" class="clear"><jdoc:include type="modules" name="footer"
/></div> 
</div> 
</body> 
</html>

Now we have to edit the templateDetails.xml file. In it, paste the following lines:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
         <name>tutorial_template</name>
         <creationDate>02/2008</creationDate>
         <author>SiteGround</author>
         <authorEmail>templates@siteground.com</authorEmail>
         <authorUrl>http://www.siteurl.com</authorUrl>
         <copyright>SiteGround</copyright>
         <license>SG TOS</license>
         <version>1.0.0</version>
         <description>Basic Joomla Template</description>
         <files>
                 <filename>index.php</filename>
                 <filename>templateDetails.xml</filename>
                 <filename>css/template.css</filename>
         </files>
         <positions>
                  <position>left</position>
                 <position>right</position>
                 <position>top</position>
                 <position>footer</position>
         </positions>
</install>

Let's take a more detailed look on the lines of the templateDetails.xml file:

 <install version="1.5" type="template"> - This line shows the Joomla version which your template is
designed for. It will allow the Joomla template installer to correctly install your template if you decide to make an
archive of the template and use it on a different Joomla instance.
 <name>tutorial_template</name> - This line defines the name of your template. For the purpose of this
tutorial, we are using "tutorial_template";
 <creationDate>02/2008</creationDate> - This line displays the creation date of your template;
 <author>SiteGround</author> - This line defines the author of the template;
 <authorEmail>user@yourdomain.com</authorEmail> - Add your e-mail in this line;
 <authorUrl>http://www.siteground.com</authorUrl> - This line specifies the website of the template
creator;
 <copyright>SiteGround</copyright> - You should add the copyright information for your template in this
line;
 <license>SG TOS</license> - This line specifies the type of license your template is published under;
 <version>1.0.0</version> - This line defines the version of your template;
 <description>Basic Joomla Template</description> - Here you can add additional information for your
template;
 <files>
   <filename>index.php</filename>
   <filename>templateDetails.xml</filename>
   <filename>css/template.css</filename>
</files> - Those lines specify all the files that your template uses.
 <positions>
   <position>left</position>
   <position>right</position>
   <position>top</position>
   <position>footer</position>
</positions> - Those lines define the positions you have enabled in your template.

The next step is to add some styling to the template. First, open the index.php file and add the following line just before the
</head> tag:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/tutorial_template/css/template.css"

type="text/css" />

This line will tell your website where to load its stylesheet file from.

Now, you should edit the css/template.css file and add the following lines to it:
    
* {
     padding: 0;
     margin: 0;
}
img {
     border: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #0F0F0F;
}
a:link, a:visited {
    text-decoration: underline;
    font-weight: normal;
    color: #000;
    outline: none;
    text-align: left;
}
.float { 
     float: left; 
} 
.clear { 
    clear: both; 
} 
.overall {
    background-color: #fff;   
}
div.center {
    text-align: center;
    margin: 0px auto 0 auto;
    padding: 0;
    width: 950px;
    background: #FFFFFF;
}
#container {
    width:960px;
    margin: auto;
    background-color: #f4f9fc;
    border: 1px solid #e2e2e2;
    text-align: left;
}
#header {
     text-align: center;
    background-color:#f4f9fc;
    height: 80px;
}
#content {
    width: 598px;
    text-align: left;
    background-color:#f4f9fc;
    padding: 5px;
}
#sidebar_left {
    text-align: center;
    background-color:#f4f9fc;
    width: 165px;
    border-right: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px;
}
#sidebar_right { 
    background-color:#f4f9fc;
    text-align: center;
    width: 165px; 
    border-left: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px;
     }
#footer { 
    background-color:#f4f9fc;
    text-align:center;
    border-top: 1px solid #e2e2e2;
    border-botom: 1px solid #e2e2e2;
    padding: 5px;
}

Those lines will add some clean basic design to the different parts of your website. You will need some basic skills in working
with CSS in order to make changes in the outlook of your Joomla site.

Your template is now complete, at this point your website should look like this :

 
From now on it is up to your imagination to create the design of your website as you want it. You can add different module
positions, play with the css file, add images for backgrounds and much more. Joomla's template structure gives you the
freedom to create the website you have always wanted. Good luck!