Introduction

The only thing more difficult than learning to make Joomla templates is writing a tutorial that endeavors to teach a complete noobie how to do so for free. The difficulty in writing this tutorial resides in the fact that teaching is easy to those who have the knack. For the rest of us, teaching is a chore. The difficulty in learning to create a Joomla template from scratch lies in the complexity of the information currently available. This tutorial aims to rectify that situation. Sadly, it will not be able to cure my poor writing skills. Hopefully you will survive my scribbles long enough to understand how it all works. This tutorial began as a thread on my web host’s forums which I shall now shamelessly plug. www.BryanSoft.com I wanted the thread to be something that the reader could grow with and see my progress over time. However, the inherent limitations of a forum were much too much to overcome. I have not given up on the idea of writing a tutorial of this nature, and over the course of this document I will take my best stab at doing it all over again with screenshots and hopefully some nerd humor ( I think nerd humor may be an oxymoron). There are a few tools that you will need to get started: • • Graphic Design - Paint.Net can be found at http://www.getpaint.net WYSiWYG HTML - KompoZer can be found at www.KompoZer.org
NOTE: KompoZer is also available as a Portable Application at www.PortableApps.com The portable version of KompoZer will allow you to edit your template on nearly any computer running Windows.

• • • •

Content Management System - Joomla 1.5 can be found at: www.joomla.org Joomla Template Snippet Library - JTT can be found at: http://antun.vkrgnf.com Lorem Ipsum Generator - I use www.lipsum.com to generate sample content for my template until the PHP Joomla code makes the template dynamic. Any webhosting account with PHP v.5 or greater where you can install Joomla
Shameless Plug Alert: www.BryanSoft.com

By no means are these tools the absolute best way to go when building a Joomla template and I am not trying to convert anyone. In fact, I do believe that there are much better ways to go if money is no object. However, I chose to go this route because every tutorial I read when learning this for myself was pricey when considering the webdev tools required. Joomla itself and a very good many of the available templates and extensions are free. There is no reason why there shouldn’t be a tutorial written so that a noobie can follow along for free too. That being said, free software does come with certain handicaps that we will discover along the way and find ways of overcoming them as they rear their ugly heads.

What are Content Management Systems,
and more importantly, Why Joomla?
Content Management Systems (CMS) are the backbone of many news and ecommerce sites that we all use. One of the most successful CMS driven websites is Amazon.com. Now we can't exactly have Amazon.com's CMS, but that doesn't mean that Content Management is beyond the reach of web admins with slightly less successful business plans. What makes these systems so attractive is the way they present new information. Before CMS, web pages were static. Every time new information needed to be presented, that information had to be built into a new page on a website. With the advent of CMS, content could be dynamically generated and new information could be presented on the fly. This is accomplished by splitting the site into three distinct pieces: the wire frame, the style sheet, and the data. The wire frame is the basic information that tells the web browser how to process the information it is getting. The wire frame in PHP based CMSs, is found in the index.php file. The style sheet is a Cascading Style Sheet (CSS) that defines the appearance of the page. Finally the database stores the data that the CMS will present through the wire frame and style sheet. The advantage of splitting the site into three distinct pieces is that the duties of each are confined within themselves and can be more easily maintained or modified. There are more Open Source CMSs than I care to consider. Thankfully, other people have the time and determination to attempt to catalogue them. http://php.OpenSourceCMS.com provides and extensive list of free CMS options listed alphabetically. They have nearly one hundred options. The question is not where you should start, but why I am a huge fan of Joomla Yes, it’s true. I am an unashamed Joomla fanboy. I have tried other CMS systems, but nothing offered the wealth of plug-ins and extensions as those offered on the Joomla web page. I was simply overwhelmed by the options available. Then you see the forums where so much support is available. I have posted questions there and had answers within hours. Basically, the price was right and the support structure was there to support my first foray into CMS. Once I had my first Joomla installation up and running, I was hooked. Setting up a site was so easy. Getting plug-ins and extensions working was a breeze. I have never looked back. Since I am such a Joomla fanboy I would suggest that it be your first choice for CMS too. Now that the question of why I chose Joomla has been answered, we can move forward with the template tutorial.

