Make a Joomla Template in 5 Easy Steps

A Beginners Guide

By Gary Reid http://clubtvk.com

Copyright © 2006 Gary Reid. All Rights Reserved. No part of this book may be used or reproduced in any manner whatsoever without written permission. Please see the license in Appendix 5 of this book. Published 2006 by Gary Reid in the United Kingdom http://garyreid.co.uk Phone +44 (0)141 530 8654 • Email gary@garyreid.co.uk Copyright Info The copyright of this work belongs to Gary Reid, who is solely responsible for the content. Please direct content feedback or permissions to gary@garyreid.co.uk. The moral right of the author has been asserted.

Contents
Chapter 1: Introduction................................................................................................................................................1 Who’s This For?........................................................................................................................................................1 What You Will Need ................................................................................................................................................2 Preamble.....................................................................................................................................................................2 Important Stuff! ........................................................................................................................................................2 Chapter 2: The Basics of a Joomla Template............................................................................................................3 The index.php file.....................................................................................................................................................3 The templateDetails.xml file ...................................................................................................................................4 The images folder .....................................................................................................................................................5 The css/template_css.css file ..................................................................................................................................5 Chapter 3: Step One - Grab the Raw Material..........................................................................................................7 Chapter 4: Step Two – Make a Home for our Template ........................................................................................9 Chapter 5: Step Three – Create Our First Layout ................................................................................................. 12 Menus ...................................................................................................................................................................... 12 Main Menu ......................................................................................................................................................... 12 Top Menu........................................................................................................................................................... 12 User Menu .......................................................................................................................................................... 13 Other Menu........................................................................................................................................................ 13 Pathway ................................................................................................................................................................... 13 Login........................................................................................................................................................................ 13 Search Box .............................................................................................................................................................. 13 Main Content.......................................................................................................................................................... 13 Banners.................................................................................................................................................................... 14 Newsflash................................................................................................................................................................ 14 Popular .................................................................................................................................................................... 14 Syndicate.................................................................................................................................................................. 14 Who’s Online.......................................................................................................................................................... 14 Poll’s......................................................................................................................................................................... 15 Related Items.......................................................................................................................................................... 15 Random Image ....................................................................................................................................................... 15 Latest News ............................................................................................................................................................ 15 Roundup of the Modules...................................................................................................................................... 15 Layout...................................................................................................................................................................... 16 The Layout Sketch................................................................................................................................................. 18 The HTML ............................................................................................................................................................. 20 Chapter 6: Step Four – Adjust The Style Sheet ..................................................................................................... 33 The Site Name........................................................................................................................................................ 33 The Top Menu ....................................................................................................................................................... 36 The Search Box ...................................................................................................................................................... 39 Login Box, Popular, Latest News........................................................................................................................ 40 The Pathway ........................................................................................................................................................... 43 The Main Body Area ............................................................................................................................................. 44 Bits and Pieces........................................................................................................................................................ 47 The Optional Section ............................................................................................................................................ 49 W3C Validation...................................................................................................................................................... 52 Chapter 7: Step Five – Package The template........................................................................................................ 53

................................................................................................... 59 Chapter 9: Advanced Techniques ................................................................................. 91 .................................................................................................................................................................................................................................................................................................................... 72 Step 4 The Style Sheet ...................... 72 Step 2 Make a Home for the Template ............................................................................. 84 Joomla Footer Tag .................................................................................................. 67 Adding a Logo ................................................................................................................... 88 Appendix 5: E-Book License Agreement ........ 82 Appendix 1: Joomla Tags ........................................................................................................................................................................................................................................................................................................................................................................................................................................... 90 Appendix 7: ClubTVK index.............................................................................................................................................................. 85 Joomla Tags with Switches ............................................................. 84 Joomla Pathway Tag .................................................................................................................................................................................................................................. 84 Joomla Site Name Tag............................................................................................................................................................ 86 Appendix 3: Duffer1 templateDetails................................................................................. 69 Complex Joomla Tags ..........................................................................................................................php......................................................................................................................................................................................................................................Chapter 8: Two Column and Three Column Template.......................................... 84 Joomla Template Path Tag ............................................................................................. 84 Joomla Main Body Tag.................................................................................................................................................. 84 Joomla Tags ............................................................... 81 Chapter 10: About Gary Reid ..xml....................... 81 The End........................................................................... 87 Appendix 4: Additional Resources.....................................xml ...................................................................... 89 Appendix 6: ClubTVK templateDetails.................................................................... 84 Joomla Site Path Tag .................................................................... 72 Step 1 Grab The Raw Material................................................................................................................................................ 76 Step 5 Package The Template ................................. 85 Appendix 2: Duffer1 HTML ..................................................................................................................................................................................................................................... 84 Joomla Head Tag........................................ 72 Step 3 Layout ............................................................................ 70 Chapter 10: The ClubTVK Template.................................................................................................................................................................................................................

you don’t need to learn any graphics for this to work. My wife just pointed out ‘what if someone writes 4 steps to make a template’. in fact it’s a prerequisite to be a complete beginner to use this book.com which provides free Joomla templates. enough of this introduction stuff. Hmm hadn’t thought of that! Anyway. I’m no designer. You want it simple? Well. I had to lock them up to stop them leaning over my shoulder and saying ‘actually you should do it like this’. two column and three columns so you should have a good working knowledge of the Joomla template system when we are done.com which provides blog hosting. Their way is good. we’ll create three templates a single column. 1 . http://theventurekit. So. but it does the job. let’s get onto the good stuff. clarity and usability are much more important. I’m not going to expect you to know anything about design or html. people like you and me who have no design training but need to get a design that looks good enough to unleash upon the world. I get a lot of emails through The Venture Kit asking about a ‘how to’ guide for templates so decided to sit down and write it. but having locked my designers in a small darkened room I decided to go through the absolute easiest way to create a template for Joomla.com which provides web consultancy and design and http://m. it doesn’t get much simpler than this. I run a few Internet based companies and they all use Joomla. If you are a design expert put it down now! I think you will find it an enjoyable journey. because trust me layout. but not so easy for us beginners to get a handle on. It’s not perfect and it’s not neat and tidy. If you have just installed Joomla. Who’s This For? This guide is for absolute beginners. taken a look at the templates and thought ‘nothing quite right for me here’ then this book should help.I N T R O D U C T I O N Chapter 1: Introduction I’m Gary Reid. let’s get hacking. duffers.utiny. http://combtail. It’s not about graphics.

it’s free. The reason for this is that Joomla is XHTML Transitional anyway. This book has been based upon Joomla version 1. So. I have put all of the code into appendices to make it easier. Other files can be grabbed from the http://clubtvk.0.com downloads section.php. 2 . although we use DreamWeaver here I realise this costs a few hundred dollars so I got hold of PHP Designer 2006.coffeecup. You’ll have access to this if you bought this e-book Hopefully cutting and pasting the PHP bits from this e-book will cut down on mistakes that can happen when trying to type this stuff in. so we couldn’t use strict. Finally you will need FTP access to your Joomla install and an FTP program to upload/download files. But the details will work well with any of the 1. Important Stuff! Throughout the book we’ll be using bits of PHP code and HTML. you can try and just type it in straight from the book. You can grab hold of a free FTP program from here http://www.dk/phpdesigner. This piece of software is just a touch more reliable to use than say notepad. You will also need a HTML editor.0.mpsoftware. if you don’t already have a HTML editor go get your copy now.x versions and unless the Joomla guys go mad should work on all future versions.com/free-ftp Preamble Before we get into the actual work I want to point out to all W3C people that we are going to use tables for layouts not DIV’s. in other words Joomla uses tables for modules. but just cut and paste for the best results. Plus it’s just damn plain easier for us normal folk to use a table. Get hold of it from here http://www.8.I N T R O D U C T I O N What You Will Need Obviously you’ll need Joomla installed on your website.

php file This file is the wire frame of your template. 3 . Let’s take a look at each of the important files we will work with today. you don’t really need to understand what it does other than act as a placeholder for your modules. In fact it’s quite simple. as shown below. It holds the information that allows Joomla to create the layout for your site. Using index.T H E B A S I C S O F A J O O M L A T E M P L A T E Chapter 2: The Basics of a Joomla Template Before we get into actually making the template it’s probably worth getting an understanding of the template system Joomla uses.php we set the positions that Joomla can use for modules and the main body text. If you FTP into your Joomla powered site you will see a folder called ‘templates’ go into this folder and you will see another folder called ‘rhuk_solarflare_ii’ inside this folder you will find the template files. If you look in your Joomla administrator section under ‘modules > site modules’ you will see each module has a position. but I will be giving you all of the PHP code to cut and paste into this file. lets examine the rhuk_solarflare_ii template that is shipped as standard with Joomla. We will do this using some PHP code. The index.

T H E B A S I C S O F A J O O M L A T E M P L A T E The templateDetails.png</filename> <filename>images/indent3.jpg</filename> <filename>images/menu_bg.0" encoding="iso-8859-1"?> <mosinstall type="template" version="1.2</version> <description>SolarFlare II is a simple and stylish template.png</filename> </images> <css> <filename>css/template_css.png</filename> <filename>images/indent2.</description> <files> <filename>index.png</filename> <filename>images/subhead_bg.png</filename> <filename>images/spacer. author.png</filename> <filename>images/title_back.png</filename> <filename>images/indent4.png</filename> <filename>images/powered_by.xml file This file is used by Joomla when installing the template from the administrator panel.php</filename> <filename>template_thumbnail.com</authorUrl> <version>2. The clean design of this template makes it very lightweight and fast.png</filename> <filename>images/contenthead.jamboworks.png</filename> <filename>images/arrow.css</filename> </css> </mosinstall> It contains information about the actual template. This is a significatn upgrade for the original SolarFlare template in that is has a completely revised layout that uses an alternate box model hack that makes it easier to modify. Also a table has been introduced in the main content area that better constricts layout causing less problems with 'problematic' components. version and the graphics files associated with the template. New headers and menu elements give this template a 'fresher' look.png</filename> <filename>images/button_bg.xml <?xml version="1.png</filename> <filename>images/header_short. 4 .png</filename> </files> <images> <filename>images/advertisement. it’s name. It looks like this: templateDetails.0.png</filename> <filename>images/indent1.0"> <name>rhuk_solarflare_ii</name> <creationDate>10/20/05</creationDate> <author>rhuk</author> <copyright>GNU/GPL</copyright> <authorEmail>rhuk@jamboworks</authorEmail> <authorUrl>http://www.

