Those who have looked over a Joomla 1.5 review likely already realize that this is quite a well established script for the making of websites with plenty of capabilities. While you can use the community builder Joomla 1.5 to create a membership site, a lot of times all we want is our own template over the basic installation. For those expanding the program with a Joomla 1.5 phpbb3 combination then having your own template can help you make your site flow together visually in a far more appealing way.
The basics of theme creation of Joomla are far more about graphic design and CSS experience than any sort of Joomla specific knowledge. There are Joomla 1.5 YouTube tutorials, but that is a bit of overkill when the proces is not that complex. Whether you’re working in English or Joomla 1.5 Spanish translation, it all functions the same way. Let’s check it out:
First off, head to your Joomla installation directory on your server and find the ‘templates’ directory. Inside there, create a ‘themetutorial’ sub directory. We’ll be using this to test out your knowledge and store what you’ve made with this tutorial.
Next, you’ve got to create some files. I use Notepad2 for this as it highlights both html and php in different color coding for easy and does not do troublesome word-wrapping the way the original Notepad does. In your ‘themetutorial’ directory create files named templateDetails.xml and index.php, as well as a folder named css in which you will create the template.css file. You don’t need to worry what’s in these files yet, you simply need their names and to have them in the right locations.
The index.php is the primary component of your template that organizes the positions of your module and gives the path to your stylesheet (CSS) file, or template.css as we named it earlier. The templateDetails.xml file is what will inform the Joomla script of what it needs to know about your template.
Now that this part is done, login to Joomla as admin and switch to your newly created theme. Don’t worry about whether or not it works at the moment because we will fix that soon. Go back to your index.php file on your server and let’s put this bit of code at the top:
<!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; ?>” >
<head>
<jdoc:include type=”head” />
</head>
Then, the ‘body’ of index.php:
<body>
<jdoc:include type=”component” />
</body>
</html>
Save index.php and log out, then go to check your site after you have ensured that your ‘themetutorial’ template is the one currently used by the site. Since we’ve not changed much so far, you should see a painfully plain version of your site at this point which is functional, but incredibly basic. What you see now is what your site looks like with no stylings or mods, only articles.
Now, go back and open index.php again, placing this code between the <body> and </body> tags:
<div id=”container”>
<div id=”header”> <jdoc:include type=”modules” name=”top” /> </div>
<div id=”sidebar_left”> <jdoc:include type=”modules” name=”left” /> </div>
<div id=”content”> <jdoc:include type=”component” /></div>
<div id=”sidebar_right”class=”float”> <jdoc:include type=”modules” name=”right” /> </div>
<div id=”footer”> <jdoc:include type=”modules” name=”footer” /> </div>
</div>
This piece of code in our example above:
<jdoc:include type=”modules” name=”left” />
Is designed to tell Joomla to put the modules published in the left position. We’ve just put in left, right, header and footer (top and bottom) positions to your template. That “container” bit in the code we just inserted lets us set these basic dimensions for your template.
Of course, you will want to go far beyond this, but this is how you get started on making your own Joomla 1.5 theme. At this point, you will likely want to log back into Admin and set the ‘themetutorial’ theme back off until you are ready to do more work, but now you have a very solid understanding of way in which a Joomla theme is created.
Popularity: 4% [?]
_03.gif)
_03.gif)
