Welcome to our tutorial series on creating a basic Joomla 3.0 template! Over the next few articles, we plan to show you how to build from scratch a fully functional, responsive Joomla 3.0 template.

The first thing we've done is created a very standard template. There's nothing fancy about it. It has a header, footer, sidebar, and main content area. In this article, we will start off by showing you what this template looks like and the files that make it up.

 

What our template originally looked like

screenshot-of-starting-templateSo first things first, you can see to the right what our starting template looks like. As we said, it's not much, but keep reading and watch as we transform this into a Joomla 3.0 template!

 

 

The files that make up our template

basic-template-directory-treeThe following files make up our template:

|-- index.php
|css
|   |-- style.css
|js
|   |-- main.js
|images
|   |-- blank_image.jpg
 

 

index.php

The first file we'll look at is our index file, index.php. It makes a call to 2 other files, a css file and a javascript file. It is very basic now, but in our next tutorial we will add module positions to it using jdoc:include.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/support/css/style.css" type="text/css" />
    <script src="/support/js/main.js" type="text/javascript"></script>
</head>
<body>
    <!-- main container -->
    <div class='main_container'>
        <!-- header -->
        <div class='header'>Header</div>
    
        <!-- mid container - includes main content area and right sidebar -->
        <div class='mid_container'>
    
            <!-- main content area -->
            <div class='main_content_area'>
                Main Content Area
            </div>
    
            <!-- right sidebar -->
            <div class='right_sidebar'>
                Right SideBar
            </div>
            
            <div style='clear:both;'></div>
    
        </div>
    
        <!-- footer -->
        <div class='footer'>
            Footer
        </div>
        
    </div>
</body>
</html>

 

css/style.css

Our style.css contains the basic css that we are using to style our document.

.main_container {
    width:940px;
    margin-left:auto;
    margin-right:auto;
}
.mid_container {
    margin:20px 0px;
}
.main_content_area {
    float:left;
    width:700px;
}
.right_sidebar {
    float:right;
    width: 220px;
}
.main_content_area,
.right_sidebar,
.footer,
.header {
    border:1px solid #bbb;
}

 

js/main.js

As you can see in our index.php file, we are calling js/main.js. We don't have any javascript in our template just yet because we don't need any. We are calling the file though because:

  1. We know most likely we will have javascript in the future.
  2. Joomla 3.0 will not install a template if you are including a folder without any files in it.

Because of the above, we created a folder named js and created a blank file within it named main.js

 

images

We don't have any images in our template at this time, but as you read in the javascript portion above, we will probably have images in the future. Therefore, we created a folder named images and simply created a blank file named blank_image.jpg in it.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?
2013-03-20 12:52 pm
thanks for this - and the following - tutorial. Just one comment here: I miss the templatesDetail.xml file which I think we need to create the very basic template. I added a templateDetails.xml (with no positions) and the template works! Not great - it doesn't actually create a layout - but the text does show. Here is what it looks like in Joomla 3.0 site:
Header
Main Content Area
Right SideBar
Footer
Staff
5,399 Points
2013-03-20 1:00 pm
Hi ClubAero,

So, it sounds like because you didn't setup a templateDetails.xml file, all the content is simply shown in the browser without actually being contained in any div's or other containers?

Did you have any questions on how to get this setup?

Thanks,
- Brad
2013-03-20 2:13 pm
Hallo Brad
That's right! I just copied the index.php, style.css and the empty main.js and the empty blank_image.jph into the directory structure you showed. I then added the templateDetails.xml and zipped the directories. I then installed the template in a joomla 3.0 site.
I assume that as I progress with your tutorial I can see how the template starts to develop but I started like this since I couldn't understand how the screenshot layout you showed at the beginning with the title 'what our template originally looked like' could be made with the code you gave in the 1st tutorial.....
2013-03-20 6:12 pm
Ah yes - I should have looked more carefully, but the index.php code in this tutorial doesn't have any Jdoc:include statements, so I assume the template will not be able to position the text at all, irrespective of whether the positions are included in the templateDetails or not!
Staff
5,399 Points
2013-03-21 12:38 pm
Sorry about that! I just updated this article and included a brief mention about the Jdoc:include statements above the index.php sample code.
2013-03-21 2:40 pm
Thanks for your help. I have now modified the index.php and the very basic template now shows something similar to your screen shot (I also added a grey border to the main_container in the CSS)
<?php

defined('_JEXEC') or die;

$doc = JFactory::getDocument();

$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

?>
<!DOCTYPE html>
<html>

<head>
<jdoc:include type="head" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<!-- main container -->
<div class='main_container'>

<!-- header -->
<div class='header'>Header</div>

<!-- mid container - includes main content area and right sidebar -->
<div class='mid_container'>

<!-- main content area -->
<div class='main_content_area'>
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
</div>

<!-- right sidebar -->
<div class='right_sidebar'>
<jdoc:include type="modules" name="position-7" style="well" />
</div>

<div style='clear:both;'></div>

</div>

<!-- footer -->
<div class='footer'>
Footer
</div>

</div>

</body>

</html>
2013-05-13 9:29 am
Hi There,

I'm not sure how the templateDetails.xml should look like, my one doesn't work, see below:
?xml version="1.0" encoding="utf-8"?>
<extension version="3.03" type="template">
<name>ladtraveltemp</name>
<creationDate>2013-05-01</creationDate>
<author></author>
<authorEmail></authorEmail>
<authorUrl>http://www.example.com</authorUrl>
<copyright>Grzegorz Ksiazek 2013</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>ladtraveltemp</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
<folder>js</folder>

</files>
<positions>
<position>maincontainer</position>
<position>mid_container</position>
<position>right_sidebar</position>
<position>footer</position>
</positions>
</extension>
2013-11-29 7:44 am
style="none" and style="xhtml" - what's the difference?
Staff
9,962 Points
2013-11-29 5:13 pm
Hello jleito, and thanks for the comment.

The none or xhtml applied to the <style> tag are what Joomla calls module chrome, which allows you to adjust the way a module is displayed.

On that page you can see how it changes the appearance of a module based on which module chrome you've decided to use.

Please let us know if you had any other questions!

- Jacob
n/a Points
2014-02-26 3:57 pm

is this tutorial is useful for the joomla 2.5 ???

Staff
9,962 Points
2014-02-26 4:57 pm
Hello panos,

This tutorial should still apply to the basic concepts of creating a Joomla 2.5 template. However keep in mind that Bootstrap and jQuery were added in Joomla 3.0. So if you're downloading a 3.0 template and not creating one from scratch it might not function properly.

Please let us know if you had any further questions.

- Jacob
n/a Points
2014-03-29 3:21 pm

The "original" php file shows calls to the css and js files in a folder called "support" but there is no "support" folder in the folder structure.

So I correct the links. Still, when I copy and paste the code from this tutorial into a file called index.php no browser will open the file. When I change the index.php to index.html then I can see the preview as you show it at the top of the article and browsers will open it. The rest of the tutorial seems easy enough, but this page is confusing for non-coders anbd newbies.

 

n/a Points
2014-04-05 3:32 pm

it took a while till i figured, but you should replace your css link with these - as the one on display does not work not just because you used a support folder, but because of the / in front of the src and href

<head>    <link rel="stylesheet" href="/support/css/style.css" type="text/css" />    <script src="/support/js/main.js" type="text/javascript"></script></head>

hope it helps :)

Staff
17,014 Points
2014-04-06 9:34 pm
Hello Suzie,

Thank you for your input. We will make any changes necessary.

Kindest Regards,
Scott M
n/a Points
2014-04-07 11:09 am

Thanks!

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

15 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!