file organization is just as important as having a plan.NET. actually a picture. It is a free graphic design package. the plan is. The point of this tutorial is to teach you how to make a Joomla template. You can use the graphic design package of your choice to make your really simple Joomla template. You can see the masterpiece for yourself in Figure 1. not a pretty Joomla template.NET framework to run. it is a very simple two column fixed width template with a header image. Figure 1 As you will see. You could also make a fixed length template. I used Paint. In this case. but your site would be unnecessarily constrained. more often than not. I have created what is possibly the most boring and plain picture possible. Just be aware that it does require the . As with any well organized webdev project. In the case of creating a template.Taking over the world AKA: Devious Plan “A” The first place to start in any webdev project is to have a good plan. the accepted file structure for template construction is as follows: . In the case of Joomla templating.

Figure 2 The template that we will be building together here will be a pure CSS driven template. Since this template will be so simplistic. You will notice that the header image is surrounded by a thick black border. not in your template. we really only need three sides of the border in our header image.• TemplateTut (or the name of your template) o CSS o Images See Figure 2 for a look at my file structure. So go ahead and crop out the header image as I did in Figure 3 . The rest of the colors and borders will be generated throughout the CSS file. The menu. That means no tables. These small images will not noticeably increase the template load time. along with the rest of the site's content. though. Really the only images we will need are the header image with possibly one or two background images that should be around 1k in size. however. we will not have a bunch of images to load. The left right and top borders will need to be saved. will be dynamically generated by the CMS. The rest can be cropped off. Tables belong in dining rooms and banquet halls.

