[TUTORIAL-PROPOSAL] Convert to 1.5 template

For Joomla! 1.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
Locked
User avatar
mihu
Joomla! Guru
Joomla! Guru
Posts: 741
Joined: Mon Mar 20, 2006 8:17 am

[TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by mihu » Wed Jun 13, 2007 4:59 pm

Hi, Guys,

Those are tips to convert your Joomla 1.0 template to Joomla 1.5 template w/o turn on legacy mode.
Please report any issue/bug/error you found during conversion, so I can try my best to keep everything up to date.

I also attached a sample file contained the "rhuk_solarflare_ii" template came with Joomla 1.0 but in Joomla 1.5 version.
However, the attached converted template might distort if we got longer content title, which might not be conversion problem. 

I'll pay extra attention to 1.5 template part and also provide any update here.
Thanks Ian for his MVC tutorial, and here is my template conversion tutorial.  :pop

!!! PLEASE DO NOT distribute/use this content to any other place except Joomla Official Site!!!

PHP Part

* replace

Code: Select all

defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
with

Code: Select all

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


* remove $mosConfig_live_site and change to relative path
replace $mosConfig_live_site with $mainframe->getCfg( 'live_site' );
$mainframe->getCfg( 'live_site' ); is no longer available.
Reference: Link

* replace

Code: Select all

$GLOBALS['mosConfig_absolute_path']
with

Code: Select all

$mainframe->getCfg('absolute_path') 
OR You can use

Code: Select all

dirname(__FILE__)
to get the absolute path.

* add language specification to your header

Code: Select all

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

Code: Select all

mosShowHead();
with

Code: Select all

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

Code: Select all

$mainframe->getTemplate();
to get the current template name in order to tell the folder path

Code: Select all

<?php echo $this->template ?>
* remove

Code: Select all

if ( $my->id ) {
	initEditor();
}
"When the system renders the head of your template it will decide if the editor needs to be included or not."

Reference: Templates in Joomla! 1.5 - Part 1
http://www.joomla.org/component/option, ... ,33/p,210/

* remove since the code will be add within header function already.

Code: Select all

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
* [optional] Add this line of code if you are using mootools within your template, such as "drop down panel"

Code: Select all

// Load the mootools framework
<?php JHTML::_('behavior.mootools'); ?>
* [doubt] Add system default css

Code: Select all

<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
* Add the following css to display tooltips's background

Code: Select all

/* Tooltips */
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
}
.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}
.tool-text {
	font-size: 100%;
	margin: 0;
}
* [optional] Add this line of code to display system message, such as "Item successfully saved." after you done w/ edit at front-end.

Code: Select all

<jdoc:include type="message" />
* replace

Code: Select all

mosCountModules('xxx')
with

Code: Select all

$this->countModules('xxx')
* replace

Code: Select all

