Creating new Joomla template
You can download the GreenField template on this page: GreenField template for Joomla.
The simplest way to create a new template is to base it on one of the existent template. Joomla is shipped with three templates, beez, JA_Purity, and rhuk_milkyway. rhuk_milkyway is the default template so let’s copy it to the greenfield folder and modify its design.
Milkyway template
The goal, Greenfield template.
First, the template information in templateDetails.xml should be changed because Joomla reads the template name from this file and now we have two rhuk_milkyway templates. To change it, open the greenfield\templateDetails.xml file and change template information tags as follows:
<name>Green Field</name>
<creationDate>10/08/08</creationDate>
<author>CMS Lamp</author>
<authorEmail>cms.lamp@gmail.com</authorEmail>
<authorUrl>http://cmslamp.com/</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>Nice green theme</description>
The params section in templateDetails.xml may be removed and the content of the params.ini file can be removed too. Then we can continue by editing index.php.
index.php has milkyway-related includes and HTML tags so let’s remove them: several links to styles, code related to text order (ltr/rtl), the id and class attrbites of the body tag, html tags in body tag. GreenField will not support complex layouting and some of the placeholders so all these content may be removed too (from index.php and templateDetails.xml).
We end up with a very simple index.php:
<?php
// no direct access
defined( '_JEXEC' ) or exit( 'Restricted access' );
?>
<!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>
<body>
<!-- breadcrumb -->
<jdoc:include type="modules" name="breadcrumb" />
<!-- message -->
<jdoc:include type="message" />
<!-- left column -->
<jdoc:include type="modules" name="left" style="rounded" />
<!-- main column -->
<jdoc:include type="component" />
<!-- right column -->
<jdoc:include type="modules" name="right" style="xhtml"/>
<!-- page footer -->
<jdoc:include type="modules" name="syndicate" />
<!-- powered by -->
<?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>,
<a href="http://cmslamp.com/joomla-template/greenfield">Joomla template</a> by
<a href="http://cmslamp.com/">CMS Lamp</a>.
</body>
</html>
and templateDetails.xml:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>Green Field</name>
<creationDate>10/08/08</creationDate>
<author>CMS Lamp</author>
<authorEmail>cms.lamp@gmail.com</authorEmail>
<authorUrl>http://cmslamp.com/</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>Nice green theme</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
</files>
<positions>
<position>menu</position>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>syndicate</position>
</positions>
</install>
Creating HTML template is a complex task, so I suppose that HTML template is available. In this case the next step is very simple: accuratelly copy the content from the HTML template to the GreenField Joomla template, placing <jdoc:include … /> in correct places.
jdoc modules include allows to select block decorator. It may be one of the standard decorators defined in templates\system\html\modules.php: none, table, horz, xhtml, rounded, and outline, or template-specific decorators from html\modules.php file of the particular template.
The GreenField template has one decorator for blocks, called gfblock, which applied to the top, menu, left, and right placeholders. This decorator adds nice border and caption for the module blocks. The top placeholder processed differently: menu module output is changed to match the HTML template menu.
To make GreenField looks similar to the HTML template, site headline and slogan patrameters should be added. After registering parameters in templateDetails.xml and set their default values in params.ini they will appear in template parameters in Joomla adminstrating section.
And the final step is adding theme files to templateDetails.xml.
You can download the GreenField template on this page: GreenField template for Joomla.
Tags: Greenfield, Joomla, template, tutorial
November 24th, 2008 at 9:47 am
hello friend like these I like your template greenfield, I would use it to my site, is quite simple and fast loading, I need you to help me, we need to adjust staffing to 800×600 resolution, I will thank you very much, this is my Mail alexander13034@grm.jovenclub.cu