The vast majority of the images we will use are already in the standard template. It sets the font. The images folder As the name suggests this folder contains all of the images used in your template. The css/template_css.T H E B A S I C S O F A J O O M L A T E M P L A T E If you take a look at Figure 3 below you can see how Joomla uses information in this file to tell you about the template.css file This is a cascading style sheet and is used to apply a theme to your template. Figure 1 Template Details Although we won’t be using the administrator panel to install our templates I will detail how you can package your template so you can share it with friends later in the book. let’s get started with step one. We will be using a couple of images and this is where we will be putting them. These are the only files we will be looking at today and with these we can build a really unique template easily. colours and various other elements for the template. The reason a CSS file is used is to separate these factors from other parts of the documents layout. 5 . You don’t need any CSS knowledge as I will step you through the basics you will need to understand the Joomla CSS file. So.

T H E B A S I C S O F A J O O M L A T E M P L A T E 6 .

php template_thumbnail. So.xml images o advertisement. to make things easier we are going to get some raw materials to work with.png templateDetails.Grab the Raw Material The worst place to start any project is with a blank page. FTP to your Joomla web site 2. you should have the following files on your PC: • • • • • index.png o indent4. Now move into the rhuk_solarflare_ii folder 4.S T E P O N E : G R A B T H E R A W M A T E R I A L Chapter 3: Step One . Select all of the files and folders you can see and download them to the duffer1 folder we created earlier Check to make sure you have all of the files. Once we’ve got that created we can download the files we need. Go into the templates folder 3.png o indent1. Case sensitive File and folder names are case sensitive.png o rating_star_blank.png 7 .html index. 1. Let’s call this folder duffer1 and create it anywhere on your PC you want. The first thing we need to do is create a folder on our PC where we can store the files. the convention is to use all lower case letters for file and folder names and never have spaces in file or folder names.png o pdf_button.png o contenthead.

Images Missing? If you don’t have some of the images listed don’t worry.png header_short.png o editor_content.png button_bg. you should have all of these files in your duffer1 folder.png printButton. we now have the raw material we need to start putting together our own template.png index.png spacer. The next step is to make a home for the new template on our website.html So.html powered_by.png menu_bg. changes in Joomla meant some newer versions don’t have the same image set.S T E P O N E : G R A B T H E R A W M A T E R I A L o o o o o o o o o o o o o • css subhead_bg.css o index.png indent2. Now that was easy enough wasn’t it? That’s step one complete.png rating_star. This tutorial will work just as well no matter what standard images your version has.png emailButton.jpg indent3.css o template_css.png arrow. 8 .

xml file. this one: <name>rhuk_solarflare_ii</name> We need to put here exactly the same as we called the folder we made on our website above. Okay. so here we are face to face with our first real bit of work. Once we get there we need to create a new folder called duffer1 notice all lowercase. As I wrote above this is necessary so that Joomla can recognise our template as being different to the original rhuk_solarflare_ii. We are going to create this template for http://duffer1. By changing the details in templateDetails.combtail. If they are not changed you may have problems further down the line. The first line we edit is line 3. So. That’s the first part complete.com and we are going to call it duffer1 The first thing we need to do is FTP to our website and go into the templates folder.S T E P T W O : M A K E A H O M E F O R O U R T E M P L A T E Chapter 4: Step Two – Make a Home for our Template We’ve got the raw material to start making our template but now we need somewhere to put it on our website and make sure Joomla can recognise it. editing the templateDetails. it looks like this: 9 . Important Don’t Skip This The next part of this tutorial is important.xml that we downloaded earlier in step one. so we change it to: <name>duffer1</name> Next we move to line 4. we need to open PHP Designer 2006 and then open templateDetails. We now have a place on our web site where we can put our new template. Next we have to move onto editing our raw material.xml we make it visible to Joomla.

The next step is to upload all of the files we have in our local duffer1 folder to the duffer1 folder on our web site.com</authorUrl> <version>1. even though we will be using very little of it we will still be using a few of his images. now we have made the file show our unique details.S T E P T W O : M A K E A H O M E F O R O U R T E M P L A T E <creationDate>10/20/05</creationDate> We need to change it to today’s date: <creationDate>03/15/06</creationDate> Next we move onto line 5 and change this to your name: <author>Gary Reid</author> Next we edit lines 7.2</version> Change them to something like this.com</authorUrl> <version>2.com at http://www.com</authorEmail> <authorUrl>http://www. Your online duffer1 folder should look like the figure opposite.com</authorEmail> <authorUrl>http://combtail. the template uses a developed version of the CSS file from the rhuk_solarflare_ii template developed by rhuk@rockettheme.com. To do this we need to login to the Joomla administrator section and browse to: site > template manager > site templates 10 . 8 and 9. That’s it.rockettheme.rockettheme. Next we need to make this the default template for our site.0</version> The next line is the description of the template so change it to something like this: <description>A template created from the duffer's tutorial. using your email and website: <authorEmail>gary@combtail. so we can see the magic as we work on it.com </description> Notice we have credited the earlier work done by rhuk on the CSS file. they look like this: <authorEmail>rhuk@rockettheme.

Now we need to do some thinking to move the design forward. 11 . However. uploaded it and set it as default in Joomla. created a home on our website for the new template.S T E P T W O : M A K E A H O M E F O R O U R T E M P L A T E When we get there it should look like this. Your screen should now look like this: Notice the green tick under the default column and in the duffer1 row. This means we are now using the new template. We need to create a layout to replace the rhuk_solarflare_ii layout. Let’s look at that next. That’s the easy stuff done. But that’s going to change soon! What we’ve done so far is got some raw material to work with. with our new duffer1 template showing in the list with our details: Check the radio button next to the duffer1 template and click ‘default’ this will set the template as live and the one being used by Joomla. at this stage it just looks exactly like the rhuk_solarflare_ii template.

In total there are four. so you can decide which you want to use and those you don’t want to use. but you can move it to the right position from the administrator area under site modules. this means when you create a new menu item it is automatically added to the menu and will show on every page. By default it is at the top of your page. The first things are ‘modules’. You can decide where each link you create appears. By default the main menu is in the left position. Top Menu The top menu is optional. horizontal in nature and it’s positioning and state can be controlled from the administrator area. however if you browse to site modules in the administrator section of the site you can unpublish the whole of this menu. this means that it fits best into either the right or left positions on your web page. 12 . we will look at each one in turn: Main Menu The main menu is as it appears the sites main menu. The order of each menu item within the menu can be set from the administrator area. top.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T Chapter 5: Step Three – Create Our First Layout Before we dive right in I think it’s best that we understand exactly what we need to consider when putting together a Joomla template. Most of the modules are optional. Menus The system comes with a powerful set of dynamic menus built from the administrator section. other or user menu. in this sense it is optional. Each menu can be set to appear on every page or just on certain pages. You can choose to have it in the main. Modules are how the system presents itself to your visitors. The menu is ‘vertical’ in nature. The menu’s are created dynamically. They take information from the backend and display it in a formatted manner on your website.

This would allow you to add site users manually.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T User Menu The user menu is set to only appear to registered users that are logged in. be default this is the middle column. You can use this menu effectively by having it appear on certain pages with links to extra information regarding that page. Pathway The pathway shows visitors a breadcrumb path of where they are on your site in relation to the home page. The content is dynamically added to this area as visitors browse through your site. By default the login box appears in the left column. The title of the module can be turned off and you can have the login box whilst stopping visitors from registering. optional and vertical in appearance. this is where content you add to the site is displayed. The user menu has some default links but you can choose to unpublish these if you wish Other Menu The other menu is an auxiliary menu for items you don’t want to put in the main or top menu. It’s size and position however can be changed Main Content The main content obviously isn’t optional. The pathway is horizontal in appearance and its width can be varied. Login The login box is optional. Search Box By default the search box is placed in the same row as the top menu. if your site doesn’t require user registrations then you can omit it. 13 . it is worth considering that it needs to be wide enough to display potentially long paths. by default it appears in the left column and is vertical in appearance. The position and size of this area can be changed but there are minimum widths that you are probably best observing.

the module is optional and takes a standard 468x60 banner. It is optional. redirect URL and number of hits each banner can get. such as latest news. It can display items from any content category that you have created. Newsflash On the default template the newsflash module appears next to the logo header on the right of the page. It displays links to pages that have the most hits. The system can rotate banners. 14 . FAQ’s etc. it is optional. This module automatically displays items from the category that you choose. You can set the owner. Syndicate The syndicate module allows you to place links on your pages that people can use to get an xml feed of your site into their news reader. The module is optional. Who’s Online The who’s online module by default is in the right column and displays how many guests and registered users are on your site.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T Banners The banner module allows you to add advertising banners to your site. It is optional and by default is in the left column. Popular By default this section is placed next to the latest news module and above the main content area.

Related Items Related items is a versatile module that works using data set in the meta keywords part of content pages. Latest News By default this section is placed next to the popular module and above the main content area. 15 . it is optional. by default it is on the frontpage in the right column. It is optional. as you can see most are optional but some by nature are needed. such as the menu’s. Random Image The random image module has been designed to go in either the left or right column and randomly displays an image from a set folder. By default its not published but is best placed in the right or left column.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T Poll’s The poll module allows you to put a poll on your site so visitors can vote for things. It displays links to pages in the latest news category. Roundup of the Modules That’s the standard modules that come with Joomla. If enabled it will show links to similar pages that have the same keywords in the meta keywords box. Some are also aligned in such a way that they can only be displayed in a vertical or horizontal manner and this restricts where on a page they can be displayed.

Let’s take a look at the standard page and see where the main positions are. Key to an effective layout is deciding exactly which of 16 . As you can see certain modules fit better into certain areas. You can now see all of the various modules laid out on the page. However to make life easy many of the components are grouped into position categories.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T Layout Joomla’s layout determines where each of the above modules can be placed on your webpages.

S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T the modules you need on your site. At the very least the site needs a menu module and the content module. If you want to create a layout then knowing what modules your site requires is the first key step to create a layout that suits the way your site will work. A layout does not have to be three columns you can choose a two column or even one column layout. The positions on the page are named and here is the above template with the position names highlighted: 17 . You can then use these as a jigsaw to create the various areas of your webpage and so the website. Everything else is entirely optional.

plus we will be creating a two and three column site later in the book. and here it is: • • • • • • • 18 Top menu Search box User login Latest news Popular Pathway Main content .S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T The layout you choose has a direct affect on what modules you can use and where they are positioned. To begin my design process I have made a list of the Joomla modules I want my site to use. here is a site using two different layouts. Although this may not suit your purpose the idea is to pass on the skills you can then use to create the exact layout you need. the content is unaffected but the modules available is affected: As you can see the left layout does not have the right column or the banner. Now it’s time to get down to business The Layout Sketch For this first template I have decided to go for a single column layout.

19 . Once we have the sketch we need to build an HTML table that serves as the container for these parts. The optional block allows us some flexibility in adding certain modules if we need to later. here is my sketch of the proposed layout: As you can see there are two extra parts to this outline. The footer is an intrinsic part of every Joomla template and needed.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T So. the footer and a block just above it called optional.

?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/te mplate_css. The first thing we need to add is the Joomla head tag. you will see a table as shown in the graphic here. What you need to do is double click on HTML under new Document. When we open PHP Designer 2006 we see a page of options.0 Transitional//EN" "http://www. This is vitally important as it sets the basic page elements for a Joomla template.css\" type=\"text/css\"/>" .S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T The HTML Here we go back to PHP Designer 2006 and create our HTML table. They look like this: 20 . Next we need to add in the HTML end tags. these tags should always be the very last things on your template page. The Joomla head tag looks like this: Joomla Head Tag <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed. ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.dtd"> <html xmlns="http://www. Before we add any Joomla tags we need to add in the basic HTML required and build the table that will hold our layout. ?> </head> <body> At this point you really don’t need to know what any of the above does.w3." ). } ?> <meta http-equiv="Content-Type" content="text/html. charset=iso-8859-1" /> <?php mosShowHead().org/TR/xhtml1/DTD/xhtml1-transitional. You will find this code in Appendix 1.w3.?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(). content goes in between them and the head tag.ico\" />" . This will bring up a blank page for us to work with. all you need to do is make sure it’s at the top of the page.

we need a row for: • • • • • • • Site name Top menu user login – popular – latest news Pathway Content Optional Footer That means we need a table 1 column wide and 7 rows deep. so lets walk through the table creation.php.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T Joomla End Tag </body> </html> So. your PHP Designer page should look like this: Before we go any further we are going to save this file. Now we need to add in the table we need and we are actually going to be adding multiple tables nested inside one another. so we call this file index. PHP Designer 2006 makes this easy for us as it has a little GUI for adding table.php page that’s already in there. So. it will be one column wide and contain enough rows to hold the items we have in our sketch. The first table we add is the main container. This again simplifies the design process for us beginners. 21 . We are going to save it in the duffer1 folder on our PC and overwrite the index.

S T E P

T H R E E :

C R E A T E

O U R

F I R S T

L A Y O U T

In the top row of icons you will see this one it’s the icon to create and insert a table. So, make sure you have your cursor in-between the two <body> tags as shown here. Next click the table icon and a popup window will appear. That looks like this.

Adjust the rows so it equals 7, as that’s how many we need. Then click the properties tab and set the width to 700, as we want our table to be fixed width at 700 pixels, set cellpadding and cellspacing at 0 and choose centre from the alignment dropdown. It should look like this:

Now click Ok. What you should see now on your page is this:
22

S T E P

T H R E E :

C R E A T E

O U R

F I R S T

L A Y O U T

You can see we now have rows of HTML and we will be using these for holders of the Joomla tags. The first row we are going to work with is row 13 from the graphic above, it is the first row in our table and is going to hold our site name. Luckily Joomla has a tag for automatically putting the site name into our template, the tag looks like this:
Joomla Site Name Tag
<?php echo $mosConfig_sitename; ?>

We put this tag between the two <td> tags on row 13 so it looks like this:

23

S T E P

T H R E E :

C R E A T E

O U R

F I R S T

L A Y O U T

That will now echo out the sites name from Joomla onto your web page. Next we need to add the tag for the top menu and search box, as these are two separate tags we are going to add a table with two columns inside the next row so we can format the layout easier. This means we are now working with row 16 in PHP Designer 2006. Place your cursor inside the two <td> tags as shown below:

again. This time we want to add a table with 1 row and Now click on the add table icon two columns, we also want this table to be 100% wide, in other words it stretches to the full width of the main table which is 700 pixels. We do this so if we want to change the width of our main page we just need to adjust the main table width and everything else moves with it.

As you can see above we set the width to 100 and check the % box, we also set cellpadding and spacing to zero. Now we click Ok. Your page should now look like this:

24

so we need to move to row 24 and create another table.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T The new table has been added and can be seen occupying rows 16 to 21. the login form. our page now looks like this: The next row will hold three items. For this we will use the Joomla user tag. this is versatile because Joomla is capable of handling up to nine of these. ?> If you notice the number ‘1’ after ‘user’ this can be incremented up to ‘9’ to create nine instances. popular menu and latest news menu. What we will do is use user1 and user2 for our top menu and search box. The rows we will put our next tags in are rows 18 and 19. the tag looks like this: Joomla User Tag <?php mosLoadModules ( 'user1' ). so make sure your cursor is in between the two <td> tags on line 24 as below: 25 .

S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T again. It will occupy lines 24 to 30 as shown below: 26 . so it should look like this: Click the Ok button and the table is created. this time we need a table 100% wide. with one row And now hit the table icon and three columns.

popular and latest news. we will use user3.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T Now we need to add the tags for the three items to be included in this table. They go on lines 26. 27 and 28. that is. To do this we just use the ‘user’ tag but we increment the numbers up to make them unique. So. user4 and user5 as follows: 27 . login box.

Line 33 is for the pathway.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T As you can see above the three Joomla tags are now in place. 28 . These are unique tags rather than using the ‘user’ tag.php in the duffer1 folder on your PC. We now need to upload it. 36 for the main body tag. 36. we will be working on lines 33. So. it needs to be placed into the templates/duffer1/ folder on your Joomla web site. main body and footer tags are different to the others. so save the file! Remember it should be saved as index. Here’s what they look like once added: That’s all of the tags in place. Let’s upload it now using FTP. adjust the module positions in Joomla administrator and take a look. notice the pathway. 39 for our optional tag and 42 for the footer tag. 39 and 42. Now we are getting the hang of this lets add all of the other Joomla tags.

it looks like this When you do this you will see a page like the one below: 29 . let’s do the top menu first. check the box next to top menu and then click the ‘edit’ graphic in the top right row of buttons.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T Done that? Great. We need to browse to ‘modules > site modules’ and we should see a list like this: We need to change module positions. let’s login to Joomla administrator and adjust the module positions.

30 . Once you’ve made those changes let’s visit the site and take a look. What we should have is something that doesn’t look too pretty. Now you need to do this with each of the following: • • • • Search – user 2 Login form – user 3 and also select ‘All’ from the right hand menu items/links Popular – user 4 and also select ‘All’ from the right hand menu items/links Latest news – user 5 and also select ‘All’ from the right hand menu items/links Let’s leave user 6.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T From the drop down list next to the word ‘position’ select ‘user 1’ and then click save from the top right row of buttons. and looks something like this: Now we need to make some adjustments before we move onto the theme and get this looking good. The other task that needs to be carried out before we take a look is to make sure no other modules are in positions we are using. but don’t worry yet. the optional entry we made empty for now.

27 and 28 this will ensure the top of the three modules in this table all align. In the next section we will start to add our own colour scheme and make the site look a bit more pleasing.php file and move onto the theme. we will need to come back to it so leave it open in PHP Designer 2006. if we save and upload the index.S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T The first thing you will notice is the popular and latest news are not aligning at the top of the table they are in. 31 .php file and take a look at the site it now looks like this: For now we will leave the index. so let’s make an adjustment to solve that. As you can see from the graphic above we have added this: valign=”top” Into the td tag on lines 26.

S T E P T H R E E : C R E A T E O U R F I R S T L A Y O U T 32 .

css and is found in the css folder that is in the duffer1 folder on your PC. If you have difficulty choosing a colour scheme I would suggest visiting this site: Colour Scheme generator http://wellstyled. The Site Name The first thing we need to look at is the site name. Even though we are not using any graphics we still need a colour scheme. before we dive into the style sheet let’s choose a colour scheme. We won’t be using all of them. So. Firstly search engines like header text. because for some of the changes we make we also need to make some small additions to this file. So. But there are other considerations. We need to decide what colour links. borders.html For this project I am going to use a monochrome blue theme with a flash of orange. Let’s be honest it’s ridiculously small at present. Here is the range of colours we will be using. that is text set with H1 or H2 tags and chances are that this text will be used by search engines 33 .S T E P F O U R : A D J U S T T H E S T Y L E S H E E T Chapter 6: Step Four – Adjust The Style Sheet Here’s where the fun really starts. you can however choose your own colours to suit your site.php open. as blue seems to be the most popular colour for our template downloads. If you are looking at this in black and white you will need to use the colour codes after each block to get the actual colours.com/tools/colorscheme2/index-en. this is called template_css. You should also still have index. backgrounds etc are going to be. The majority we won’t be using. The first step for this section is to open the style sheet file. just those appropriate for our needs. Open it using PHP Designer 2006 and if you scroll to the bottom of the file you should see there is around 634 lines in this file. but we will be adding some new styles to the file and editing others. let’s get on with it. Now we can start making this template look good.

What we are going to do is create a style for H1 tags. you’ll see the site name is now a bit bigger. So.php file and take a look. save and upload the new index. So. This means the site name will be formatted as heading one text. you should be looking at around line 634 and the last thing you should see in this file is this: span. Scroll right to the bottom of the file. Secondly we want to frame the menu below the site name. which looks like this: So that it looks like this: As you can see we have put <h1> before the Joomla tag and </h1> after it. if we didn’t do this the whole page would turn into H1. It would also be good to have some space between the top of the page and the site name. back to index. But. height: 1. this tag closes the H1 formatting. rather than just have it hanging there.article_seperator { display: block.php and change line 13. So. } So we know what we’ve added. Back to PHP Designer 2006 and template_css. We don’t want it squashed against the roof of the page. we are going to add a comment like this: /*we will add our extra tags under here */ 34 .css.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T because it’s first on your page. The great thing is we can do all of this with the style sheet. before we do that we need to wrap the site name tag with H1 tags. To achieve the rest of our desired look we need to add some new code to the style sheet. but we still need to do some more work.5em. in other words ‘big’.

So if later on I ask you to comment something out this is what you need to do. This is what we are going to add: h1{ font-size: 17px. this will hard refresh the page causing your browser to re-read the CSS file. cut and paste it into template_css. your page should now look like this: • • • • • 35 . margin-bottom: 0. It’s called commenting out. Browse to your web site and hold down Ctrl and while holding it down hit F5.css then save the file and upload the new template_css. You will notice this sentence starts with /* and ends with */ this tells the browser to ignore what’s in between.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T So add that just below the very last curly bracket }. font-weight: bold. } Let’s go through each line just so we have some idea of what and why we are adding it. We are going to add our code below this. padding-bottom: 3px. font-size: obviously this sets the size of the font font-weight: sets the font to bold margin-top: this sets a 20 pixel margin outside the font area margin-bottom: this sets a zero margin outside the font area at the bottom border-bottom: this puts a 7 pixel deep border along the bottom of the area and sets the colour of the border • padding-bottom: this sets a distance between the text and the border So. border-bottom: 7px solid #0055B3.css to: /templates/duffer1/css/ This will overwrite the existing file. margin-top: 20px.

