A very basic template soon to be a Joomla 3.0 template

Written by Brad Markle

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.

Like this Article?
Next »
How to add module positions to a Joomla 3.0 template
Category
208: Building a Basic Joomla 3.0 Template with Bootstrap
ClubAero 2013-03-20 4: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
BradM Community Support technician 2013-03-20 5: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
ClubAero 2013-03-20 6: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.....
ClubAero 2013-03-20 10: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!
BradM Community Support technician 2013-03-21 4: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.
ClubAero 2013-03-21 6: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>
Knigus 2013-05-13 12:49 pm
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>
Knigus 2013-05-13 1:29 pm
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>

Login to comment.

Support Center Login

Building a Basic Joomla 3.0 Template with Bootstrap
1. A very basic template soon to be a Joomla 3.0 template
2. How to add module positions to a Joomla 3.0 template
3. Adding a templateDetails.xml file to a Joomla 3.0 Template
4. How to zip a Joomla 3.0 template
5. How to install a Joomla 3.0 Template
6. How to change your Joomla 3.0 Site Template
7. How to add CSS and JavaScript files to a Joomla 3.0 Template
8. How to add Bootstrap to a Joomla 3.0 Template
9. How to make a Joomla 3.0 Template Responsive
10. Adding security to a Joomla 3.0 template using JEXEC

Adding CSS and Style to the template

11. Adding CSS to the Login Form in a Joomla 3.0 template
12. Adding CSS to sidebar items in a Joomla 3.0 template

Your Opinion Matters

... but we need to know what you're thinking!

I'm Brad Markle, your friendly Community Support technician, and I wrote the article you're looking at now. I like to think it's perfect, but I'm sure you have some suggestions. Please, let me know what they are!

Feedback
Your Email Address
Because we'd like to talk with you!

We've been listening!

2013-01-23 05:30 am
We referenced style.js, when instead we meant style.css. Thank you bmmcmullen for the feedback!

Latest Questions

If you need some help, submit your question to our Community!
We guarantee a response within 60 minutes (8am - 9pm EST, Monday - Friday)
Ask a Question!
Recent Questions
  1. Connecting email to gmail?
  2. Can I have Oscommerce installed on my site's server?
  3. I'm having trouble publishing with iWeb
Browse other questions

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!