Your Customers are Mobile, you will be too …

In this tutorial we will show you how to take a HTML template you have created and convert it into a Joomla template. We will be using Dreamweaver CS5.5 for our conversion but any version of Dreamweaver will suffice or any text editor will do the job just as well. To do this tutorial you should have already created a HTML mock-up of your website in Dreamweaver and filled it with lorem ipsum etc to create the look and feel. We will be taking that test content out and replacing it the code needed to convert your HTML to a Joomla 1.6 template.

Dreamweaver CS5: Converting a HTML template to Joomla 1.6

To do this tutorial you will need:

  1. A HTML mock-up of your site already made in Dreamweaver
  2. Dreamweaver
  3. Adobe Fireworks or Photoshop
  4. A folder set up on your desktop for your template work.

Having all those things we are now ready to begin.

Fireworks CS5: Creating the thumbnail images required for your Joomla Template

As you probably guessed this is the part we need Photoshop or Fireworks for. If you don’t have them don’t panic you can use other software such as Gimp (free) or any other image editing software you like just as long as your familiar with how to you use it. I will be using Fireworks CS5 for mine.

We need to create 2 images for our Joomla template. You cannot create a template without them but the funny thing is you kind of need to make the template to do these images properly. So we are going to our mockups to create a temporary version of these images then when we are finished we will re-create the images ready for deployment to our server.

Open your HTML mock-up in Dreamweaver and hit F-12 to preview the document in your browser. While in your browser hit Crt-PrtScrn to take a screen shot of your website. Open Fireworks (or any other image editing software) and open a new file. With Fireworks or Photoshop the default size of the new file is usually able to match what you have in your clipboard which in this case is your screen shot.

Once your have your new file open hit Ctr-V to paste your screenshot into the file. You may need to move the image around a little but when you are ready select your crop tool and crop around your webpage, getting as close to the edges of it as you can.

In your menu up the top of Fireworks go to Modify >> Canvas >> Image Size make sure constrain proportions is ticked and set the image width to 640px. and hit OK. Go back into  Modify >> Canvas >> Image Size and this time untick Constrain proportions and if your height is greater than 400px change it to 400px and hit save. If your image is smaller than 400px high hit cancel instead.

Now in the optimise panel change the file format to PNG8. Both our preview images must be PNG or Joomla won’t recognise them. Once your are ready to save your Image as a PNG hit Shift-Ctr-R to export your image as a PNG. Your must save your image as template_preview.png or Joomla again will not recognise it. Save in the top level of the folder you have set up for your template work.

Once you have done that you need to repeat the above process to create a second image that is 206 by 150px in size and export it to the same place and name it template_thumbnail.png . Once completed you can save your original screenshot if you wish but do not save it in the same file. You will see why further down the track.

Copy Require Files

In this step we need to copy our css folder and images folders as well as our HTML mock-up file to the folder we created to hold our template. So copy them into that folder now and make sure the mock-up is in the top level of the folder. Once you have done that go into your CSS folder and make sure the only CSS files in that folder are required by your template itself. Any CSS files relating to  image galleries and the like remove them.

We also need to do the same in the images folder. If there are any images in there that are not part of the template itself delete them now. You should now only be left with your background images logos etc.

Fireworks CS5: Creating a Favicon

I am not going to go into much detail on this as I already have a tutorial on creating favicon’s. If you don’t know how to make one go to that tutorial now and create one. We don’t really want to use the default favicon so we need to create one now. We must have a favicon ready for our Joomla template so it really should be done at this stage. Make sure it is saved with the name favicon.ico and must be in the .ico format. Make sure it is saved in the top level of your template folder.

Dreamweaver CS5: Converting your HTML to Joomla

Now for the stuff you been waiting for actually turning your HTML mock-up into a Joomla template. And the process is a lot simpler than you probably been thinking. But one thing we do need to do before we proceed is make sure that we know what all of our module positions are going to be. we also need to decide on names for each of these sections.

Say you are going to have a menu in the header, and modules placed down the left and right side of your web page, a module position in your footer and you want a bread crumb up the top of your articles these would be your module positions. Your articles would not be a module, they are a component and will be handled separately. In my example I want a menu position in the left column I want kept separate from the rest of the stuff in the left column so I will have a module position for that. So in all we would have 6 module positions to put in our template.