S T E P F O U R : A D J U S T T H E S T Y L E S H E E T It’s starting to take shape. We need to change the background colour when we hover over a menu item and the text colour of the links.php file and upload it to the duffer1 folder. feel free to make changes.php. The Top Menu The top menu is the horizontal menu right under the site name. Because we have two columns in this table browsers will naturally place items aligned vertically in the middle. it’s only showing in FireFox browsers. Finally we want to add a bottom margin to give us some white space between the menu and the next items. There’s a couple of things we want to do here. a nice gap between it and the top of the page and the border makes a good frame for the menu below it.php in PHP Designer 2006. you can change the border colour and thickness. Firstly there is a 2 pixel gap between the border/background of each menu item and the bottom border or the site name. we want our menu to be aligned at the top. Let’s get started! Again we need to open template_css. If you are using Internet Explorer you won’t be seeing this small gap. the site name looks better. So. We want these to touch to make it look like the hover is dropping out of that border. We must take two steps. Go to line 18 and add this in the <td> tag: valign="top" It should now look like this: Save the index. padding.css and index. on the page. lets make a small addition to the <td> tag for this column. below it. font size to whatever you want.css and we need to find line 328. first lets deal with index. margin sizes. take a look below to locate it: 36 . The first thing we need to do is get rid of that white space between the menu and the bottom of the site name border. flush with the bottom border of the site name. Next we are going to look at the top menu. that is at /templates/duffer1/ The next step is to edit template_css.

it should look like this once you have done it.css. this will help frame it and the items below it on the page.css file. where we have the Joomla tag for the top menu. If you want to make further changes to this menu these four blocks: • • • • ul#mainlevel-nav ul#mainlevel-nav li ul#mainlevel-nav li a ul#mainlevel-nav li a:hover Control the look of the top menu.php and template_css. so scroll to line 96 in template_css. So it looks like this: 37 . So. so you can make changes here to the font size. the one that refers to line height.css and it looks like this: Change the code for the background colour to # 0055B3 so it now looks like this: Now scroll to line 78 and change the border-right colour to #0055B3 so it looks like this: Save the file and upload it to check the changes are correct. The final adjustment to this menu is to create some white space below it.php first. to do this use the /* at the beginning of the line and */ at the end of the line. Go to line 18. font type and colours.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T What we need to do is ‘comment out’ line 328. let’s do index. To do this we need to edit both index. If you want to check and make sure that has worked save and upload the template_css. Now we need to change the colour when you hover over a link and the border line between each menu item. what we will do is wrap the tag with a <div> tag.

php and template_css.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T As you can see we have put this before the Joomla PHP tag: <div class="duftopmenu"> And this after the Joomla PHP tag: </div> What this does is tells the browser to apply that style class to anything in-between those tags. We are going to add this: . we are going to add our new class after the H1 style we added earlier. Go to your web site and do a hard refresh (Ctrl F5) and take a look. Save both the index.css file should look like this. Remember the index.php file goes in the duffer1 folder and the template_css. As you can see it’s starting to take shape.css and go right to the bottom of the file. 38 . so back to template_css.duftopmenu { margin-bottom: 50px.css files and upload them to the duffer1 folder on your web site. Next we need to take a look at the search box. } This will set a 50 pixel margin at the bottom of the menu and now the bottom of your template_css.css file goes in duffer1/css folder. So now we need to set this class within the template style sheet.

Let’s get started. What we want to do is move it up to the top. valign="top" It should look like this when you’ve done that: save the index.css open in PHP Designer 2006. The bottom of your template_css. once again we need index. 2 pixel gap at the top. First task is to get it aligned at the top.php and template_css.search{ float: right.php file and upload it to your web site. here we need to add this: . align it flush to the right of the page and change the border colour to match our colour scheme. } This will move the search box to the right and add a small. margin-top: 2px.css and go to the bottom of the file.php line 19 and we add the align top command to the <td> tag. Next we edit template_css. about 2 pixels below the site name border.css file should now look like this: Save the file and upload it to /templates/duffer1/css/ 39 . into the duffer1 folder.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T The Search Box Our next task is to get the search box in position and looking right. so we edit index. Hopefully by now you are getting the hang of editing and uploading the files.

The background image behind the titles needs to go and we need to format them so they fit our clean style.css at line 465. Next we need to tackle the three columns that hold the login box. we are going to comment out the ‘background’ style. You will also notice that the login form input boxes have also changed colour and are now blue to match the search box. at present it uses a background image to give it a silver background. Latest News We need to make some major changes to the style for these areas. remove the left padding. To do this we need to edit template_css. Now if you browse to your site the box should be aligned and in your colours. The section now looks like this: 40 . Login Box. So let’s start with the header row for each of the columns.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T Now we need to change the colour of the border used for the input box so that it matches our colour scheme. To do this we need to go to line 402 and let’s change the colour to #0055B3 so it looks like this: Save the file and upload. change the text colour to #0055B3. We are going to remove this and instead have a single one pixel border at the bottom of each header. change the font size to 14 pixels and finally add our bottom border. Popular. popular links and latest news links.

S T E P

F O U R :

A D J U S T

T H E

S T Y L E

S H E E T

If we don’t want the words upper case we comment out the ‘text-transform’ line, if you don’t want them bold comment out the ‘font-weight’ line, it’s pretty simple really. Next we need to get rid of the red hyperlinks and change their colour. To do this we need to scroll to line 336, now here you can make them any colour you want, I’m going to use our blue #0055B3. We also need to change the colour when we hover over the link, so let’s set this to the orange from our list of colours #FF8000, plus we’ll add an underline to the hover state. So this class now looks like this:

Next we need to address the image used for the bullets and the fact the lists are very close to the top of the columns. For this we need to scroll to line 300 and adjust it so it looks like this:

As you can see we have added margin-top: 10px; to line 301 in the ‘ul’ class and commented out lines 309 to 313 in the ‘li’ class. We have also changed line 303 to list-styletype ‘square’ (type needed adding to handle Internet Explorer) for the bullet type. We also
41

S T E P

F O U R :

A D J U S T

T H E

S T Y L E

S H E E T

added ‘list-style-position’ so that the bullets line up with the left edge of the title. Save the file and upload, now go and take a look. As you can see we still have the login box to deal with, especially the login button itself. So, let’s get to line 386 in the template_css.css file. This sets the attributes for the button and we’ll change it to look like this:

First we commented out lines 397 to 404, using /* and */ then changed the ‘color’ style to #0055B3 and we added these five rows to create a button with a white background and a solid blue 1 pixel border: border-top: 1px solid #0055B3; border-right: 1px solid #0055B3; border-left: 1px solid #0055B3; border-bottom: 1px solid #0055B3; background: #fff; We have also changed the margin to 2 pixels, this is so Internet Explorer (yuk) doesn’t push the button right up to the previous item. This gives us a button that looks like this: The final thing we need to do is add some white space below it. To do this we need to wrap the Joomla PHP tag with another <div> tag and create a new style at the bottom of our style sheet. So find line 26 in index.php and it will look like this:
42

S T E P

F O U R :

A D J U S T

T H E

S T Y L E

S H E E T

<td valign="top"><?php mosLoadModules ( 'user3' ); ?></td> We need to change it to look like this:

As you can see we have added this before the tag: <div class="duflogin"> And this after the tag: </div> Now go to template_css.css and scroll to the very bottom and add this: .duflogin { margin-bottom: 20px; } It should look like this:

Now save both files and upload them to your website, browse to your web page and do a hard refresh (Ctrl F5). Next we’ll take a look at the pathway. The Pathway The pathway is a breadcrumb menu that tracks a users position relative to the home page. We need to make a few changes to get this to fit into our design. First we need to edit index.php and set a <div> tag around the Joomla pathway tag.
43

But let’s get started with page titles.css and upload them to your website.css and make some changes to the style that is already there for the pathway.php and template_css. We are almost finished.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T To do this go to line 33 and change it from: <td><?php mosPathWay(). save index. Next we added lines 44 and 45 to change the font size and colour. We are going to make sure we cover all the items on internal pages such as FAQ lists and dynamic section and category areas. We find this starting on line 35 and we need to change it to look like this: As you can see we have changed line 42 so that it reads ‘border-bottom’ instead of just ‘border’ and we have changed the colour to our blue. That’s the pathway complete. The Main Body Area This is the area that contains all of your site contents. ?></div></td> You can see we have added <div id="pathway_text"> before the Joomla tag and </div> after it. We are going to go through the main area styles all in one go. 44 . ?></td> To this: <td><div id="pathway_text"><?php mosPathWay(). next we need to look at the main body area. Now we can go to template_css. at present they are still in the original red and that doesn’t fit with the colour of our site.

if you browse to the news section of your site you’ll see it still uses the grey background graphic.css again and navigate to line 434 and change it so it looks like this: We have changed line 437 so the colour code is now orange #FF8000. You’ll find this on line 417. You’ll find this at line 265.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T We need to dive into template_css. we will change it as follows: As you can see we have commented out the background item. change it to the following: 45 . Next we need to adjust the ‘back’ button that appears on each section page. Next we want to change the component heading.

If you browse through your site you will now see that everything is now styled in your colours. change as follows: Now you can save the file and upload it to your web site.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T You can see we’ve made some major changes to this button. Next we need to edit the page navigation for news items and other dynamic content. This is under the pagenav class found on line 280 and we need to change it to this: Next we change the table of contents heading that appears with multiple page articles. we find this on line 543. We change it as follows: We also need to change the border colour that surrounds these mini table of contents to #0055B3. this is on line 554 and called table.contenttoc. you’ve created a really 46 .

The first step is to login to your Joomla administrator section and navigate to ‘modules > site modules’ then select ‘user menu’ and click edit. So. Bits and Pieces One thing that we haven’t covered yet is the user menu. something like this: 47 . clean design. So let’s start with the important stuff. You need to set ‘show title’ to no and position to ‘user3’ – this puts it in the same box as our login form. We haven’t put it anywhere on our design and if we have a login box we also need the user menu. but it’s only visible when a user is logged in. If you go to your web sites front page and login using the login form (use your admin username and password) you will see it looks pretty ugly. But much more than that you’ve learned a hell of a lot about Joomla templates. it should look like this: If the user menu is above the login form hit the little blue arrow to knock it below it. with no graphics. This is because we want the menu to appear below the users name and logout button when they are logged in. And it doesn’t stop here. There’s one more thing we must cover and another couple of things that would be useful to know. When you are done it should look like this: Click save and on the resulting page make sure that the menu is positioned below the login form.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T simple. let’s look at that next.

then we comment out lines 577. 578 and 579.css and find line 567 and change it so it looks like this: As you can see we have commented out lines 568. We have then changed the link colours so that they are blue and turn orange on hover. To do this we need to go back to template_css. 569 and 570.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T We need to fix this otherwise our users are not going to have a good experience. 48 . finally we comment out line 584.

