Joomla 1.5 » Mbrsolution Blog

The following are some of the most common errors you might come accross. This list will grow more so keep coming back.

I updated or created a new article, when I view it on my browser it has not changed. Some common solutions is to clear the cache on your broswer and the cache in the back-end of joomla Site >> Maintenance >> Global check in, Clear Cache and Purge Expired Cache. Have a look at the following image. Clear option 1, 2 and 3. Most of the time just clearing the cache in option 2 is more than enough.

Running Joomla locally using xampp. Here is a great article that will help you and guide to troubleshoot some common errors that occur using xampp. Have a look at the following link setting up your work station for joomla development.
Infinite loop detected in jerror joomla 1.7, there are few reasons this could occur one of them being the tmp folder’s path is not set correctly and another could be the password is not type correctly in the configuration.php file. The following post tmp folder issue is in regards to the tmp folder’s path being typed incorrectly in the joomla forum and the following link password issue is in regards to the password issue in the configuration.php file.
How to move your local joomla to a server, I came across this tutorial and I felt it would be great to add it here. The author shows you how to move your joomla installed locally in your computer to a live server. Click on hte following link move joomla from local to an online server.
Joomla 2.5.2 corrupted the editor and does not allow you to format articles. The solution is to change the admin textfilter tab in Global configuration page from “standard blacklist” to “no filtering”. That solves the problem.

Revision 1.13

I have seen many tutorials on the internet on how to transform a html template into a Joomla 1.5 template. I have decided to add my own tutorial just for fun and hoping to help those who are new to Joomla and would like to use their old html templates. I also would like to thank all Joomla supporters out there who keep contributing free of charge information about Joomla.

This tutorial will focus on converting a html template into Joomla 1.5 template using kompoZer and pspad. You can use any number of editors like notepad. This tutorial assumes that you have basic HTML/CSS knowledge, enough to build a template that isn’t Joomla.

Who is this Tutorial For?

This tutorial is for people who have some html and css knowledge and have very little knowledge or no knowledge about Joomla 1.5. If you don’t have much html and css knowledge then I suggest that you do a few courses online and believe me there are thousands of tutorials on the internet that will help you. However you may continue even if you don’t know anything about css, html or Joomla as this is a very simple tutorial to follow. A good challenge is always good for the mind

Let’s begin;

We want to set up a tree structure as you see in the following image:

This shows a Joomla Template Layout You can see three folders, CSS which contains template.css and other style sheets including ie_hack.css files, Images which contain all your template images and js which contains some java script files if you decide to add some. Then you have your typical index.php, template_thumbnail.png and templateDetaisl.xml. All these folders and files are very important and all must be included in your templateDetails.xml file.

A Joomla 1.5 Template is setup using ‘Positions’, a position in Joomla is an area like your Main Content, Left Navigation, Right Navigation, Header, Footer, User1, User2 etc. Of course there is more to modules and scripts that can be added but we are just going to focus on the basic setup and conversion from plain html template to Joomla 1.5 template.

Remember all Joomla 1.5 templates contain an xml file like the one previously mentioned. If you don’t include the xml file no file will be uploaded to Joomla 1.5 backend and it will display an error as you upload your template. Remember any file you add to the zip folder must be included in the templateDetails.xml file with the correct path i.e. <filename>images/back_container.gif</filename> contains a file name back_container.gif inside images folder.

Hint: Always remember to include all files and path in the templateDetails.xml file as I mentioned above.

Now that you have a fairly good idea on what a position is in Joomla 1.5, let me show you how you would create the positions in a Joomla 1.5 template from a html template.

Click on the following image to view the layout. From this layout you will start to understand why each position has a unique name and why you add it to the position as shown in the image.

Positions that will be added:

user 4
search
user 3
breadcrumb
left
component

You can download a HTML template from www.oswd.org/. To view the template I used for this tutorial live click on blutemp. This template uses div tags and css to style the template.

Firsts lets have a look at plain html code shown below:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Page Document</title>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 800px;”>
<tr>
<td valign=”top” style=”width: 800px; background: #a1a1a1;” colspan=”2″>Header goes Here</td></tr>
<tr>
<td valign=”top” style=”width: 200px; background: #e2e2e2;”>Left nav goes here</td><td style=”width: 600px;”>Main content goes here</td>
</tr>
</table>
</body>
</html>

Or if you are using Div tags this is what it would look like:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Page Document</title>
</head>
<body>
<div id=”body”>
<div id=”header”>Header goes here</div>
<div id=”leftnav”>Left nav goes here</div>
<div id=contenthere”>Main content goes here</div>
</div>
</body>
</html>

I will be working with Div tags as they are the norm nowadays and most developers work with Div containers. Tables are still used but purely to develop tables not for developing main content webpages.

