This is Part 2 of the Joomla Template Tutorial series. Part 1 is here. Part 3 is here.
By now, you should already know what Joomla elements are, particularly Main Body and Modules/Module Positions. Let’s move on:
3. Identify where you want to place your Joomla elements
Now take a look at your mockup and decide where you want to put your Main Body & Module Positions.
Here is mine:
As you probably notice, I didn’t use any of the optional elements. I usually just use Main Body & Module Positions, and worry about the minor ones later on.
And, my template is actually very simple. My motto is: If it can be placed on a module, don’t hardcode it in the template.
A common mistake is trying to put everything in the template. I know some people who put in their menus & banners, when these can easily be placed in modules. Try to avoid these mistakes. Remember that modules are easier to edit than templates.
A template should only be a skeletal framework of your website. As a rule of thumb, only put the graphics and text that you will not be updating for at least 6 to 12 months. For me, these are my logo, my background image, & the tables which provide the division between my content & elements.
4. Create the directory structure
In your computer, create the directory structure below:
- Create a directory called template_name (or any name you want). Don’t put spaces.
- Under template_name, create 2 folders: css and images.
This is where you will be saving your template files, which is explained in the next section.
5. Code the HTML version of your mockup.
It’s now time to write some HTML. You need to take your time on this. Don’t worry if it takes you hours, or even days.
Look at your mockup, and start creating its HTML version — yes, with all the title, head, body, table tags. For purposes of this tutorial, save it as template.html.
Include also your logo & other graphics you have decided should be part of your template.
For those who are “HTML-challenged,” if you are using Fireworks or ImageReady, you can use the export to HTML function. Most will probably design their first template using WYSIWYG editors such as Dreamweaver & Frontpage. There are, however, some people who are proficient enough with HTML that they can use a text editor. Again, use the tools you’re most comfortable with.
Where to save your files. By the way, your files should be placed in the proper folder / subdirectory. Remember the directory structure you created in the previous step? Here is a brief explanation of what should be saved where:
| Folder | Save what files |
|---|---|
| template_name | template.html (which will be renamed later on to index.php) |
| template_name/images | All images |
| template_name/css | CSS file (template_css.css) |
You can start coding your Cascading Style Sheets, too. If you’re not sure how to go about this, just create a blank text file with the filename template_css.css. Or, you can also use my Blank CSS Template for Joomla which includes all the styles that is used by Joomla.
Remember to save your template_css.css file in the proper folder: /template_name/css
6. Rename your HTML mockup to index.php
Backup your template.html file, and save it in a different folder. Now go back to your template.html file (the one that is located under template_name), and rename this to index.php.
7. Enter the code for the Joomla elements
It is now time to put the Joomla Element Codes in your template. You see, there is a special code assigned to each Joomla Element. You simply have to enter these codes where you want your Joomla Element should appear.
Open index.php (formerly template.html) in your text editor. You can also use Dreamweaver, but make sure that you are in Code View. Now locate where your Joomla elements are located, and paste its corresponding code.
| Joomla Element | Code |
|---|---|
| Main Body | <?php mosMainBody(); ?> |
| Module | <?php mosLoadModules ( ‘module_name’ ); ?>
Note: Change module_name to what you want to call your module. For example, if your module name is right, your code should be <?php mosLoadModules ( ‘right’ ); ?> |
| Date | <?php echo mosCurrentDate(); ?> |
| Footer | <?php include_once( $GLOBALS[‘mosConfig_absolute_path’] . ‘/includes/footer.php’ ); ?> |
| Pathway | <?php mosPathWay(); ?> |
| Site Name | <?php echo $mosConfig_sitename; ?> |
For example, if you want to put the Main Body in the center table, then you have to put the code <?php mosMainBody(); ?> inside that table.
This ends Part 2 of the Joomla Template Tutorial. Click here for Part 3
Leave a Reply