Upload the template_css. Login to your Joomla administrator and navigate to modules > site modules. PDF and print images that come with the standard template.css file and check out your site. FTP into your web site and go to templates > duffer1 graphics.png • pdf_button. complete this so it looks like this: 49 . What I’ve found is that if you just delete them they are replaced with some nice in fact. The reason I added this was twofold. So. This is really easy and all done from the administrator section. Once there you will see the graphic navigation buttons at the top right. the optional section.png It’s best to also delete these from the duffer1 folder on your PC as well. Before we move on to the next chapter we still have one section to deal with. as this is important for the next chapter. When you do this you will be presented with a form to complete. but also to run through how we can create a custom module that contains our own text. From here select the ‘new’ button (shown on the right). to give us a place on the page to place an extra item. let’s create a custom module first. Firstly.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T The final result will now look like this to a logged in user: The change we have just made will also affect the main menu and other menu. The Optional Section If you remember back to our layout we put an ‘optional’ tag at the bottom of the page just above the footer. Finally let’s get rid of those email.png • printButton. these > images once in this folder you need to delete these three images: • emailButton. So.

Now click save and browse to your web site. As you can see it’s not formatted very well. We are going to do this the same we have for other areas on the index page by adding <div> tags around the Joomla tag in the index.php and change line 39 so it looks like this: As you can see we have added this before the Joomla tag: <div class="dufoptional"> And this after it: </div> 50 . positioned it in the ‘user6’ slot and set it to published.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T So. Now scroll down to the big text area at the bottom of the form and enter some text. Scroll to the bottom of the page and you should see our new module in position just above the footer. we have called it ‘optional area’ set ‘show title’ to no. So open up index. Enter anything you want but try to add a couple of sentences for now. so we need to add a style to it.php file. like this.

border: 1px solid #0055B3.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T Our next task is to create the style in template_css. All we need to do now is package it. We will add this at the very bottom of the file. which gives you great flexibility in what you display in this area. margin-top: 20px. Believe it or not that’s it. padding: 3px.css file should now look like this: And the bottom of your web page should look like this: As you can see we have added a blue border. 51 . To do this you need to adjust the settings of each module and select which menu links you want your new module to show up on.dufoptional { margin-bottom: 20px. background: #fff. some white space above and below and some padding inside the bordered area. You can create modules for every page. What we want to do is create an area for this text that highlights it and separates it from the text above and footer below. Your template is complete.css. Add this: . } The bottom of your template_css.

w3.S T E P F O U R : A D J U S T T H E S T Y L E S H E E T W3C Validation One thing we need to do is just make sure the template is W3C valid. 52 . by going to http://validator. When we do this we see the page is valid W3C XHTML Transitional. we need to change this to lower case and re-validate the page.org we can enter the full URL of our site and see if it validates. What you will see is this error: PHP Designer 2006 has spelt ‘center’ with capital letters.

png</filename> <filename>images/powered_by.xml file should now look like this: 53 .png</filename> <filename>images/subhead_bg.png</filename> <filename>images/contenthead. If we package the template then others will be able to install it directly from their Joomla administrator. You have created your first Joomla template and now you know where everything it will be much easier to create another one.png</filename> Your templateDetails.png</filename> <filename>images/button_bg.S T E P F I V E : P A C K A G E T H E T E M P L A T E Chapter 7: Step Five – Package The template In basic terms that’s everything done. However. You will need WIN ZIP or a similar application to create the zip package.png</filename> <filename>images/header_short.jpg</filename> <filename>images/menu_bg. open this file in PHP Designer 2006 and remove the following lines: <filename>images/arrow. to finish this off and allow you to pass your template onto other people you need to learn how to package it.xml file. So.png</filename> <filename>images/spacer. Before we move onto that we need to make some adjustments to the templateDetails. Because that still holds information about image files that we are not using anymore.png</filename> <filename>images/title_back.

I’m going to use WIN ZIP to walk you through the process which is very easy. It should look like this.png. index.html.png. template_thumbnail.xml. indent4. You can see the css and images folder and in the main duffer1 folder you have 4 files.png. Finally move up and then down into the images folder. indent3. editor_content.png. indent2.png. Navigate to your duffer1 folder. indent1.S T E P F I V E : P A C K A G E T H E T E M P L A T E Save templateDetails. it should contain. index.html.xml Now navigate into the css folder and you should see the following files.css.png. Next we need a screenshot of our template. rating_star. it should look like this: 54 .png and spacer.css.png. advertisement.php. Save the file and open windows explorer. Take a screenshot of the page and save it so as to overwrite the current template_thumbnail. Open WIN ZIP and you should see this: Click next and select ‘create new zip file’. index.html and template_css. to replace the one called template_thunmbnail.png and templateDetails. If you have all of these files you are ready to start packaging the template for Joomla.png in the duffer1 folder on your PC. rating_star_blank.png. index.

S T E P F I V E : P A C K A G E T H E T E M P L A T E Click next and you will see a screen asking for a filename. like this: Click next and you will see a screen asking you to add files to this zip package. Once we have found it click ‘ok’ and you should now see this screen: 55 . type duffer1 into the box. We click the button that says ‘add folders’ and we browse to the duffer1 folder on our PC.

Now you can 56 . once done click ‘upload and install’ and it will be installed and they will see this: That’s it. You have reached the end of this duffer’s guide to creating a Joomla template. found out about Joomla tags to hold content. That’s it.zip file on their PC. we have just created a Joomla template package others can install. you’ve made a template. give that zip file to any Joomla user who doesn’t already have the duffer1 template installed and it will self install. found your way around the Joomla css file and finally seen how easy it is to package it for distribution. usually ‘My Documents’.S T E P F I V E : P A C K A G E T H E T E M P L A T E Now click ‘Zip Now’ and a zip file will be created in your default WIN ZIP folder. Best thing is it’s just really simple. To install all they need do is go to their Joomla administrator and navigate to ‘site > template manager > site templates’ Click ‘new’ and they will see this screen: Click the browse button and they will be able to locate the duffer1.

Here’s what our final template looks like: 57 . Later in this book we will look at editing this template to create a two column and a three column template in about 15 minutes.S T E P F I V E : P A C K A G E T H E T E M P L A T E start making your own Joomla templates. We will also look at some advanced Joomla template techniques and how we can add some graphics to our template.

S T E P F I V E : P A C K A G E T H E T E M P L A T E 58 .

And creating the next one is even easier. It will probably end up named something like ‘copy of duffer1’. because we’ve already done most of the hard work. Now duffer2 is your sites default template. so open windows explorer and make a copy of the whole folder. it should Now click the create table button look like this in PHP Designer 2006: 59 . so we need to rename it ‘duffer2’. ?></td> What we need to do is remove the Joomla tag for the main body.T W O A N D T H R E E C O L U M N T E M P L A T E Chapter 8: Two Column and Three Column Template We’ve seen just how easy it is to create a Joomla template. open the index.xml file in the ‘duffer2’ folder and change line 3 (name) to this: <name>duffer2</name> Save it and then upload the whole duffer2 folder to the templates folder on your website. First let’s copy the duffer1 folder. First let’s remove the Joomla tag: <td></td> and create a two column. It looks the same as duffer1 at present but that’s going to change. Now go to your Joomla administrator and navigate to ‘site > templates > site templates’ here you will see ‘duffer2’ under the duffer1 template we’ve just created. Select the radio button next to ‘duffer2’ and click ‘default’. Let’s do a really simple change first. Scroll down to line 36 and you should see this: <td><?php mosMainBody().php file in the duffer2 folder using PHP Designer 2006. create a two column single row table and place the Joomla main body tag in the right column and the Joomla left tag in the left column. Once this is done open the templateDetails. single row table.

?> <?php mosMainBody(). Now we need to make a few changes to the table to ensure it looks okay. They look like this: <?php mosLoadModules ( 'left' ). ?> You need to place them in this newly created table as follows: <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td><?php mosLoadModules ( 'left' ). with the original <td> tags highlighted for you so you can see where the table should be: <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td></td> <td></td> </tr> </table> </td> Now we need to add the two Joomla tags.T W O A N D T H R E E C O L U M N T E M P L A T E It should look something like this. The first thing is to ensure our left module gets aligned at the top of the table cell. ?></td> </tr> </table> </td> I’ve highlighted them so you can see exactly where they go. ?></td> <td><?php mosMainBody(). to do this we add this valign="top" Plus we need to set the width of the left column and to do this we add this: width="200px" So now the table looks like this: 60 . one for the left module position and one for the main body text.

just in case we have short amounts of text in here.T W O A N D T H R E E C O L U M N T E M P L A T E <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="200px" valign="top"> <?php mosLoadModules ( 'left' ). ?></td> </tr> </table> </td> I’ve highlighted these changes in pink so you can see where they go. ?></td> </tr> </table> </td> I’ve highlighted this green so you can see it. Finally we need to wrap the left module tag with a <div> class so we can add some formatting to it. ?> </div> </td> <td valign="top"><?php mosMainBody(). So your index. Now open the template_css.php file should be looking something like this: Save the index.css file in the duffer2/css folder. this will look like this: <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="200px" valign="top"> <div class="dufleft"> <?php mosLoadModules ( 'left' ). ?></td> <td valign="top"><?php mosMainBody(). Scroll to the very bottom and add this: 61 .php file and upload it to the duffer2 folder on your web site. Notice I have also add the valign to the main body column too.

hard refresh the page (Ctrl F5) and take a look.dufleft { margin-right: 40px. it should now look like this: 62 . Now browse to your web site. } It should look like this now: Save the file and upload it to the css folder in the duffer2 folder on your website.T W O A N D T H R E E C O L U M N T E M P L A T E .

php from the duffer3 folder and get to line 36 again. ?></td> </tr> </table></td> This time we also need to wrap both the left and right Joomla tags with a <div> class and make sure we set the width and top align on all three columns.xml and change the name tag to duffer3. Now we have three columns to fill with Joomla tags. ?></td> We delete the Joomla tag to leave just the <td> tags. Remember it looks like this: <td><?php mosMainBody(). like this: <td></td> And instead of putting a two column table in between the <td> and </td> tag we put a 3 column table. The html for line 36 in index. ?></td> <td><?php mosLoadModules ( 'right' ).T W O A N D T H R E E C O L U M N T E M P L A T E Now you can place modules in the ‘left’ position and they will show up on your web site in that left column. What we’ll do now is create a 3 column template. To do this we simply copy the duffer1 folder again but this time rename the copy as ‘duffer3’. 63 . we need to add these three: <td><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td><?php mosLoadModules ( 'left' ). We need to open templateDetails.php now looks like this: <td><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td></td> <td></td> <td></td> </tr> </table></td> I’ve highlighted the original <td> tags that we didn’t delete. Then we open index. ?></td> <td><?php mosMainBody().

