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
So 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
The 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="css/style.css" type="text/css" />
<script src="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:
- We know most likely we will have javascript in the future.
- 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.