mosLoadModules('xxx', #);
with

Code: Select all

<jdoc:include type="modules" name="xxx" style="" />
# number should switch to according text value from the following list and put into style quote.
0 = table (default)
1 = horz
-1 = raw
-2 = xhtml
-3 = rounded

Reference: http://help.joomla.org/content/view/1565/155/

* replace

Code: Select all

mosMainbody();
with

Code: Select all

<jdoc:include type="component" />
* replace

Code: Select all

$id = mosGetParam( $_REQUEST, 'xxx', ooo );
with

Code: Select all

$id = JRequest::getVar( 'xxx', ooo );
xxx is the name of variable you are request, and ooo is the default value you'll assign when you can't find the value.

getCmd:
Fetches and returns a given filtered variable. The cmd filter only allows the characters [A-Za-z0-9.-_]. This is currently only a proxy function for getVar().

getInT, getFloat, ... etc.

Reference: http://api.joomla.org/Joomla-Framework/ ... quest.html

* replace

Code: Select all

mosPathway();
with

Code: Select all

<jdoc:include type="module" name="breadcrumbs" />
* to get the base path

Code: Select all

<?php echo JURI::base(); ?>


CSS Part

* Joomla 1.5 appended the suffix "_menu" to the class for menu module, so you need change your css too.
For example, Joomla 1.0 use "moduletable", you need to add "moduletable_menu" with the same css properties to your css.

* Rename template_css.css to template.css and change the path in index.php and other files that applied.
"We also changed the naming of the master css file to template.css instead of template_css.css"

* media="print" css
You need to add the css include into the component.php file.

Reference: http://forum.joomla.org/index.php/topic ... #msg961807



XML Part

* replace

Code: Select all

<?xml version="1.0" encoding="iso-8859-1"?>
with

Code: Select all

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

Code: Select all

<install type="template" version="#">
to 1.5.0

* replace

Code: Select all

mosinstall
with

Code: Select all

install
* add positions xml according to those positions you used at your template.

Code: Select all

<positions>
  <position>top</position>
  ...
  <position>user6</position>
</positions>
* add parameters according to your need



INI Part
If you are going to use Joomla 1.5 template new feature, changing template parameter at back-end, you need to create a "params.ini".



To config the parameters at back-end

You can remove those hard coded variable and specify those variables in the xml file and also created a ini file.

To retrieved those variables at index.php page.

Code: Select all

$this->params->get("name", "default");
I didn't update the attachment file, so it might be out of date!
You do not have the required permissions to view the files attached to this post.
Last edited by mihu on Thu Aug 23, 2007 5:06 pm, edited 1 time in total.
bento2go.com - We DO NOT sell bento !!

User avatar
mihu
Joomla! Guru
Joomla! Guru
Posts: 741
Joined: Mon Mar 20, 2006 8:17 am

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by mihu » Mon Aug 06, 2007 5:38 pm

I just updated this thread according to RC 1 change.
Please let me know if you find any bug.
:'( ... I need some encourage too.
bento2go.com - We DO NOT sell bento !!

User avatar
gsivorot
Joomla! Apprentice
Joomla! Apprentice
Posts: 24
Joined: Thu Aug 10, 2006 4:48 am
Location: Vancouver, BC, Canada

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by gsivorot » Tue Aug 07, 2007 4:37 pm

I guess I'll be the first to give you some encouragement  :D

This post is excellent and maybe it can be added to the Migrating to 1.5 section of the Wiki.  It's a quick and helpful reference when I have a momentary lapse on some of the name changes in 1.5.

User avatar
ianmac
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4784
Joined: Sat Sep 24, 2005 11:01 pm
Location: Toronto, Canada

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by ianmac » Tue Aug 07, 2007 5:28 pm

!!! PLEASE DO NOT distribute/use this content to any other place !!!
If given the go ahead, we will definitely post this on the wiki.

Ian

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by compass » Wed Aug 15, 2007 2:11 pm

Another big challenge for converting templates is the menus. 1.5 now has bulleted list submenus. The core output is:

Code: Select all

    <ul class="menu">
      <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>

      <li class="parent item2"><a href="#"><span>link1</span></a>
        <ul>
          <li class="item3"><a href="#"><span>Link 2</span></a></li>
        </ul>
      </li>
    </ul>
This was usually achieved with extended menu in 1.0, so significant rewrite of the CSS is needed on a case by case basis.
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

User avatar
55thinking
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 183
Joined: Mon Sep 05, 2005 8:58 am
Location: Madrid
Contact:

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by 55thinking » Wed Aug 15, 2007 2:49 pm

@menu: I guess you can still use the backwards parameters...but I agree, will be a tricky part
55 Thinking - Strategy Design Technology 
Good looking, Fast and Usable web solutions   
http://www.55thinking.com/

User avatar
tbianco
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 166
Joined: Thu Jul 05, 2007 12:27 am
Location: Tacoma, WA
Contact:

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by tbianco » Sun Aug 19, 2007 4:48 am

compass wrote:

Code: Select all

    <ul class="menu">
      <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>

      <li class="parent item2"><a href="#"><span>link1</span></a>
        <ul>
          <li class="item3"><a href="#"><span>Link 2</span></a></li>
        </ul>
      </li>
    </ul>
@compass = You know my menus are displaying a bit differently with the class output. How were you able to do get the item1, item2, and item3 to show up in the class items.

Code: Select all

<div class="moduletable_topmenu">
	<ul>
		<li>
			<a href="index.php/home"><span>home/</span></a>
		</li>
		<li>
			<a href="index.php/company"><span>company/</span></a>
		</li>
		<li id="current" class="active">
			<a href="index.php/services"><span>services/</span></a>
		</li>
		<li>
			<a href="index.php/jobs"><span>jobs/</span></a>
		</li>
	</ul>
</div>
marketing : branding : thinking
VeloceMedia.com

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by compass » Sun Aug 19, 2007 8:52 pm

The itemX seems to come from the item ID's....
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

User avatar
tbianco
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 166
Joined: Thu Jul 05, 2007 12:27 am
Location: Tacoma, WA
Contact:

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by tbianco » Mon Aug 20, 2007 2:00 am

First off.... If this is off topic then please move it to someplace better, I don't want to be a pest.

Anyways...

Have you guys seen SUM Agency's website? I'm sorta wanting to figure out a way to do something like they did at the top with their links. The only problem is I haven't figured out how to assign the ids.... @compass is it some type of admin or menu option that I"m missing. (sorry I'm new to Joomla).
marketing : branding : thinking
VeloceMedia.com