To accommodate this we also need to adjust the overall width of the main table. this is on line 11 and looks like this: <table align="center" width="700" cellpadding="0" cellspacing="0"> We need to change it to this: <table align="center" width="850" cellpadding="0" cellspacing="0"> Making it 150 pixels wider. } .php file back into the duffer3 folder and open the template_css. Now save the index.dufleft { margin-right: 40px. 64 . Save all of the files and upload the whole duffer3 folder to the templates directory on your web site.css file in the duffer3. We need to add the following to the bottom of this file: .T W O A N D T H R E E C O L U M N T E M P L A T E That’s what the final html should look like. Now browse to your site and take a look.dufright { margin-left: 40px. Notice we have set both the left and right column to 200 pixels wide. css folder. } This will make sure the 3 columns are not touching each other. Go to your Joomla administrator and navigate to sites > templates > site templates and set duffer3 as default.

I hope this has given you some skills that can help inspire you to try making your own templates. just remember you can’t break anything so mess around. If you want your site to stretch the whole width of the page set the main table width to 100% instead of 850px. as it would be great to see thousands of people all making their site unique. you now have a three column template. To get used to working with the templates start practicing.T W O A N D T H R E E C O L U M N T E M P L A T E That’s it. 65 . In the next section we are going to look at some advanced techniques including adding some graphics to your page. Make a few of your own. Keep trying different things as just about anything is possible. Use the <div> tag to surround Joomla tags and add basic formatting like margins and colours. see what works for you and what doesn’t.

T W O A N D T H R E E C O L U M N T E M P L A T E 66 .

The first thing we will do is add a background image similar to the one we use on http://combtail. The graphic is in our download section in the images folder and called duf_back1. First the use of graphics when creating a template and then some of the style tags we can add to the Joomla tags to add some extra formatting.css and change the line to this: background: #fff url(. To add this we upload it to the images folder found in the duffer1 folder on your web site. That section now looks like this: Save the file and upload to the css folder in the duffer1 folder on your web site.. Browse to your site and do a hard refresh (Ctrl F5) and it should look like this: 67 . Then we need to edit line 343 of the duffer1 template_css.A D V A N C E D T E C H N I Q U E S Chapter 9: Advanced Techniques I want to cover some of the more advanced techniques you can use when developing Joomla templates. Set your site so it’s using duffer1 as the default template.jpg) repeat-x. There are some basic ways you can change the look of the templates we have just created by adding some images.com it’s a 50 x 50 pixel square gradient graphic repeated along the top of the page. We’ll use that for this example. Firstly let’s look at adding a couple of different background images and see what affect this has on the overall design./images/duf_back1.jpg and looks like the picture here on the right.

So.css file and take a look at your web site. background-position : center top. but we may need to make other adjustments depending on what we change it to.css and find line 658 ‘margin-top’ to 50px.css: background: #0055B3 url(. Upload the saved template_css. Now we can play around with the background image. you will see the site name has moved down. Plus we have changed the background colour to #0055B3 so it matches the blue on the edge of our image. First let’s upload another images.css: background: #fff url(. it should look like this: 68 . it looks like this: Save and upload and take another look at the site.jpg to the images folder of duffer1 and make this change to line 343 of template_css.. As you can see we have changed the image name and changed the ‘x’ to a ‘y’ this will repeat the image down the left hand side of the page and will look like this: Next let’s use an image to frame the content on the left and right.jpg) repeat-y. As you can see we have changed the image name and added a line that center’s the image on the page.jpg and make this change to template_css. once again we edit template_css../images/duf_back4.jpg) repeat-y. called duf_back3./images/duf_back3.A D V A N C E D T E C H N I Q U E S To tidy up the site name position we may want to increase the margin size to the top of the page. for this upload duf_back4.

Simple changes to your background can be made and can have a great overall effect on your web page.?>/templates/duffer1/images/duf_back5.jpg So. we can get Joomla to dynamically find all of the path. as follows: 69 . Use the images supplied as templates to make your own background colours. This would mean the above tag wouldn’t find the image. So if you want to add a logo to your template or a header graphic you would normally use an image tag like this: <img src="/templates/duffer1/images/duf_back5.jpg" width="309" height="63" alt="logo" /> What we’ve done is added this to the front of the path to the image: <?php echo $mosConfig_live_site. so we can use a tag like this: <img src="<?php echo $mosConfig_live_site.A D V A N C E D T E C H N I Q U E S As you can see the content is now framed right and left with our blue background.?> This grabs the URL of the site from the Joomla config file and so will always find our image. We can improve this further by dynamically grabbing the template name as well.jpg" height="63" alt="logo" /> width="309" The problem with doing this is that you won’t know whether the user of the template is going to install Joomla in the root of their web site. They may install it in a folder within the root.jpg The actual position may be: /joomla/templates/duffer1/images/duf_back5. Adding a Logo One of the things you will need to consider if you are packaging templates for other people is image location. because it’s looking for it in: /templates/duffer1/images/duf_back5.

?>/images/duf_back5. It should look like this: If you package up the template now it wouldn’t matter where on a persons site they had Joomla installed the template would still know exactly where it had to find the logo image.jpg" width="309" height="63" alt="logo" /></h1></td> We removed the Joomla site name tag and put our image tag in between the two <h1> tags.php: <td><h1><img src="<?php echo $mosConfig_live_site. Normally you would add a tag that looks like this: 70 .A D V A N C E D T E C H N I Q U E S <img src="<?php echo $mosConfig_live_site.?>/templates/<?php echo "$GLOBALS[cur_template]".jpg image with their own logo as long as they give exactly the same name and make it the same size. let’s test it out. ?> Using these Joomla tags in image paths can save a lot of trouble trying to determine exactly where an image is.?>/templates/<?php echo "$GLOBALS[cur_template]". The file should now look like this: Save the index file and upload it to the duffer1 folder and browse to your site. Complex Joomla Tags Joomla does allow for a certain amount of formatting by adding certain switches to each Joomla tag you add to your template. ?>/images/duf_back5. upload the duf_back5.jpg to the duffer1 images folder and make this change to line 13 of the duffer1 index. So. And users can replace the duf_back5.jpg" width="309" height="63" alt="logo" /> What we have done is replaced ‘duffer1’ in the image path with this Joomla tag: <?php echo "$GLOBALS[cur_template]".

A D V A N C E D T E C H N I Q U E S <?php mosLoadModules ( 'user2' ). we can add a switch to the tag like this: <?php mosLoadModules ( 'user2'. They will look like this: • 1 (one) Modules will be displayed horizontally. Again no real explanation but it uses <div> tags again. • 0 (zero) This is the default display. so no formatting will be applied to them • -2 (minus two) Joomla call this X-Joomla format. • -3 (minus three) Joomla help (http://help. ?> As you can see we have added a comma and 0 (zero) after the user2 tag. For us duffers we’ll stick to what we know and format using the basic tag and CSS. However. ?> This then adds Joomla modules that are positioned in the user2 area. Here’s a quick run through of the various switches you can use and what affect they will have on your content.1. like this: • -1 (minus one) Modules are displayed as raw output. 0 ).org/content/view/33/125/ ) states that “Modules are displayed in a format that allows.joomla. I hope you have enjoyed it and found it useful. Good luck and happy templating! 71 . You should now know your way around the Joomla template system and be capable of putting together your own simple templates. stretchable rounded corners. That brings us to the end of this tutorial. Check out the appendices at the end of this book for important information on Joomla tags and for all of the code used in the creation of this book. so modules put in this position will be stacked in a column.2.5. for example. I can’t find any description of what exactly this means but the output uses <div> tags instead of a table for the formatting. one on top of the other. This option was introduced in Mambo 4.

that is 725 pixels wide. Create a folder on your PC called ‘clubtvk’ and then download the contents of the /templates/rhuk_solarflare_ii/ folder from your Joomla web site into this folder on your PC. we are going to use a centered table. The code looks like this: <tr> <td> <div class="clubtvktop"> <img src="<?php echo $mosConfig_live_site.T H E C L U B T V K T E M P L A T E Chapter 10: The ClubTVK Template Let’s pull together everything we have learned and create one last unique template. page 9. move into the templates folder and upload the clubtvk folder and all of it’s contents to your web site.?>/templates/<?php echo "$GLOBALS[cur_template]". Step 3 Layout The layout is very simple. We’ll use the same 5 steps as we did for all the previous templates. We have also used the advanced technique in the image path to dynamically get the site URL and template name. The site name will be H1 and the description H2 – it will look like this: 72 . with one column and 7 rows. Step 1 Grab The Raw Material Again we are going to start with the rhuk_solarflare_ii template as our raw material. Let’s go through each row: In the top row we are going to put a spacer image and create a div to give us a top border in our chosen colour.xml file in your new ‘clubtvk’ folder. Once you have done this FTP to your web site. Step 2 Make a Home for the Template Open PHP Designer 2006 and edit the templateDetails. However we will condense the tutorial to cover all the major sections. Change the name and all of the details we learned about earlier in chapter 4. We are going to create the actual template used on the ClubTVK web site. The spacer image is a standard part of the raw material we started with in step one. Now log into your Joomla administrator and set the clubtvk template as default. ?>/images/spacer.png" width="1" height="1" alt="" /> </div> </td> </tr> As you can see we have wrapped the image path with a div class (highlighted yellow) so we can format the colour and size of this section in the style sheet. In the second row we are going to hard code our site name and our description.

we will add styles for these later in the style sheet. Here is the HTML for that row: <tr> <td> <div class="clubtvktext"> <?php mosLoadModules ( 'user1'. Row 4 is where we are going to put the Joomla top menu. to turn off the Joomla formatting.A Beginners Guide</h2> </td> </tr> As you can see highlighted in yellow the two H1 tags and the two H2 tags. Confused? It will become clear. This means our div class can have a unique effect just on this part.</h1><br /> <h2>Make a Joomla Template in 5 Easy Steps . Here’s the HTML: 73 . Most important is we have used the Joomla advanced styling switch (.T H E C L U B T V K T E M P L A T E <tr> <td> <h1>Clubtvk . Row 3 is going to hold a custom module. you will need to create a module in Joomla and set it to the user1 position. So. remember we covered how to create a module in an earlier chapter. -1 ). also make sure no other modules are using this position. Here we need to insert another table because this row will hold the main body tag in a left column and the left tag in a right column. highlighted yellow. ?> </td> </tr> We don’t need to use a div class style for this because the changes will be made to the top menu style that already exists in the style sheet. Also notice the BR tag (highlighted green) this ensures the site description we have put in goes onto a new line. Row 5 is a bit more complex than the previous rows. 1) highlighted green. The HTML looks like this: <tr> <td> <?php mosLoadModules ( 'user2' ). ?> </div> </td> </tr> As you can see we have wrapped the Joomla tag with a div tag so we can style it.

The HTML looks like this: <tr> <td> <div class="clubtvkoptional"> <?php mosLoadModules ( 'user3'. We have set the two <td> tags of this new table to vertically align to the top and set the width of the right column to 125 pixels. As you can see we have put the main body tag in the left of the two columns and the Joomla left tag in the right hand column. We have also wrapped each Joomla tag with a div class so we can style these sections in the style sheet. Added just in case we want to add some unique module at the bottom of each page. ?> </div> </td> </tr> </table> </td> </tr> Highlighted green is the original table row tags. this is the column where our main menu and login form will go. We used the Joomla left tag because this is the position that the modules we want in this column naturally appear in a standard Joomla install. Row 7 is our final row and contains our footer tag: 74 . ?> </div> </td> <td valign="top" width="125"> <div class="clubtvkmenu"> <?php mosLoadModules ( 'left' ). It saves us moving them to somewhere else. 100% wide table in between the original <td> tags of that row. ?> </div> </td> </tr> As you can see we have wrapped the Joomla tag with a div class so we can style it and we have also added the -1 switch to the Joomla tag to remove any pre-set formatting Joomla tries to add. 2 column. -1 ). Row 6 is an optional row again. what we have done is place a single row.T H E C L U B T V K T E M P L A T E <tr> <td> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top"> <div class="clubtvkmbody"> <?php mosMainBody().

-1 ).php').A Beginners Guide</h2></td> </tr> <tr> <td><div class="clubtvktext"><?php mosLoadModules ( 'user1'.?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1." ). ?></div></td> </tr> <tr> <td><?php include_once('includes/footer. -1 ).php'). ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_cs s. ?></div></td> </tr> <tr> <td><div class="clubtvktop_menu"><?php mosLoadModules ( 'user2' ).org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(). ?>/images/spacer. ?> </head> <body> <table align="center" width="725" cellpadding="0" cellspacing="0"> <tr> <td><div class="clubtvktop"><img src="<?php echo $mosConfig_live_site. charset=iso-8859-1" /> <?php mosShowHead().w3.css\" type=\"text/css\"/>" .png" width="1" height="1" alt="" /></div></td> </tr> <tr> <td><h1>Clubtvk .T H E C L U B T V K T E M P L A T E <tr> <td> <?php include_once('includes/footer. ?></td> </tr> </table> </body> </html> 75 .</h1><br /><h2>Make a Joomla Template in 5 Easy Steps . So.dtd"> <html xmlns="http://www. let’s have a look at the complete HTML for this layout: <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed. ?></div></td> </tr> </table></td> </tr> <tr> <td><div class="clubtvkoptional"><?php mosLoadModules ( 'user3'. ?> </td> </tr> Nothing fancy here just the Joomla footer tag. ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" . } ?> <meta http-equiv="Content-Type" content="text/html.0 Transitional//EN" "http://www. ?></div></td> </tr> <tr> <td><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><div class="clubtvkmbody"><?php mosMainBody().w3.?>/templates/<?php echo "$GLOBALS[cur_template]". ?></div></td> <td valign="top" width="125"><div class="clubtvkmenu"><?php mosLoadModules ( 'left' ).org/TR/xhtml1/DTD/xhtml1-transitional.

color: #663300. } We have set the colour for the border and made it 10 pixels deep. margin-bottom: 20.T H E C L U B T V K T E M P L A T E That’s how easy it is to create a unique layout. color: #cc9999.php. } 76 . this is where we stripped away the Joomla formatting using the -1 switch in index. Step 4 The Style Sheet Let’s run through this the same way we did for the layout. padding-bottom: 3px.clubtvktext { font-size: 18px. font-weight: bold. the style sheet. margin-top: 0px. . Here is the first of them. The first thing we need is some additions to the style sheet to cover the new style classes we have used in index. padding-bottom: 1px. padding-bottom: 10px. we set the font size. margin-bottom: 0. it sets the style for the top border we added to the page (the place where the spacer image is). color: #996600. padding-left: 40px. They are all added to the bottom of template_css. Next we need to save this file and upload it to the templates/clubtvk folder on our website. colour and weight. padding-bottom: 3px. line-height: 100%.css in the clubtvk/css folder. } h2{ font-size: 22px.php. Next we set the style for the H1 and H2 tags that surround our site name and description h1{ font-size: 32px. The next tag we add to the file is for the text in the custom module. . margin-top: 70px. margin-top: 20px. } These two styles are pretty self explanatory. then we add a margin to give us the desired gap between the text and top/bottom.clubtvktop { background: #CC9933. margin-bottom: 0. Once done we can move onto step 4.

line-height: 100%. we will start at the top of the file and work down. padding-left: 0px. Next we add the style for the main body content. /*border-right: 1px solid #cccccc. The first section we come to that needs changes is the part that controls the ‘top menu’ it’s controlled by the section called mainlevel-nav and will be around line 70 in template_css. All straight forward stuff.T H E C L U B T V K T E M P L A T E Nothing too scary in that tag. it looks like this: . padding-right: 0px.clubtvkoptional { font-size: 18px. float: left. So. white-space: nowrap. font-size: 16px. line-height: 21px. . Let’s move onto the other changes needed in template_css. } We’ve put a 10 pixel padding to move the content away from the border and we have added a left border that is dashed. padding-bottom: 20px. we are just setting the font size and colour as well as the margins and padding for the area. margin-top: 20px. } The only difference is we have removed the left padding to make this text align with the left hand side of the page.clubtvkmenu { padding-left: 10px. } All we have done with this tag is make it pad the main body content away from the border we added in the previous style. margin-bottom: 20. 77 . color: #cc9999. The final style we add here at the bottom is for the optional box. The next style is for the menu on the right of the page. margin: 0. These are all modifications to styles that already exist within the file. basically it’s the same as the previous custom module style and looks like this: . padding-left: 0px.css.*/ } As you can see the border is commented out and font size increased.clubtvkmbody { padding-right: 10px. You need it as follows: ul#mainlevel-nav li { background-image: none. border-left: 1px dashed #cccc99.css.

border-left: 1px solid #cc9933. border-bottom: 1px solid #cc9933. border-right: 1px solid #cc9933. text-align: center.*/ } a:hover { color: #cccc99.*/ } As you can see bold has been commented out and the link colours changed. font-weight: bold. padding-left: 3px. /*font-weight: bold. } The padding and colours have been changed. background: #f4f4f4.T H E C L U B T V K T E M P L A T E Staying with this section let’s go through the rest of the changes: ul#mainlevel-nav li a { display: block. a:visited { color: #cc9933. } ul#mainlevel-nav li a:hover { color: #a7a7a7. margin: 2px. } As you can see some major changes to the button style. background: #fff. border-top: 1px solid #cc9933. background: transparent. Next we will look at the Joomla core stuff. /*font-weight: bold. sans-serif. Right below this you will find the inputbox style and this needs changing to this: 78 . Next we go to line 396 and find the button style. change to this: . font-size: 11px. text-decoration: none.button { color: #cc9933. That should take care of the top menu section. Hevlvetica. } #buttons>ul#mainlevel-nav li a { width: auto. padding-right: 3px. text-decoration: none. font-family: Arial. text-decoration: none. color: #a7a7a7. at around line 334 you will find this section: /* Joomla core stuff */ a:link.

contentheading { height: 30px. text-transform: uppercase.. font-weight: bold. font-size: 10px. height: 21px.contentpagetitle { font-size: 16px. at around line 471 you will find this section. /*font-weight: bold. text-align: left. text-transform: uppercase. /*font-weight: bold. text-align:left. white-space: nowrap. div. line-height: 21px.componentheading { /*background: url(. } Next we move onto the main menu section at around line 557. change it to this: .moduletable th.png) repeat-x. } . change as follows: table. padding-top: 0px.*/ color: #ccc.png) repeat-x. border:solid 1px #cc9933./images/subhead_bg.*/ font-size: 16px. background-color: #ffffff.inputbox { padding: 2px.. border-bottom: 2px solid #ccc.*/ color: #996600. padding-top: 4px.moduletable h3 { /*background: url(. } Directly below the inputbox style is the heading style for components. change these as follows: . height: 21px. text-align: left.T H E C L U B T V K T E M P L A T E . change it so it looks like this: 79 . } A few lines below the above you find contentheading and contentpagetitle. padding-left: 0px. color: #996600. } Just below this./images/subhead_bg.*/ color: #ccc. font-weight: bold. margin: 0 0 2px 0. font-size: 10px. padding-left: 0px.

} a. That’s it..mainlevel:hover { /*background-position: 0px -25px. } Quite a few changes in the above section so work through them carefully. the style sheet is now finished. /*font-weight: bold.*/ color: #cc9933. } a. a.*/ text-decoration: none. Save the files and upload them to your template folder ‘clubtvk’ and you should have a template and site that looks like this: 80 . padding-left: 0px.mainlevel#active_menu:hover { color: #cccc99.mainlevel:visited { /*display: block.*/ text-decoration: none. text-align: left. background: url(. color: #cccc99.png) no-repeat. height: 25px. /*font-weight: bold. /*height: 20px !important.mainlevel#active_menu { color:#cc9933.T H E C L U B T V K T E M P L A T E a.mainlevel:link./images/menu_bg. width: 100%. padding-top: 5px.*/ } a. vertical-align: middle.*/ font-size: 11px.

81 .T H E C L U B T V K T E M P L A T E Step 5 Package The Template All that’s left is to package up the template and you are finished. I look forward to seeing your templates when you’ve done them. The End That’s how easy it is to create a Joomla template in 5 easy steps without any graphic design or programming knowledge. drop me an email and I will showcase any templates you make on our site. The more you do it the easier it will become.

acquired by Defender Technologies October 2004) • Founder and CEO of AccountLab (founded Feb 2005.A B O U T G A R Y R E I D Chapter 10: About Gary Reid Gary Reid is 4 time Internet entrepreneur and author of The Web Driven Entrepreneur .utiny.strategic web design and consulting Founder and current CEO of m. with PowerVPS in just six months. acquired by Netenberg April 2005) Current Projects: Founder and current CEO of The Venture Kit Founder and current CEO of Combtail . Gary Launched The Venture Kit on the 16th of Jan 2006 82 . you can view Gary's blog here Former Projects: • Founder and CEO of Blue Box Internet (founded March 2000.com blog host provider Gary drove both PowerVPS and AccountLab to top of their respective markets. acquired by RL October 2003) • Founder and CEO of PowerVPS (founded Feb 2004.

A B O U T G A R Y R E I D 83 .

php file: <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed. ). ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon. ). ?> Joomla Site Name Tag <?php echo $mosConfig_sitename.css\" type=\"text/css\"/>" .?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.php'). ). ?> Joomla Main Body Tag <?php mosMainBody().ico\" />" .?> 84 . ?> Joomla Tags <?php <?php <?php <?php <?php <?php <?php <?php <?php mosLoadModules mosLoadModules mosLoadModules mosLoadModules mosLoadModules mosLoadModules mosLoadModules mosLoadModules mosLoadModules ( ( ( ( ( ( ( ( ( 'user1' 'user2' 'user3' 'user4' 'user5' 'user6' 'user7' 'user8' 'user9' ).dtd"> <html xmlns="http://www. ).org/TR/xhtml1/DTD/xhtml1-transitional.0 Transitional//EN" "http://www. ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_cs s. } ?> <meta http-equiv="Content-Type" content="text/html." ).A P P E N D I X 1 J O O M L A T A G S Appendix 1: Joomla Tags Below are all the tags that can be used to include Joomla content in your template: Joomla Head Tag This must be used at the top of your Joomla template index. ). ). charset=iso-8859-1" /> <?php mosShowHead().org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(). ?> ?> ?> ?> ?> ?> ?> ?> ?> Joomla Pathway Tag <?php mosPathWay(). ).w3. ). ?> Joomla Site Path Tag <?php echo $mosConfig_live_site.w3. ?> </head> <body> Joomla Footer Tag Include this tag to display the Joomla footer: <?php include_once('includes/footer.