. .e. and the header image we just cropped out of our mockup will go in the Images sub-folder. the styling..\TemplateTut\index. Now we have a piece of the structure of the template we need to put it in its place. and the database.Figure 3 In the second section of this tutorial we discussed the question of “What are Content Management Systems”. . the CSS file will be in the CSS sub-folder. we covered the three basic pieces of a CMS. In this section we have discussed the development of our plan and the organizational structure of the template. In that discussion. the wire-frame.php) will be in the root directory of our template (i. The wire frame of our template (the index.php).

In the “Save as Type” drop down menu. In the Save As dialog box. Click on File then "Save As".php file in the Template Tut folder. Since KompoZer doesn't officially support PHP files. To begin. we will have to trick it into doing what we want.php. choose "All Files" as seen in Figure 4. In order for this all to work properly. the file must be named index.Gold Diggers and Mozart Using KompoZer I am going to have to assume that you have already downloaded KompoZer and delve into the more complicated part of building a Joomla template. Now you can save as a PHP file. Figure 4 . When you open KompoZer. Open KompoZer. so just do it and don't complain. Joomla templates begin in much the same way as any static HTML page. Basically we are going to build an HTML page with a linked CSS file and then add the PHP bits that make it work as a template in Joomla. you will be presented with a new blank page that you will need to save as a PHP file. There are no exceptions to this that I am aware of. we will need an index. you will notice that KompoZer wants to save everything as an HTML file.

you go back to KompoZer. That is the menu icon for the CSS editor. Divs provide the possibility for source ordering. I know that tables are easy and many of you may have been using tables successfully for years. I said that we would be making a purely CSS driven template which means NO TABLES. Since there isn't a CSS file yet.Once your blank PHP file is saved. we must use CSS to create divisions in the page. we can get started. but it is also important for creating sites that are accessible to handicapped visitors who use screen readers. In KompoZer's menu bar. Click it and lets get started making our divs. The easiest way to accomplish this is to open Wordpad and save the document to your TemplateTut/CSS folder as TemplateCSS. you will see an icon that looks kind of like a painter's palette.css. One great thing about KompoZer is that it provides a CSS editor right there in its user interface. Figure 5 . we need to create one.php. Once you have your blank CSS file in the CSS folder. we need to create our divs in our CSS. but there are advantages to divs that tables cannot compare. In an earlier post. We are not going to cover SEO or accessible website design in this tutorial. but I think we can all agree that it is best to start off right than have to go back to be beginning again when those issues become important. If there are no tables. Before we can get started with coding our index. Source ordering is important for SEO. I have circled it in Figure 5.

css file. Click it and you will see that there are several options to choose from. we want to keep our CSS file as a separate file from the index.php file. There is one quirky thing about KompoZer’s CSS editor that takes a little getting . This allows us to easily modify the CSS without having to look through all of the code in our index file. In the top left corner of the CSS Stylesheets window.php file.php.When you open the CSS editor. but it is an internal stylesheet. Refer to Figure 6 for a screenshot. It will be the fourth icon from the left. Once we have clicked on the choose file button we can surf our site structure to the TemplateTut/CSS folder and select our TemplateCSS. CSS is a very versatile structure for changing the look of the content of your website. we will be presented with the New Linked Stylesheet dialog. click the "Create Stylesheet" button. Since we have already created a blank CSS file. Figure 6 Once we choose the linked stylesheet option. By this point. A linked stylesheet is a stylesheet that is in a file separate from the PHP code. While it is possible to use CSS right in the code of your index. Feel free to delete the internal stylesheet at will as we don’t need it. internal and linked. Since it is what we want. Simply select the unwanted stylesheet and click the red “X” icon in the menu bar. There are two types of stylesheets. What we want is called a "Linked Stylesheet". By default. you may have noticed that we already have a stylesheet. a linked stylesheet will be the obvious choice. you will see another painter's palette icon. Once again look at Figure 6. Deleting stylesheets is easy. we will want to choose that file for ourselves by clicking on the "Choose File" button. you will see the CSS Stylesheets window. To make the linked CSS file be linked in the index. the CSS Editor wants to use an internal stylesheet.

KompoZer’s CSS editor does not save changes to your CSS file until you click ok. This will present us with a few options as seen in Figure 7. all of your CSS work will be lost. always click the OK button. If you click Cancel or the red “X” in the top right corner or the Cancel button in the bottom right hand corner. we will be creating four divs and one style applied to all elements of a class: body #header #container #left #right When you are done creating your divs. In the case of our site. click the Create Style Rule button.e. we need to once again click on the painter's palette icon and choose the Style Rule option. Figure 7 . If. the CSS editor has included this option. A div is essentially an element with a specified ID attribute. Once you have entered the name of your first div. select the sheet or element in the "Sheets and Rules" panel and click the red x in the menu bar.used to that you will need to know now. Enter the name of your first div. (i. In order to create a new div in our stylesheet. we will be naming the header as our first div. It is the third one on the list. You will need to perform that step for each div you need for your site. it will look something like what I have attached in Figure 8. #header). the # sign appears in the text box below the options. In the case of the most simple and boring Joomla template possible. at some point you want to delete a stylesheet or any single element of a stylesheet. Conveniently for us. When we select that option. If you want to keep your changes and exit.

Finally we have reached the point where we can do some actual coding of our Joomla template. To add the divs to our source code. To exit the CSS editor and return to KompoZer. For example: Code: <body> <div id="header"> </div> </body> . if we take this moment in time to setup our divs in the index. The div tags will be located between the body tags.Figure 8 Now here we could just start styling our divs. click the OK button. However. but we wouldn't be able to see our progress. The default view for KompoZer is the "Normal" view. we will need to switch to the source tab at the bottom of the KompoZer window as seen in Figure 9.php file we will be able to see the changes happen as we make them.

since we want to nest the left and right divs INSIDE the container div. Next we declared the container div.Figure 9 Inside those two lines of code between the body tags. Check out the example: Code: <div id="header"> </div> <div id="container"> <div id="left"> </div> <div id="right"> </div> </div> First we declared the header div. then closed it. there is no limit on the number of divs that can be nested in this way. while I've got you in the mood to make sweet code together we should just finish out declaring our divs for one another in the index. However. Nesting divs is easy if you keep in mind the order in which the divs should be closed. We are going to do just that by placing our left and right divs INSIDE the container div. we could return to Cascades and style the header div and begin to see some progress on our template. If we wanted to at this point. we have just created the div where our header image will be displayed. we . This technique would work with any div. To my knowledge.php One neat thing about divs is that we can nest one div within another div. However.

Since we declared the left and right divs and closed them between the open and close div tags for the container div.didn't close the container div. the left and right divs are INSIDE the container div. we declared the left div and closed it then declared the right div and closed it. two of the divs will appear INSIDE the borders of the container div. the body tag and four divs. However. Instead. Figure 10 . just click on the HTML Tags tab at the bottom of the KompoZer window or take a look at Figure 10. If you want to see how that looks. You will see five tags.

You will need to be in the source tab of KompoZer to add the sample text to the divs.lipsum. However. Essentially all we will do to the header div is add a background picture and set the dimensions of the div. and the dimensions of the div will be the exact same size as our background image. Open the CSS editor so that we can start applying our styles. However. we will need some sample content in the left and right divs. Next we will look at the panel on the right hand side of the CSS editor. or continue if you are a nerdy glutton for punishment. First we'll add just a touch of panache to our header div. In the background tab. Click the choose file button and surf on over to the Template Tut/Images folder and select the header. For this. Our changes would take place. Let’s go there now and define the background image of the header div. you probably clicked on a few to see what they held.Style You’ll know when you’ve got it As it stands right now. This is the longest segment of this tutorial so if you want to take a break. but our preview would be the header image and nothing else. but we can't see all of it because the header div isn't sized properly. The background picture is our header image. we don't want the image to be "tiled". our Joomla template doesn't look like much. If you choose not to use Lorem Ipsum text.jpg file that we cropped out of the plan earlier in the tutorial. but from this point until we begin adding the PHP code that makes a template a Joomla template we will be here most of the time. That leaves our template even more boring than our plan. . This content will only be filler text and we will be deleting it when we start Joomlatizing the template. now would be the time to do it. We haven't spent any quality time there yet. we created a linked stylesheet in the CSS editor and defined some style rules that are our divs. That will be the header image for our template. We can't have that. Now the image is in the header div. we didn't apply any styling to any of our divs. If you noticed the tabs in the right hand panel in the CSS editor. Now that we have a very raw template with some sample content we can get started styling our divs. The left div will contain our menu and the right div will be the body of our page where the actual content will be displayed. Since our div is going to be resized to be exactly the dimensions of the header image. The site itself is pretty self explanatory. If you haven't already done so. The tab labels are pretty descriptive. you can use any plain text placed between paragraph tags in the div where you want the text to appear. it is all substance and absolutely no style. Before we begin styling the divs.php file. That is where the stylesheet re-enters the picture. if we were to continue without adding any static sample content to the divs we wouldn’t be able to view our changes as they occur. Go ahead and stretch your legs. If you recall. We will click on the header div in the Sheets and rules panel of the CSS editor to add a background image to the header div. you would define those parameters in the Background tab.com to generate sample content for my template until the PHP Joomla code makes the template dynamic. re-open KompoZer and open your index. we could define a color but in this case we want to assign an image to the background. If you want to control the background appearance of a div. Essentially. now can we. I will use www.

We will realign the text as we style each of our divs. you will see that the header div now has a header image and is sized to perfectly fit the image. The header image is 754px * 179px. There we can set the dimensions of the div in several different units of measure. we will be setting our div dimensions the same way.Move over to the Box tab and look for the Width and Height text boxes to re-size the div. If we preview what we have so far. we see that the template is positioned off center on the left hand side of the page. The fix is quite easy for IE. it is not a situation without a remedy. Figure 11 Since Internet Explorer doesn’t properly interpret CSS we will have to trick it into working properly. Set the width of your div to 754px and the height to 179px. Now when you preview the template in IE you will notice that the template is now centered. Microsoft’s Internet Explorer doesn’t handle this task in a standards compliant way like most other web browsers. Open the CSS editor and we will style the body tag. Contrary to what a person may assume. However. Since pictures are measured in pixels. If you click on OK to exit the CSS editor. we will have to fix it using both a compliant method and a noncompliant method. . Open the CSS editor to style the body and select the “Text” tag and set the text alignment to “Center”. As you can see in Figure 11. the header div is now styled. In order to “fix” this centering issue. but the two major web browsers handle centering the template on the page in different ways. but all of the text is center aligned as well.

The left div will contain our menu and the right div will be the body of our page where the actual content will be displayed. In order to do this. our plan shows a simple two column fixed width template. The left div will be the area where Joomla will display its menu. Now that our container is styled. Next we add the simple background image. we will use the standards compliant method. and colors depending on the side of the div and our personal preferences. Re-enter the CSS editor and we will be styling the “header” div and the “container” div by setting the left and right margins in the “Box” tab to “Auto”. Click OK to exit the CSS editor and you will see that now the header image appears the same as it does in our plan with a border around all four sides. We can set up the borders to be the same on all four sides or we can have different line styles. In the header div.To center the template as it is displayed in Firefox. We will start with the left div. This would help keep our template size down. In this case our preference is that the border to be solid and black with a line weight of 2 pixels. There is a selection of choices here. top. weights. and right. Crop out a one pixel tall strip of the plan that is the complete width of the plan and save it to the images folder of the template. We could make the border wrap all the way around the Container div. To recreate that border and the remaining borders as seen in our plan. was 754 pixels. We will also want to set the fixed width of the Container in the Box tab of the CSS editor at the same width as our Header. we need a very small section of the plan. Now define that image as the background of the container image. we can move on to the divs nested within the container div. As you will see in Figure 12. The two methods do not conflict with one another so there will be no further worries about having our template display properly once the IE patch and the CSS standards compliant method are applied. Now choose the “Borders” tab in the right hand pane of the CSS editor and setup your borders as described. In order to make a two column template we defined two divs in our wire frame where we will display the content assigned to each of those columns. Basically. The background image had a thick black border around the left. but since we will be applying a background image to the container that includes the border. we could use CSS to define the background color of our nested divs. which if you recall. but the template would eventually begin to show some white space as we massage the size of the divs to suit our needs. but no border along the bottom. Since simple menu systems do not require a lot of space. . Once that is done for the header and container divs. we will only apply borders to the top and bottom of the Container. Re-enter the CSS editor and select the container style rule in the left hand pane of the CSS editor. Re-enter the CSS editor and select the left style rule to begin. we will style the container div to have a thick black border. preview it in Firefox to bask in the glow of a job well done and prepare to begin styling our nested divs. we used a background image. we will style this div as a narrow strip down the left hand side like we originally planned.

With that consideration. To do this. we will need to create a custom rule for each state of a link. we will need to create special styling rules for the affected links. Once it is selected we will need to make sure that this style rule affects only links in the left div. We can style all of these features. but we need to create new style rules that define the style of links in the left div. simply insert “#left “ before “a:active” The rule for active links will then be specifically for links in . As you can see in Figure 12. click on the small painter’s palette in the top left corner of the CSS editor and select “Style Rule” to create a new style rule. since we only want to style the links in the left div. Each of the menu items in the div are actually links. Since styling links is not a basic CSS rule. we need to style the left div at 174 pixels wide. The width of our menu bar in our plan is 176 pixels if you include the border. We also need to consider that the current position of the left div covers up the border of the Container div with text from the left div. the menu links are a light blue Arial Black font at about 15 points in size. We also need to define the text color of the menu items in the left div. Select the “Custom Style Rule” radio button to begin. However. To solve this problem we need to add a two pixel margin which will move the left div two pixels to the right and reveal the border that was lurking beneath it. Links can be styled in much the same way as any other item on your page. we created our border with CSS when we styled the container. To do this. click the down arrow to select “a:active”.Figure 12 Let’s set up the size and positioning of the left div first by re-entering the CSS editor. IN the text box below. selecting the left div and choosing the Box tab. However.

Specifically. a:hover.the left div. Since our fixed width of the template is 754 pixels and we want our right div to fill in the empty space on the right hand side of our template. Follow similar guidelines for defining the CSS elements of the left div for the right. There is just one more element to style in the left div. Simply return to styling the left div and enter the Box tab. There set the float option for the left div to be a left float. Figure 13 . Once the new style rule is completed. You will need to keep in mind that since the background to the div is a dark color. remember that you must do the same thing for each of the other three link states: a:link. you may need to choose a light color for the text so that it is easily read. That element will be a good starting place for styling our right div in the Box tab of the CSS editor. but we will get to that after a brief interruption in the form of styling the right div. we will need to define our right div to be 578 pixels wide. and a:visited. This will use all of the available space for our right div. Now CSS knows that the empty space to the right of the left div is available for use and will allow content from the right div to flow around the left. If you preview your template now. This is easily resolved. Enter the various tabs in the “#left a:active” style rule to style the links in a manner you find pleasing. The reason for this is that CSS wants to display everything in a particular hierarchy. you will notice that the right div shows up below our left div. If you don’t. the link will revert to its default style when the link state changes. if one div is declared before another in the source of our wire frame. However our content now flows around the left div as seen in Figure 13. it will display above the divs declared below it in the source.

Decrease the width of the div in the Box tab of the CSS editor to bring the div to size. Our left and right divs have one more bit of styling to have defined before we can call it styled. This may not be desirable depending on your design preferences. I prefer to show a little skin around the content. What we now have is an HTML template that will function as a Joomla template once the PHP bits are added. simply set the text align in each div to align to the left. To accomplish this. Now you can preview your work in Firefox or IE to see your handiwork.In some situations that effect may be desirable. Since we want the content of the right hand div to clear the content of the left div. Once you are done tweaking your CSS styling of your template we be finished with KompoZer and begin adding the bits that make this template a Joomla template. However. What we need to do is define a left hand margin to the right div so that the content of the right div clears the left div. We’re almost there! . CSS is a very versatile framework for styling the content of your site and is better in some ways than using rollover gifs or Flash to get graphic effects on your site because it keeps the overall file size of your template low and the site load time low too. I add a little extra margin and set the margin to 185 pixels to add that pleasant empty space. but in our template plan we want to see the left hand div extend for the full length of the page. To fix this. Go ahead and play with the styling to see if there are any extra little bits of CSS that you want to see in your template. that shifts the entire div to the right beyond the fixed width of the template. If you notice that all of the text is center aligned in the left and right divs. that is a side effect of the non-standard CSS styling we applied to fix the template centering issue in IE. we will require a minimum margin of 176 pixels to be set in the Box tab of the CSS editor. It just looks better to have a little empty space around the edges. but it completely fills up the empty space. Now our content clears the left hand div.

php file. we saw one limitation in KompoZer in that it doesn’t natively support PHP files. and select “Wordpad” from the pop out menu. If we were to change the header. . I know it seems like an awful step backward." id="header"> </div> <div style="text-align: center. We’ll simply use a text editor like Wordpad. but it really is the best way to move forward while keeping our Joomla template project free. Since the sample content is only a sample. Since we do need to change the header. Once you have opened our wire-frame in Wordpad. If you recall.Joomlatizing Your Template Or “Let there be Joomla!!!!” In the introduction to this tutorial. The bloat comes in the form of the sample content we included.” option. charset=ISO-8859-1" http-equiv="contenttype"> <title>TemplateTut</title> <link rel="stylesheet" href="CSS/TemplateCSS. it is here that we bid a fond farewell to KompoZer. we discussed the fact that free software often comes with functional limitations not found in commercial alternatives. Since we have abandoned our trusty KompoZer. you may be wondering how we will continue without an HTML editor. in an effort to make HTML easy. manages the header information of your page for you. it can’t be turned off for those of us who wish to do a bit more than HTML. She served us well. Now our wire-frame looks like this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. .css" type="text/css"> </head><body> <div style="text-align: center.org/TR/html4/loose.w3. KompoZer would automatically reverse the change. Delete the paragraph tags and everything between them. you will notice that the source is simply bloated. KompoZer. While this is a very useful option for beginners who only wish to use HTML.01 Transitional//EN" "http://www.dtd"> <html><head> <meta content="text/html. It is here that we find another limitation of KompoZer. Select the “Open with . we can delete it. and Joomla will be dynamically providing the content of our site. Open your template folder and right click on the index." id="container"> <div id="left"> </div> <div id="right"> </div> </div> </body></html> .

NET Framework from Microsoft.w3. your index. The first bit that we want to select is the “Header”. You can see the JTT user interface in Figure 14.8. you can paste it over the header information of your index. and lets get started. ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/_system/css/general. It places a selection of code on your clipboard so that you can paste it in your code.org/1999/xhtml" xml:lang="<?php echo $this>language.org/TR/xhtml1/DTD/xhtml1-transitional.php file in Wordpad.php file. you will need to get it because you won’t be able to move forward without it. Your index. The version I used in writing this tutorial was version 0.' ).w3.php file will now look like this: Code: <?php /* * * Brief Info * */ defined( '_JEXEC' ) or die( 'Access to this location is RESTRICTED. Figure 14 Click on the “Insert Module” button and you will see that there are loads of options from which to choose.css" type="text/css" /> </head> <body> . ?>" lang="<?php echo $this->language. The Joomla 1.5 Template Toolbar (JTT) is a code snippet program.css" type="text/css" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template. Once you have it.dtd"> <html xmlns="http://www. You will also need to have the latest version of the .vkrgnf. ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.4.5 Template Toolbar yet. Open JTT.com.If you haven’t already gotten the Joomla 1. You can get it here: http://antun.

" id="container"> <div id="left"> </div> <div id="right"> </div> </div> </body> </html> The header information is the part of the index. In this case. Since we only have one CSS file.0 Transitional. ?>" > <head> <jdoc:include type="head" /> . the code snippet includes links to two CSS files.' ).dtd"> <html xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. ?>" lang="<?php echo $this->language.<div style="text-align: center. ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.org/1999/xhtml" xml:lang="<?php echo $this>language. the header file tells the browser that it is a PHP file based on XHTML 1. As in any code snippet library." id="header"> </div> <div style="text-align: center. we are going to delete the extra one and your code will now look something like this: Code: <?php /* * * Brief Info * */ defined( '_JEXEC' ) or die( 'Access to this location is RESTRICTED.php file that tells a web browser how it should interpret the code in the body.0 Transitional//EN" "http://www. the default code is not always going to be exactly what you want and you may need to either modify your site to suit the code.w3." id="container"> <div id="left"> </div> <div id="right"> </div> </div> </body></html> <div style="text-align: center. or modify the code to suit your site. In this case.

and a simple component position in the right div." id="container"> <div id="left"> </div> <div id="right"> </div> </div> </body></html> <div style="text-align: center. ?> </div> . we can set up the code for our divs. Click on “Insert Module” again and choose “Left (Simple)”.css" type="text/css" /> </head> <body> <div style="text-align: center. We will be setting up a simple module position in the left div." id="container"> <div id="left"> </div> <div id="right"> </div> </div> </body> </html> Now that the header is set up." id="header"> </div> <div style="text-align: center. Your code will look like this: Code: <div id="right"> <?php if($this->params->get('showComponent')) : ?> <jdoc:include type="component" /> <?php endif. It should look something like this: Code: <div id="left"> <jdoc:include type="modules" name="left" style="" /> </div> You will want to follow the same procedure to paste the code for the right div. except this time you will choose “Main Body”. You will want to paste this bit of code between the div tags for the left div.<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.

our code should look like this: Code: <div id="right"> <jdoc:include type="component" /> </div> It may be a bit hard to believe. . If we were going to create a more complex template. we are going to delete some of it because our template is super simple and the first and last lines of the code are not necessary. In the end.However. Next let’s work on our delivery. However since we really want to only make a very simple template that works the extra code will only serve to make things more complicated. but that is all the code that is absolutely necessary for a Joomla template to work. we may want to keep the code depending on the required complexity of the site.

All that remains is to Zip the contents of the TemplateTut folder and install. Essentially it describes the template to Joomla. Figure 15 Select all of the files in the Template Files section then click on the “Add Files” button. . The XML Editor in JTT will scan the folder and add the files and their file structure and add them in the Template Files section. Surf to the folder where the TemplateTut folder is located and click OK. Now fill in the blanks in the Template Info section of the XML Editor. click create and save it in the TemplateTut folder. . See Figure 15. Inside that zip file are all of the folders and files that make up your Joomla template. Fortunately.It’s not Pizza Hut . There is one required file that we have not yet discussed. Click the “XML Editor” button to open the XML Editor. . Now that the XML file is complete. The XML file is a file that tells Joomla what type of file is to be installed. JTT offers a solution for that too. Every Joomla template is wrapped up in a zip file. but it is delivery. The file structure of your first Joomla template is complete.

Big thanks go to S-Fraz for being my guinea pig and testing the tutorial. but I’m working on converting you. You aren’t a Joomla fanboy yet. This tutorial was written with the focus of using free software in order to make Joomla templating accessible to everyone who has a MS Windows XP or higher based computer. I would like to thank Pop for proof reading this and turning me on to Cascading Style Sheets. it should serve as a basis for your continued learning regarding Joomla templating. It is my sincere hope that you have learned something worthy of sharing with a like minded friend. I will thank my web host with one more shameless plug BryanSoft.Note from the author: While this Joomla template is very simple. Happy Joomlaing! wjp . Last but not least.com.