Joomla Layout

8/8/2019 Joomla Layout

1/9

Joomla Layout

This tutorial will explain the different parts of the Joomla layout. If you don't have a Joomla website installed yet, you ca n 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.


2/9

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 menusfrom 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 whichdisplays 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 searchwithin 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 addedarticles 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 ofarticles 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 theComponents -> 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.


3/9

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:


4/9

The 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 yo ur

index.php file and change the lines between and to:

The 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.


5/9

Note that we have surrounded those in 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:

tutorial_template

02/2008

SiteGround

[email protected]

http://www .siteurl.com

SiteGround

SG TOS

1.0.0

Basic Joomla Template

index.php

templateDetails.xml

css/template.css


6/9

left

right

top

footer

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

- 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.

tutorial_template - This line defines the name of your template. For the purpose of this tutorial,

we are using "tutorial_template";

02/2008 - This line displays the creation date of your template;

SiteGround - This line defines the author of the template;

[email protected] - Add your e-mail in this line;

http://www.siteground.com - This line specifies the website of the template creator;

SiteGround - You should add the copyright information for your template in this line;

SG TOS - This line specifies the type of license your template is published under;

1.0.0 - This line defines the version of your template;

Basic Joomla Template - Here you can add additional information for your

template;

index.php

templateDetails.xml

css/template.css

- Those lines specify all the files that your template uses.

left

right

top

footer

- 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

tag:


7/9

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;


8/9

height: 80px;

}

#content {

width: 598px;

text-align: left;


padding: 5px;

}

#sidebar_left {

text-align: center;


width: 165px;

border-right: 1px solid #e2e2e2;

border-bottom: 1px solid #e2e2e2;

padding: 5px;

}

#sidebar_right {


text-align: center;

width: 165px;

border-left: 1px solid #e2e2e2;

border-bottom: 1px solid #e2e2e2;

padding: 5px;

}

#footer {


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 :


9/9

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!

Documents

Joomla Layout