Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates - Webmasters

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,718 members, 7,816,956 topics. Date: Friday, 03 May 2024 at 09:12 PM

Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates (4469 Views)

10 Best Free Blogger Templates For 2013 Download / Joomla,drupal Or Wordpress Which Do I Use!!! / Beginners Class For Joomla - Join Now! (2) (3) (4)

(1) (Reply) (Go Down)

Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:03pm On Mar 12, 2010

My first tutorial this year based on several requests of many nairalanders. So we are going to be looking at how to create
templates for websites. I will start from the old school table based templates, and upgrade to css based templates.
Followed by Joomla templates and drupal templates.
Please let me know if this interests anybody, or maybe i should forget about this thread.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by DualCore1: 8:04pm On Mar 12, 2010

If you no want make we shoot you, you better go on.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:09pm On Mar 12, 2010

There are 3 kinds of templates we are going to be talking about here:
1. Direct templates (table/css-based) that you can create from the scratch (similar to what dreamweaver creates for you)
2. How to convert that template you created into a drupal/joomla template
3. How to convert an existing website into drupal or joomla. For instance, you can do a site initially with drupal and decide
to convert it into joomla, or the other way round.

Now, by extension, to completely convert an existing website into drupal or joomla, you must be able to create joomla modules
or drupal modules/blocks.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:11pm On Mar 12, 2010

By the way, this tutorial is for intermediate users, which means that you must be able to design websites to an extent for
direct template creation. But if you want to create drupal or joomla, you must know how to use the frameworks already.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:12pm On Mar 12, 2010

If you are a newbie, please check out this thread first - https://www.nairaland.com/nigeria/topic-216485.0.html

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by c7(m): 8:24pm On Mar 12, 2010

Just start. I knws pple will like to learn

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by c7(m): 8:28pm On Mar 12, 2010

Oops! Network problem. Well just carry on

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 5:56am On Mar 13, 2010

Now some of you guys do not like to read stuff, but please read this, it may help - http://www.quirksmode.org/css/quirksmode.html
This is a very important key to creating proper templates. One if the reason for using stuffs like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And also why we sometimes have issues with templates in different browsers.

I am going to be talking about 3 kinds of popularly used templates:
- Two Columns
- Three Columns
- Fixed layouts
- Liquid Layouts
If you can build those set of templates, then you will have figured out plenty.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 12:31pm On Mar 14, 2010

Please take a look at template designs here. http://www.dynamicdrive.com/style/layouts/
I dont want to waste time with the basic templates. I think i will just jump to how to convert
those kinda templates into drupal / joomla.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:48pm On Mar 14, 2010

you are totally right the best is to avoid quirksmode because it's hard to centralize body in quirksmode, but shoot on with the tutorial,

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 5:23pm On Mar 14, 2010

so i think i can just move straight on to joomla template. Please read the writeups above for the regular template building.
But if you have any questions about building regular templates, please ask and you shall get answered. pc guru is itching
to get his hands on the joomla template part.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 5:33pm On Mar 14, 2010

Let me start by using my website template (www..com) as an example of a joomla template:

template.php

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

include_once (dirname(__FILE__).DS.'/ja_vars.php');
?>

<!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" />

<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />

<style type="text/css">
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
#ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
</style>

</head>

<body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >

<div id="container">


<jdoc:include type="modules" name="top" />



<div id="contentwrapper">


<div id="ja-contentwrap">
<div id="ja-content">

<?php if ($_REQUEST['option']=='com_fireboard'||$_REQUEST['option']=='com_jdownloads'): ?>
<div id="content">
<?php else: ?>
<div id="content2">
<?php endif; ?>

<jdoc:include type="message" />
<jdoc:include type="component" />
</div>

</div>
</div>


<?php if ($_REQUEST['option']!='com_fireboard'&&$_REQUEST['option']!='com_jdownloads'): ?>

<div id="sidebar">
<div style="width:200px">
<jdoc:include type="modules" name="right" />
</div>
</div>
<?php endif; ?>


</div>



<jdoc:include type="modules" name="footer" />



<jdoc:include type="modules" name="debug" />


</div>

</body>
</html>

in joomla, there is usually a folder called template. Inside that folder, there are templates each one in their folders.
Oops, battery low, time to go, i will be back later on.
Before i go, i must remind you that, before you get to this step, you must have designed your template in html and
preferably to have designed your template with the home page and possibly the other pages, so you will just need
to do a conversion into joomla or drupal by some manual systematic coding.

