Convent css template to joomla template

thanhbinh777 0 Newbie Poster

17 Years Ago

From djoomla.com http://www.djoomla.com/component/option,com_ezine/Itemid,43/

Intro:
Well, I've seen alot of tutorials out there on how to program a Joomla Template with software like Dreamweaver and other big programs, this tutorial will focus on programming an entire Joomla Template with a program as simple as 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 focused on people who have worked with the web before and would be able to program an HTML page with CSS or Tables, this tutorial will teach you common practices in how to add Joomla to your current websites. And is focused on a beginner to Joomla but not a beginner to basic web programming

Ok to begin, let me run you through the basics of how a Joomla Template is setup. The driving force behind a Template is it's 'Positions', a position in Joomla is an area like your Main Content, Left Navigation, and Header for example, you can further break this down to areas like your Advertising areas, login module areas, etc.. It can also be more efficient to combine something like your header position with your top header, but that is beyond the scope of this tutorial.

Now that you have a fairly good idea on what positions are, let me draw out a simple mockup of where you would position the positions of a simple Joomla template
Top
Left <<< main>>>
footer

How to Program a Joomla Template

We are actually going to end up programming that exact template for Joomla, so there is a light at the end of the tunnel!

Begin with an HTML template
So to start off you need to program the template in HTML, I will go over this a little bit, but this tutorial is focused on people who already have HTML knowledge, that simple Template above would look something like below
Code:

<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 is Here</td></tr>
<tr>
<td valign="top" style="width: 200px; background: #e2e2e2;">SideNav is here</td><td style="width: 600px;">Main Content</td>
</tr>
</table>
</body>

</html>

Convert it to Joomla
So what that will create is a simple HTML template, if you save that as an HTML file you will see an 800 pixel wide website with a place for a header, sidenav, and Main Content, now we need to add in the unique Joomla Commands to make the Template actually work with Joomla, let's start with the Main Content area:
Code:

<tr>
<td valign="top" style="width: 200px; background: #e2e2e2;">SideNav is here</td><td style="width: 600px;">Main Content</td>
</tr>

In the main content area we are going to want to put in the main body for our website, the Joomla PHP include for this is <?php mosMainBody(); ?>, So now our template would look like this:
Code:

<tr>
<td valign="top" style="width: 200px; background: #e2e2e2;">SideNav is here</td><td style="width: 600px;"><?php mosMainBody(); ?></td>
</tr>

The Side Navigation
Now in the area where 'Main Content' would be the maincontent of your Joomla website would always be there. Now back to when I was talking about positions the maincontent is a position but it is a special position, the rest of your positions will be loaded with the mosLoadModules() function. e.g. <?php mosLoadModules('left'); ?> So anywhere that code is placed in our template, Modules published to the 'left' position would display. You can publish as many modules to any position as you want, you can also make as many positions as you want, Joomla automatically comes with alot of default positions like 'banners', 'pathway', 'user1', and more, in our side nav we are going to want the main menu and a way for users to login, so in the side nave area, we are going to put the 'left' and 'user1' positions, like below.
Code:

That would load the 'left' and 'user1' positions into our sidenavigation, if you are interested try some of Joomla's other default positions to see what they do, to find the other positions in Joomla go to Site > Template Manager > Module Positions You can also create your own positions there.

What does the left and user1 positions do by default? Well left will load the Main Menu, and Top Menu, the user1 position loads a login module that people can register and login to your website, in Joomla you can password protect some of your pages so that only registered users can view it.

Now the only thing we have left to program is the header, what we'll put there is a pathway/breadcrumb area, e.g. It lists what page your on and a way to navigate back, kind of like a boardwalk. The position for an area like that is 'pathway' so in order to load that in our top area, we'd go to the area in our HTML code that has the 'Header is Here' text and replace it with: <?php mosLoadModules('pathway'); ?>, So now your code should look like below:
Code:

Now you are basically done, only thing left is to add in the header information. Joomla has some default code that should be placed at the top of every Joomla template, it is listed below:
Code:

Replace

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Document</title>
</head>

- with -

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!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">
<head>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

Now your entire template should look like below:

index.php

</html>

Now save this document as index.php, I saved it to 'C:/Joomla/Template1/index.php' for simplisties sake.

The Joomla XML File

1 Contributor
0 Replies
108 Views

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.