A P P E N D I X 1 J O O M L A T A G S Joomla Template Path Tag <?php echo "$GLOBALS[cur_template]". 'user2'. ?> -3 ). 'user2'. 'user2'. ?> -2 ). 0 ). ?> Joomla Tags with Switches <?php <?php <?php <?php <?php mosLoadModules mosLoadModules mosLoadModules mosLoadModules mosLoadModules ( ( ( ( ( 'user2'. 'user2'. ?> -1 ). ?> 85 . ?> 1 ).

?></h1></td> </tr> <tr> <td><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><div class="duftopmenu"><?php mosLoadModules ( 'user1' ).A P P E N D I X 2 D U F F E R 1 H T M L Appendix 2: Duffer1 HTML Below is the HTML used for the duffer 1 template: <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed.php').w3.0 Transitional//EN" "http://www. ?></td> </tr> </table> </body> </html> 86 . charset=iso-8859-1" /> <?php mosShowHead(). ?></td> <td valign="top"><?php mosLoadModules ( 'user5' ). ?></div></td> </tr> <tr> <td><?php include_once('includes/footer.css\" type=\"text/css\"/>" . ?></td> </tr> <tr> <td><div class="dufoptional"><?php mosLoadModules ( 'user6' ). ?></div></td> </tr> <tr> <td><?php mosMainBody().org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor().w3. ?></td> </tr> </table></td> </tr> <tr> <td><div id="pathway_text"><?php mosPathWay(). ?></td> </tr> </table></td> </tr> <tr> <td><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><div class="duflogin"><?php mosLoadModules ( 'user3' ).dtd"> <html xmlns="http://www. ?></div></td> <td valign="top"><?php mosLoadModules ( 'user2' ). ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css. ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon. ?> </head> <body> <table align="center" width="700" cellpadding="0" cellspacing="0"> <tr> <td><h1><?php echo $mosConfig_sitename.ico\" />" .org/TR/xhtml1/DTD/xhtml1-transitional.?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ?></div></td> <td valign="top"><?php mosLoadModules ( 'user4' )." ). } ?> <meta http-equiv="Content-Type" content="text/html.

com </description> <files> <filename>index.0"> <name>duffer1</name> <creationDate>03/15/06</creationDate> <author>Gary Reid</author> <copyright>GNU/GPL</copyright> <authorEmail>gary@combtail.php</filename> <filename>template_thumbnail. X M L Appendix 3: Duffer1 templateDetails.png</filename> <filename>images/indent4.A P P E N D I X 3 D U F F E R 1 T E M P L A T E D E A T I L S .xml Below is the contents of the completed templateDetails.css</filename> </css> </mosinstall> 87 .com</authorEmail> <authorUrl>http://combtail.png</filename> </images> <css> <filename>css/template_css.0.com at http://www.com</authorUrl> <version>1.rockettheme.0</version> <description>A template created from the duffer's tutorial. the template uses a developed version of the CSS file from the rhuk_solarflare_ii template developed by rhuk@rockettheme.png</filename> <filename>images/indent1.0" encoding="iso-8859-1"?> <mosinstall type="template" version="1.png</filename> <filename>images/indent3.png</filename> </files> <images> <filename>images/advertisement.png</filename> <filename>images/indent2.xml file: <?xml version="1.

Use of this e-book signifies your acceptance of the license below.com When you purchase the book you are automatically granted access to the private areas of this site. These resources are only available to legitimate purchasers of this book and are available at http://clubtvk.A P P E N D I X 4 A D D I T I O N A L R E S O U R C E S Appendix 4: Additional Resources To help in your use of this book we have put together some additional resources. 88 . Including downloads of all of the templates and files used in the book and a forum where you can discuss Joomla Templates.

modify. a non-exclusive. 3. Risk. You shall not: (1) rent. print. assign. or in any way exploit any of the e-book's content. add to. sell. 89 . 5. the services of a competent professional should be sought. create derivative works from. delete. or warrant that the e-book will meet your requirements or that the operation of the e-book will be uninterrupted or error-free. publish. implied warranties of merchantability and fitness for a particular purpose. Use. and Gary Reid owns the copyright and the e-book itself. Liability. without limitation. Gary Reid agrees to grant. resell. incidental and consequential damages and damages for lost data or profits arising out of the use or inability to use the e-book. remove. The e-book is provided "as is" without warranty of any kind. without limitation. including. and you may not aid or permit others to do so. you may not copy. (3) remove any proprietary notices. or other professional service. Gary Reid does not guarantee that the information in this e-book is error-free. You may print the e-book for your personal use. or marks from the e-book. accounting. 7. Printing.A P P E N D I X 5 L I C E N S E A G R E E M E N T Appendix 5: E-Book License Agreement This e-book contains copyrighted material. You may download or install the e-book onto your computer. A license to use the e-book is sold with the understanding that the publisher is not engaged in rendering legal. If the e-book was purchased in the United States. All content in the e-book is copyrighted under the UK Copyright laws. The entire liability of Gary Reid shall be limited to the amount actually paid by you for the e-book license. Installing Onto Your Computer. Other than as stated in this License Agreement. labels. If legal advice or other expert assistance is required. augment. which essentially says that you mustn't give away or sell copies of the e-book you just purchased. Purchaser will be liable for any damage resulting from any violation of this License Agreement. Professional Services. in whole or in part. 4. distribute. Without Warranty. either express or implied or statutory. You may also have other rights that vary from state to state. the above exclusions may not apply to you as some states do not allow the exclusion of implied warranties. timeshare. In no event will Gary Reid be liable for any damages. including. (2) duplicate the e-book. You may not give printed pages from the e-book or the entire printed e-book to others. or make the e-book available for others to copy or download. 8. Your Agreement. You may not give copies of the e-book to others. 6. The entire risk as to the results and performance of the e-book is assumed by you. non-transferable license to install and use the e-book under the following terms and conditions: 1. or transfer all or part of the e-book or any rights granted by this license agreement to any other person. (4) transfer or sublicense title to the e-book to any other party. 2. Your use of the e-book constitutes your agreement to the above terms and conditions. and you (the person who has purchased or received the e-book) agree to accept. The unauthorized use or distribution of copyrighted or other proprietary content is illegal and could subject the purchaser to substantial money damages. and Resale Prohibitions. transmit. You may make reasonable back-up copies of the e-book to avoid losing it. Please read the License Agreement carefully. This e-book is designed to provide accurate and authoritative information in regard to the subject matter covered. Its use is subject to the following License Agreement. except for reasonable backup copies. Copyright. including any infringement of copyrights or proprietary rights.

png</filename> <filename>images/indent4.png</filename> <filename>images/indent3.0"> <name>clubtvk</name> <creationDate>03/20/06</creationDate> <author>Gary Reid</author> <copyright>Commercial see licence</copyright> <authorEmail>gary@combtail. X M L Appendix 6: ClubTVK templateDetails.A P P E N D I X 6 C L U B T V K T E M P L A T E D E T A I L S .xml <?xml version="1.0" encoding="iso-8859-1"?> <mosinstall type="template" version="1.0.css</filename> </css> </mosinstall> 90 .png</filename> <filename>images/button_bg.png</filename> <filename>images/spacer.png</filename> </files> <images> <filename>images/advertisement.png</filename> <filename>images/indent1.com</authorEmail> <authorUrl>http://clubtvk.0</version> <description>Clubtvk main site template</description> <files> <filename>index.php</filename> <filename>template_thumbnail.png</filename> <filename>images/arrow.png</filename> </images> <css> <filename>css/template_css.com</authorUrl> <version>1.png</filename> <filename>images/indent2.

dtd"> <html xmlns="http://www. P H P Appendix 7: ClubTVK index.org/1999/xhtml"> <head> <?php if ( $my->id ) { initEditor(). ?> </head> <body> <table align="center" width="725" cellpadding="0" cellspacing="0"> <tr> <td><div class="clubtvktop"><img src="<?php echo $mosConfig_live_site.ico\" />" .org/TR/xhtml1/DTD/xhtml1-transitional.php <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed.w3. ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.w3.php'). ?></td> </tr> </table> </body> </html> 91 . ?></div></td> <td valign="top" width="125"><div class="clubtvkmenu"><?php mosLoadModules ( 'left' ). ?></div></td> </tr> <tr> <td><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><div class="clubtvkmbody"><?php mosMainBody(). ?>/images/spacer. -1 ).?>/templates/<?php echo "$GLOBALS[cur_template]". ?></div></td> </tr> <tr> <td><?php include_once('includes/footer.</h1><br /><h2>Make a Joomla Template in 5 Easy Steps . -1 ). ?></div></td> </tr> </table></td> </tr> <tr> <td><div class="clubtvkoptional"><?php mosLoadModules ( 'user3'. ?></div></td> </tr> <tr> <td><div class="clubtvktop_menu"><?php mosLoadModules ( 'user2' ).css\" type=\"text/css\"/>" .A Beginners Guide</h2></td> </tr> <tr> <td><div class="clubtvktext"><?php mosLoadModules ( 'user1'.0 Transitional//EN" "http://www.A P P E N D I X 7 C L U B T V K I N D E X . ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css. } ?> <meta http-equiv="Content-Type" content="text/html.png" width="1" height="1" alt="" /></div></td> </tr> <tr> <td><h1>Clubtvk . charset=iso-8859-1" /> <?php mosShowHead().?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1." ).

Sign up to vote on this title
UsefulNot useful