valminor
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Aug 09, 2007 2:48 am

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by valminor » Wed Aug 22, 2007 2:04 pm

Hello:

I am newbie in Joomla  :-[ and I don't understand this point:
* remove $mosConfig_live_site and change to relative path
replace $mosConfig_live_site with $mainframe->getCfg( 'live_site' );
$mainframe->getCfg( 'live_site' ); is no longer available.
Reference: Link
What you want to say with this.....Remove, replace or this funccion is no longer available?

Thanks a lot

User avatar
pvh123
Joomla! Ace
Joomla! Ace
Posts: 1156
Joined: Wed Oct 05, 2005 7:25 am
Location: Emmen

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by pvh123 » Thu Aug 23, 2007 8:15 am

What he want to say is that these quoted functions do not exist anymore and for you to use the link in the post after: "Reference" http://forum.joomla.org/index.php/topic,196321.0.html

The parameter "live_site" has been taken out of the configuration file where it used to be in Joomla 1.0.x
Note: Sending me private messages for personal support, without this been requested, would lead to ignoring any of your posts in future!

User avatar
pvh123
Joomla! Ace
Joomla! Ace
Posts: 1156
Joined: Wed Oct 05, 2005 7:25 am
Location: Emmen

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by pvh123 » Thu Aug 23, 2007 8:19 am

@mihu These are all the things I did converted my templates, but never wrote them down. Great stuff  :)
Note: Sending me private messages for personal support, without this been requested, would lead to ignoring any of your posts in future!

User avatar
mihu
Joomla! Guru
Joomla! Guru
Posts: 741
Joined: Mon Mar 20, 2006 8:17 am

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by mihu » Thu Aug 23, 2007 3:25 pm

ianmac wrote:
!!! PLEASE DO NOT distribute/use this content to any other place !!!
If given the go ahead, we will definitely post this on the wiki.
Ian
I forget to add one more statement.
Please don't post at other places except JOOMLA official site.  :pop
You are free to post/modify at wiki.

pvh123 wrote: @mihu These are all the things I did converted my templates, but never wrote them down. Great stuff  :)
You are more than welcome to help me complete this list.  :laugh:
Last edited by mihu on Thu Aug 23, 2007 3:32 pm, edited 1 time in total.
bento2go.com - We DO NOT sell bento !!

User avatar
mihu
Joomla! Guru
Joomla! Guru
Posts: 741
Joined: Mon Mar 20, 2006 8:17 am

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by mihu » Thu Aug 23, 2007 4:55 pm

remove ... accidentally create this post
Last edited by mihu on Thu Aug 23, 2007 5:08 pm, edited 1 time in total.
bento2go.com - We DO NOT sell bento !!

User avatar
55thinking
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 183
Joined: Mon Sep 05, 2005 8:58 am
Location: Madrid
Contact:

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by 55thinking » Fri Aug 24, 2007 7:18 am

// Load the mootools framework
I have a doubt about this one.

In RC1, by default,
 
 

are already loaded via , so we would have twice the same call to mootools.js

what do you think ?
55 Thinking - Strategy Design Technology 
Good looking, Fast and Usable web solutions   
http://www.55thinking.com/

User avatar
pvh123
Joomla! Ace
Joomla! Ace
Posts: 1156
Joined: Wed Oct 05, 2005 7:25 am
Location: Emmen

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by pvh123 » Fri Aug 24, 2007 8:09 am

55thinking wrote:  
 