Looking at the code above lets add some Joomla modules.

We add php code to the very top of <html> tag to make sure the template is not called apart from Joomla and to set the proper language as:

<?php
// no direct access
defined( ‘_JEXEC’ ) or die ( ‘restricted access’ );
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Then we add the extra code within <html> tag, see below:

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language;?>”
lang=”<?php echo $this->language; ?>” >

Next, replace the title element and meta elements with the php code to generate them and we add it below the <head> tag:

Now we can add some css links:

Remember to replace “yourtemplate” above with the name of your template.

I have added 2 files to hack internet explorer, 1 iepngfix.htc and 1 ie_hacks.css.

<!–[if lte IE 6]>
<style type=”text/css”> img { behavior: url(‘/joomla1/templates/<?php echo $this->template ?>/css/iepngfix.htc’); }</style>
<link rel=”stylesheet” type=”text/css” href=”/joomla1/templates/<?php echo $this->template ?>/css/ie_hacks.css” media=”screen, projection” />
<![endif]–>

Here I added 1 md_stylechanger.js file to change the size and colour of the font when you add this template to Joomla 1.5.

With the <body> tag I did not add any modules and left it as you see below. Of course you can add what ever module you think that could be implemented here and remember that you might have to change the css style sheet and the xml file.

<!– Put the name of your site inside the following h1 element –>

<h1>Mbrsolution</h1>

<!– Start of meta navbar: place links which apply to the whole site here –>

I have added the javascript to increase and decrease the font. You don’t have to add this code if you don’t want. I chose to add it.

document.write('<a href="/joomla1/index.php" title="<?php echo JText::_('Increase size'); ?>" onclick="changeFontSize(2); return false;"><?php echo JText::_('A+'); ?></a><span> </span>');
document.write('<a href="/joomla1/index.php" title="<?php echo JText::_('Decrease size'); ?>" onclick="changeFontSize(-2); return false;"><?php echo JText::_('A-'); ?></a><span> </span>');
document.write('<a href="/joomla1/index.php" title="<?php echo JText::_('Revert styles to default'); ?>" onclick="revertStyles(); return false;"><?php echo JText::_('reset'); ?></a></p>');
//]]>
</script>
</div>
<jdoc:include type=”modules” name=”user4″ />
<jdoc:include type=”modules” name=”search” />
</div>
<!– End of meta navbar –>

As you can see from above I have also added two modules, “user4” and “search”, you can use any module that you like as long as the module name works for you i.e. search would be used to search within your site.

Now add the following modules as you see below:

<!– Start of top level navbar: put links to your major site sections here –>

<!– End of top level navbar –>

<!– Start of secondary navbar: put links to this section’s subsections here –>

<!– End of secondary navbar –>

<!– Start of side panel: place additional links and information here –>

<!– I have added a style xhtml. Very important or else you wont see the header displayed on all the left menu –>
<jdoc:include type=”modules” name=”left” style=”xhtml” />

</div>

<!– End of side panel –>

<!– Start of main content section –>

<div id=”content”><a name=”contentstart” id=”contentstart”></a>
<h1>Heading 1</h1>

<!– End of main content section –>

<!– Start of footer type info –>

<div id=”info-site”>
<p id=”info-company”><a href=”#”>copyright</a> | <a href=”#”>privacy</a> | <a href=”#”>home</a></p>
<p id=”info-standards”>
<a href=”http://validator.w3.org/check?uri=referer”><img
src=”http://www.w3.org/Icons/valid-xhtml10-blue”
alt=”Valid XHTML 1.0 Strict” height=”31″ width=”88″ /></a>
</p>
<p>
Copyright © 2010 Mbrsolution. All Rights Reserved.<br>
Converted html to Joomal 1.5 by Manuel Ballesta Ruiz
</p>
</div>

<!– End of footer type info –>

</div>
</body>
</html>

This concludes this tutorial. You can download the files from blutemplate. If you prefer to view it live as a joomla 1.5 template click on blutemplate and see the difference between the HTML version and the Joomla 1.5 version. There are some changes that I made to have it set up the way I wanted to, however you can change it to your content. All you have to do is manipulate the code and make sure you test it first on a few browsers. I tested this on IE 8 and Firefox and works well. If you need help or want to leave a comment please do so. I will be adding more information later on. Hope you learn something from this.

As you are aware Joomla 1.5.23 is coming to an end. You might want to follow my tutorial on converting a Joomla 1.5 template to version Joomla 1.7, click on the following link convert a site from joomla 1.5 to joomla 1.7. I am sure that you will find it interesting and remember if you have any questions just leave me a comment here Good luck

Mbrsolution Blog

Fix Joomla Common Errors

Convert html to Joomla 1.5 template Rev 1.13

Admin Tools For Joomla 1.5