InMotion Hosting Support Center

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.

You are viewing Section 1: A very basic template soon to be a Joomla 3.1 template
Section 2: How to add module positions to a Joomla 3.1 template

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

Support Center Login

Social Media Login

   
Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
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,968 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,968 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
29,167 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-08-27 10:20 pm
very easy! thank´s
n/a Points
2014-10-21 3:20 am
Imposible to improve.
n/a Points
2014-12-01 11:20 pm
Well, this never came up during my first hundred Google searches. I only found this AFTER I had already learned a bit, so when I googled JFactory, that's when it finally showed up. I would have found this weeks ago if it showed up under "Joomla 3 template" (with quotes maybe, or without, I tried both) or under ""basic Joomla 3 template". I know you like the documentation at the Bootstrap and Joomla sites, but I find it harder to navigate than this. Your tutorial is well titled and clearly segmented. I love that I can copy the code- it would be nice to link to an associated YouTube video - or even just post a youtube video with a person saying "Hi, if you're looking to build a Joomla 3 template, visit" then post your link, because I also searched YouTube.
* Finally, this is one thing NO sites have- a marker at the top with this week's date saying "This data is current for the latest Joomla 3 as of" an put in a date. I just wasted time at a site, and then also with several Youtube tutorials, where I started to learn OLD information. But you guys 99% awesome.
n/a Points
2015-01-31 6:12 am

Great Tutorial. Thanks for share.

n/a Points
2015-02-09 11:35 am

In the index.php link to css and js files are not correct.

Staff
26,266 Points
2015-02-09 12:10 pm
Hello Dany,

Thanks for the comment. We're not sure what you are referring to, though. If you require assistance,can you please specify a URL for your website, or indicate where your comment applies? Please provide us a little more information and we would be happy to help.

Regards,
Arnel C.
n/a Points
2015-03-10 9:02 am

Firstly thank you very much for putting this tutorial up here... its a great way to understand the basics.

I would like to point out that the link to the CSS stylesheet is wrong in the sample index.php code ... According to the folder structure you have provided it should be

<link rel="stylesheet" href="/support/css/style.css" type="text/css" />

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.

21 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!