What I have noticed in the template I am working with (Versatility III) is that when loading the index.php, a mootools script driven function called Control Panel was working. When I, however, selected "News Feeds" the two scriptlines (see quote) were not rendered in the output and therefore the Control Panel did not work and the browser showed loads of scripterrors.

By including this:
// Load the mootools framework

in the template, everything worked fine. So, somehow the mootools scripts get loaded all the time and no errors were generated.

May be that one of the devs can give a better explanation to this phenomenon :)
Note: Sending me private messages for personal support, without this been requested, would lead to ignoring any of your posts in future!

User avatar
konczal
Joomla! Explorer
Joomla! Explorer
Posts: 271
Joined: Mon Mar 13, 2006 9:35 pm
Location: New Jersey, US

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by konczal » Tue May 19, 2009 6:57 pm

I tried to follow these steps and would up with a blank template. Here are my questions/issues:

1. * remove $mosConfig_live_site and change to relative path
replace $mosConfig_live_site with $mainframe->getCfg( 'live_site' );
$mainframe->getCfg( 'live_site' ); is no longer available.

-I don't have any reference to $mosConfig_live_site or live_site in my index.php - is that a problem?

2. * replace
Code:
mosShowHead();

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

At that point, my template goes completely blank and remains that way through all the remaining steps.

3. $mainframe->getTemplate();

My index.php doesn't have that code - is that a showstopper?

4. * [doubt] Add system default css
Code:
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />

Does [doubt] mean "Doubtful?" If needed, where does this code go? I already have the template-specific code right before </head>:

<link href="templates/fas_default/css/template.css" rel="stylesheet" type="text/css"/>

5. * Add the following css to display tooltips's background
Code:
/* Tooltips */
...etc...

Where does this go - in index.php? If so, where? If not, where else? template.css?

6. * replace
Code:
mosMainbody();

with
Code:
<jdoc:include type="component" />

My template did not have mosMainbody(); - is that problematic?

7. * replace
Code:
$id = mosGetParam( $_REQUEST, 'xxx', ooo );

with
Code:
$id = JRequest::getVar( 'xxx', ooo );

My template did not have any mosGetParam referenced - is that a showstopper?

8. * replace
Code:
mosPathway();

with
Code:
<jdoc:include type="module" name="breadcrumbs" />

My template did not have mosPathway(); - is that a problem?

9. * Joomla 1.5 appended the suffix "_menu" to the class for menu module, so you need change your css too.
For example, Joomla 1.0 use "moduletable", you need to add "moduletable_menu" with the same css properties to your css.

I have a lot of styles with "moduletable" in the name... does every one need to have "_menu" added? (I am pretty sure not all of them are menus, for example search_home) How do I know which ones, and what other css menus to change?

TABLE.moduletable th
TABLE.moduletable td
TABLE.moduletable-main
TABLE.moduletable-main th
TABLE.moduletable-main td
TABLE.moduletable-search_home
TABLE.moduletable-search_home th
TABLE.moduletable-search_home td
TABLE.moduletable-random_image

10. * Rename template_css.css to template.css and change the path in index.php and other files that applied.
"We also changed the naming of the master css file to template.css instead of template_css.css"

What other files are likely to have references to template.css? (I know templateDetails.xml does).

11. * media="print" css
You need to add the css include into the component.php file.

I'm really unclear on what this means and how to accomplish it.

12. XML Part - this refers to templateDetails.xml, correct?

13. * add positions xml according to those positions you used at your template.
Code:
<positions>
<position>top</position>
...
<position>user6</position>
</positions>

I'm not terribly clear on this part or how to change it.

14. To config the parameters at back-end

You can remove those hard coded variable and specify those variables in the xml file and also created a ini file.

To retrieved those variables at index.php page.
Code:
$this->params->get("name", "default");

Does the above code go into params.ini or elsewhere?

Sorry for so many questions!

Regards, Eddie

glndsouza
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sat Jun 12, 2010 2:25 pm

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by glndsouza » Sat Jun 12, 2010 2:29 pm

can anyone here convert me this template i tried but dint work.
You do not have the required permissions to view the files attached to this post.

glndsouza
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sat Jun 12, 2010 2:25 pm

Re: [TUTORIAL-PROPOSAL] Convert to 1.5 template

Post by glndsouza » Mon Jun 28, 2010 4:17 pm

can anyone conver the above template please.


Locked

Return to “Joomla! 1.5 Coding”