I am going to avoid delving into the APIs of the frameworks, you dont need so much of that knowlege to build your
template per say. But i will explain the minimal ones you need to get your templates done.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:17pm On Mar 16, 2010

In a typical joomla template, you have the following files:

index.php
ja_templatetools.php
ja_vars.php
favicon.ico
params.ini
template_thumbnail.png
templateDetails.xml

Those are the minimal files you can have in your joomla template. Of course you can have your image folders,
style folders and other folders and files.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 9:20pm On Mar 16, 2010

index.php
ja_templatetools.php
ja_vars.php
favicon.ico
params.ini
template_thumbnail.png
templateDetails.xml

Let me try to explain a bit.

ja_templatetools.php and ja_vars.php => these 2 come with joomla, just copy from any existing joomla template.
template_thumbnail.png - this is a thumbnail of your template, this is not compulsory
favicon.ico - this is a favicon of your template, if you dont know how to create favicon, pls find out - it is not compulsory

The main files you have to work on are the following:

index.php
params.ini

I have already given an example of what an index.php look like - that is the main template file, we will get back to this later
params.ini is some joomla settings that look like this:

logoType=image
logoText=Joomla!
sloganText=, because open source matters
ja_font=3
ja_screen=fluid
ja_screen_width=97
theme_header=
theme_background=lighter
theme_elements=black
horNav=1
horNavType=css
rightCollapsible=1
rightCollapseDefault=show
excludeModules=38
showComponent=1

This contain some joomla settings that the users can customize later in the
joomla backend and then the template will interprete it with your own codes.

templateDetails.xml

<install version="1.5" type="template">
<name>dhtmlEx</name>
<creationDate>13/08/2009</creationDate>
<creationDate>11.11.2007</creationDate>
<creationDate>13/08/2009</creationDate>
<author>Tony Ogundipe</author>
<authorEmail>support@mwebng.net</authorEmail>
<authorUrl>http://www.mwebng.net</authorUrl>
<copyright>GNU/GPL</copyright>
<version>0.1</version>
<description>TPL_dhtmlEx</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/template.css</filename>
</files>

<positions>
<position>top</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
<position>right</position>
</positions>

</install>

This too is a joomla customization stuff. It explains the template positions, and the location of your
files. This is used in the template installation.

Now, i have given the structure of a joomla template, i will have to explain properly, step by step in
the next class.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 9:00am On Mar 17, 2010

okay from that so far i understand time to practice thanks for taking time cheers bro,

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 3:58pm On Mar 18, 2010

Let me try to explain the

templateDetails.xml

<install version="1.5" type="template">
<name>dhtmlEx</name>
<creationDate>13/08/2009</creationDate>
<creationDate>11.11.2007</creationDate>
<creationDate>13/08/2009</creationDate>
<author>Tony Ogundipe</author>
<authorEmail>support@mwebng.net</authorEmail>
<authorUrl>http://www.mwebng.net</authorUrl>
<copyright>GNU/GPL</copyright>
<version>0.1</version>
<description>TPL_dhtmlEx</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/template.css</filename>
</files>

<positions>
<position>top</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
<position>right</position>
</positions>

</install>

This is the installation and a configuration file of your template. After creating your
template, you are required to list out the path of the files you want joomla to install
and where they are relative to your folder.
That is where your files array come in

<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/template.css</filename>
</files>

I suspect that is easy to understand.

Next is the positioning stuff:

<positions>
<position>top</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
<position>right</position>
</positions>

If you have been using joomla, you will notice that you can
arrange modules and set their positions in the joomla backend
and how you want them arranged, as in, which module comes
before another module.
So in this positioning, you define the positions available in your
template. Later in the index.php, you will determine where exactly
those positions will be displayed in the final output.

One advice at this point is that, you may start peeking at the default templates
that come with joomla, you may take at look at their templateDetails.xml to compare
with what i have been explaining so far.

These rubbish stuffs i am saying are important to know before getting your hands
dirty with the index.php which is the main template file.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:00pm On Mar 18, 2010

The params.ini i will skip. you may just copy and paste the one i have shown so far. Explaining
how to use that will involve diving into the joomla API which is not really compulsory to do
your stuff, after this tutorial, you may look up google and joomla.org to figure out the remaining.
I must admit that building templates in joomla is not so straightforward without understanding
some funny joomla terminologies.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:04pm On Mar 18, 2010

Let me make the index.php somewhat simpler:

template.php

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );

include_once (dirname(__FILE__).DS.'/ja_vars.php');
?>

<!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" />

<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />

<style type="text/css">
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
#ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
</style>

</head>

<body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >

<div id="container">


<jdoc:include type="modules" name="top" />



<div id="contentwrapper">


<div id="ja-contentwrap">
<div id="ja-content">

<div id="content">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>

</div>
</div>


<div id="sidebar">
<div style="width:200px">
<jdoc:include type="modules" name="right" />
</div>
</div>


</div>



<jdoc:include type="modules" name="footer" />



<jdoc:include type="modules" name="debug" />


</div>

</body>
</html>

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:07pm On Mar 18, 2010

Sorry, i have been mixing up some filenames. Please for joomla, there is no template.php per say. Anywhere you see template.php please
replace it with index.php = this is what happens when you use too many frameworks.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 7:53am On Apr 11, 2010

Well, here is a sample template i created for this class. I mean a joomla template.
Since i could not upload a zipped file here, i had to place it on my website.
Download it here

And that ends my joomla template tutorial. The others will be questions. To install the template, it is the usual way it is done in joomla,
you visit the administrative area with the /administrator, then install, and select the zipped file which i think is dynamic.
The tpl.zip contains the template and a little readme stuff.

From this point, i will expect questions for the joomla users. I think i can confortable move on to drupal.

That sample dreamweaver template, i will convert it into a drupal template. It is about the simplest stuff i can use. From there, you can start
figuring out how to put images and all that and make it finer according to your taste.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by quadrillio(m): 2:49pm On Apr 11, 2010

Go on bro, SHARING IS FUN.

-SAFE

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 3:50pm On Apr 11, 2010

You are welcome.
Before i forget, when converting your templates, some of the contents that need to go into the sidebars and footer
are best placed in modules. Then position the modules into the right places.

Module creation in joomla is another topic entirely, however, i have a utility on my website - www..com that
allows easy creation of module. It can create the skeleton for a module and zip it and allow you to download it.
After installing that module into your joomla, you can subsequently edit it and add whatever content you wish to put there.

The full link to the joomla module wizard is - here

Installation of modules is similar to templates and other stuffs in joomla.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:02pm On Apr 11, 2010

So now, letz assume i create a website like www.mwebng.net (yeah, that is my site done in drupal while .com is my site in joomla).
Now in drupal, the templates are called themes and are stored in the themes folder that is : site/themes
Here the installation is automatic, drupal will detect any new theme automatically.
So just go into the themes folder and create a folder like: "dhtmlext"

Whatever name you give the folder will determine your file naming convention for the .info file.

Next, you will need the following files:

block.tpl.php
box.tpl.php
comment.tpl.php
dhtmlext.info
logo.png
node.tpl.php
page-front.tpl.php
page.tpl.php
screenshot.png
style-rtl.css
style.css

[The Main Files]
page.tpl.php is the main template file that you need to work on.
page-front.tpl.php is optional and can be used whenever you need a custom home page that is different from the rest of the pages.

An example of such a drupal site is - fidelitypensionmanagers.com (disclaimer, i did not design the site, i only converted it to drupal).

If you are a drupal user, you will realize there are some small bits of items in drupal such as comments, nodes. . .

[Not so important files]
box.tpl.php - is the subtemplate for theming block modules
comment.tpl.php - is subtemplate for theming comments
node.tpl.php - is for theming node displays.

[Images]
logo.png - is the logo of your site
screenshot.png - is the screenshot of your template

[Stylesheets]
style.css is the default stylesheet of your template
style-rtl.css is the template for rtl rendering [dont bother with this yet]

[Configuration]
dhtmlext.info is the configuration file of your theme

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:08pm On Apr 11, 2010

An example of the page.tpl.php (from a recent website i developed) is:

<html>
<head>
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>

<body>

<table class="main" cellspacing="0" cellpadding="0" align="center">
<tr><td id="topnav"><?php echo "$topnav";?></td></tr>
<tr><td height="20"></td></tr>
<tr><td id="header"><?php echo "$header";?></td></tr>
<tr><td height="11"></td></tr>
<tr><td id="navbar"><?php echo "$navbar";?></td></tr>
<tr><td id="content">

<div class="content_page">
<div class="content_page_inner">
<?php
<div class="tabs"><?php print $tabs ?></div>
<?php if ($show_messages) { print $messages; } ?>

<?php print $help ?>
<?php print $content; ?>
<?php print $feed_icons; ?>

</div>
</div>

</td></tr>
<tr><td id="footer"><?php echo "$footer";?></td></tr>

</table>

<?php print $closure ?>
</body>
</html>

First i designed the template with fireworks, slices it out into pages, then separated the components into modules and page contents.
I will explain the steps in details later on.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:16pm On Apr 11, 2010

On that same website, the block.tpl.php is:

<div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
<div class="content"><?php print $block->content; ?></div>
</div>

I think i removed the title. You can check the block.tpl.php of the templates that came with drupal like garland and compare them with this.

As for the comment.tpl.php and block.tpl.php i just copy them from the default drupal template

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:19pm On Apr 11, 2010

dhtmlext.info goes like this:

; $Id: dhtmlext.info,v 1.4 2007/06/08 05:50:57 dries Exp $
name = dhtmlext
description = DIV-based multi-column theme.
version = VERSION
core = 6.x
engine = phptemplate

; Information added by drupal.org packaging script on 2009-12-16
version = "6.15"
project = "drupal"
datestamp = "1260996916"

; Custom regions
regions[left] = Left Sidebar
regions[right] = Right Sidebar
regions[header] = Header
regions[footer] = Footer
regions[navbar] = Navigation Bar
regions[topnav] = Top Nav Bar
regions[advert] = Advert

The most important thing here is the custom regions which specify my module positions. In drupal, module positions are called blocks.
The other information are straight forward enough (or so i immagine).

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:22pm On Apr 11, 2010

If you scroll back up to the page.tpl.php you will notice that when rendering module/block positions, i simply used stuffs like:

The will render the header which was defined as regions[header] = Header
<?php echo "$header";?>

So others like:

<?php echo "$left";?>
regions[left] = Left Sidebar

<?php echo "$right";?>
regions[right] = Right Sidebar

<?php echo "$footer";?>
regions[footer] = Footer

. . .

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:28pm On Apr 11, 2010

So now, let my try explain the page.tpl.php from begining to end.

Head section

<head>
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
</head>

print $head will render some settings that are meant to be in the head section like meta tags and so on.
$head_title will specify the title of the current page.
$styles will specify the stylesheets of the page. stye.css is added automatically by default.
$scripts will load the default scripts like jQuery if it has been enabled

The body section

<body>

<table class="main" cellspacing="0" cellpadding="0" align="center">
<tr><td id="topnav"><?php echo "$topnav";?></td></tr>
<tr><td height="20"></td></tr>
<tr><td id="header"><?php echo "$header";?></td></tr>
<tr><td height="11"></td></tr>
<tr><td id="navbar"><?php echo "$navbar";?></td></tr>
<tr><td id="content">
<div class="content_page">
<div class="content_page_inner">
<?php
<div class="tabs"><?php print $tabs ?></div>
<?php if ($show_messages) { print $messages; } ?>

<?php print $help ?>
<?php print $content; ?>
<?php print $feed_icons; ?>

</div>
</div>

</td></tr>
<tr><td id="footer"><?php echo "$footer";?></td></tr>

</table>

<?php print $closure ?>
</body>

$topnav, $header, $navbar,$footer are the module/block positions that we have spoken about.

$content is the main page content whether page or view or node.

Sometimes, drupal uses some tabs, those tabs are rendered by $tabs

Drupal also renders messags atimes with the <?php if ($show_messages) { print $messages; } ?>

Help contents are rendered by <?php print $help ?>

Optionally to render feed icons <?php print $feed_icons; ?>

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:30pm On Apr 11, 2010

From this point, i am done with drupal template basics. I will take questions from here on.
By the way, there are different types of template/theme engines in drupal, i am sticking with
the php template engine.
I will post a sample theme for download later on, just for learning, nothing spectacular.

Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:34am On May 03, 2010

Please check out my Joomla / Drupal Template Converter Online Application and the
Joomla / Drupal / Plain Online Template Wizard

I will take questions from this point on. . .

(1) (Reply)

How Long Does It Take Payoneer / Top 5 Benefits Of Search Engine Optimization For Small Businesses In Nigeria / I Want To See Your Personal Website!

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 86
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.