These are by no means official or finalized, but these steps should help most people with simple Joomla templates. Fancy schmancy templates from some clubs will need more help.

Joomla template files are located in /templates/ but if you don't know that, you probably shouldn't be attempting this ;)

index.php

defined( '_JEXEC' ) or die( 'Restricted access' );

becomes

defined('_JEXEC') or die;

then we need to create a new variable special to 1.6 somewhere inside come <?php brackets

$app = JFactory::getApplication();

with this new variable defined, you'll need to change any occurence of $mainframe with $app

for instance you'd change

$mainframe->getCfg('live_site');

to

$app->getCfg('live_site');

or change

$mainframe->getCfg('sitename');

to

$app->getCfg('sitename');

If you grab variables like any of the string info in the url, you may need to remove them for now. We'll have more info on the new methods in Part 2. Here's an example that was throwing an error for us:

$pageOption = JRequest::getCmd('option', '');

Module Positions
If you're a template developer for a club, you may want to consider changing some of your modules positions. In the 1.6 sample data you won't have the standard modules in the positions you'd expect (like mod_search in user4). This is to encourage more semantic and logical module position names so you don't end up with a position named 'left' in an area that's not...left. Otherwise if you've made a custom template, you probably don't have to worry because you've made logical position names for that specific usage.

templateDetails.xml

Fist you'll need to add this new line

<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

right under this line (which remains the same)

<?xml version="1.0" encoding="utf-8"?>

next change

<install version="1.5" type="template">

to

<install version="1.6" type="template">

Next you'll need to convert your template parameters to the new method. For instance, you'll change something like:

<params>
 <param name="templateTheme" type="list" default="theme1" label="Template Theme" description="Choose your template theme">
 <option value="theme1">theme1</option>
 <option value="theme2">theme2</option>
 <option value="theme3">theme3</option>
 </param>
</params>

to

<config>
 <fields name="params">
 <fieldset name="advanced">
 <field name="templateTheme" type="list" default="theme1" label="Template Theme" description="Choose your template theme">
 <option value="theme1">theme1</option>
 <option value="theme2">theme2</option>
 <option value="theme3">theme3</option>
 </field>
 </fieldset>
 </fields>
</config>

The biggest change you'll notice is that you can now group template parameters into a <fieldset>, which is incredible useful for templates with lots of parameters.

CSS (template.css or theme css files)

.article_separator

is now

.item-separator

and

.blog_more

is now

.items-more

For the [Print, PDF, Email] button in an article, there use to be a <td class="buttonheading", there is now a <div class="actions" with a <ul> so you'll need to add something like:

.actions{
margin:0;
}
.actions li{
list-style: none;
display:inline;
float:right;
}

The Category Table view is now an Unordered List so you'll need to add something like

table.category{
border:1px solid #CCC;
width:100%;
text-align:center;
}
table.category th,table.category td{
padding:2px 6px;
}
table.category thead{
background:#EEE;
}
.jcat-children ul,.jcat-children li{
margin:0;
list-style:none;
}
.jcat-children li a{
background:url(../images/bullet_green_arrow.png) no-repeat 0 12px;
display:block;
padding:5px 5px 5px 15px;
font-size:0.9em;
}

Breaks have been removed from the Login Form module so now the labels are inline, but they don't quite lineup. If you'd like to put them back on their own line add:

#form-login #form-login-username label,
#form-login #form-login-password label{
display:block;
}

template_preview.png

Lastly, you can now add a 800x600 template_preview.png to the root of your template (don't forget to add that line in your templateDetails.xml though!

<filename>template_preview.png</filename>

TrackBack URI for this entry

Comments (1)

...
written by Soam, July 24, 2010

Good tutorial.
Just sent it to my Vietnam team, who handles my whole Joomla clients base projects.

• 
• +0
• 
• 

Name

Email

Comment

smaller | bigger

Add Comment