Now that we know what we want we need to open our HTML file and re-save it as a PHP file in the top level of the directory we made earlier for our template. Once you have done that switch to code view and lets get started.

Highlight the text for your the head of your HTML document and replace the entire head HTML with the following code. This is the basic code that starts off our Joomla template.

<?php

  // no direct access
  defined( '_JEXEC' ) or die( 'Restricted access' );
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

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

  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/your_css_folder/your_css_file.css" type="text/css" />
</head>

Note the line That I have bolded, where it says  your_css_folder replace it with the name you have given your css folder and then replace your_css_file with the name of your CSS file. If you have more than one CSS file you use in your template copy this line and repeat the above changes to that line.

Now that we have the head done it is time to move onto the changes we need to make to the body of the file. Locate the menu you first wish to have in there. If you followed good design practice this menu should be inside its own div. We wish to keep this div so we need to replace ALL the code inside that div with the following line.

<jdoc:include type="modules" name="positionName" style="xhtml" />

And then change where it says position name to whatever you wish to name this module position. Common practise is to call this particular module position “menu”. Now in my example I have a menu on the left I want to have in its own module position so I need to highlight the code inside its div and again replace it with the above code and change the name I wish to assign to this module position. Do not double up on names.

Now we need to highlight the rest of the code inside the leftcolum div and replace it with the above line of code and change its name to leftcolum.

We now do the same to the right column and to anything inside the footer div as well. Do not put this code in where you have your main content mocked up we are about to do that. Highlight the code inside your breadcrumb div (if you have one) and replace it with the above line of code and call it breadcrumbs.

Now we can move onto replacing our content so that Joomla can correctly load it into our page for us. Highlight all the code inside your content div and we now replace it with the following lines of code.

<jdoc:include type="message" />
<jdoc:include type="component" />

Now your original template should be looking pretty empty and probably won’t look much good right now but that’s because it is now set up for Joomla to run but it isn’t in Joomla yet. We now need to move onto getting the final step ready to go. So save your file and lets look at the XML file we need to be able to install it.

Dreamweaver CS5: Creating your XML file for Joomla 1.6

For this step you can either open an existing Joomla templates XML file or create your own from scratch. I will go through the lines of code needed to for a successful install of Joomla 1.6

The first three line of any template_details.xml file are always the same, do not change them.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="1.6" type="template" client="site">

Leave these lines as is and lets move onto the next section. this section relates to all the information about the site and its author as well as copy right details etc.

<name>test</name>
<creationDate>23/6/2011</creationDate>
<author>Ripp </author>
<authorEmail>ripper.orb@hotmail.com</authorEmail>
<authorUrl>http://featofdesign/Stephen</authorUrl>
<copyright>Copyright (C) 2011 Ripper Web Designs. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<version>1.6.0</version>
<description>this is a test template</description>

Most of these are pretty self-explanatory. Replace each section with your own details. Creation date can be in any format you like, numbers even words go for it. The tag name though it is important to name it what you want your template to be called inside of Joomla.

This next section is a little more important.

<files>
  <folder>css</folder>
  <folder>images</folder>
  <filename>index.html</filename>
  <filename>index.php</filename>
  <filename>templateDetails.xml</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>favicon.ico</filename>
</files>

Every file or folder that is in your template folder must be listed here. If any files are missing from this section they will not be loaded by Joomla. If a file is listed in this section that does not exist the template simply will not install. It is only top level files that you need to list inside the <filename> tags. All folders that are in the folder must be placed inside <folder> tags. This must be all surrounded by the <files> tags. Now we need to add our module positions.

<positions>
  <position>menu</position>
  <position>leftmenu</position>
  <position>breadcrumbs</position>
  <position>right</position>
  <position>footer</position>
  <position>left</position>
</positions>

Remember we have to have the <positions> tags around all of our <position> tags and we must list every position actually as it was typed in our PHP document.

And to finish the file off add the following line to the end of our file to close it off

</extension>

now save your XML file as templateDetails.xml and make sure you have it spelt and capitalised exactly as I have it.

Final Step

We are now almost ready to upload our template. Locate the folder that contains your template and right click on it. Now select Send too >> compressed (zipped) folder this will create a zip file of the whole lot which you can now use to install as your new template from within Joomla.

Hope you all found this tutorial helpful and see you again soon.

 

11 Responses to Dreamweaver CS5: Converting a HTML template to Joomla 1.6

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: