Joomla! Template for Beginners

Joomla! Template Development for Beginners 2 Oct 2010

This training will be conducted in a non-linear fashion.

Books are boring.

The human brain is interested in making connections, and not so good in following orders.

No pens, papers or notebooks needed.

Sit back, relax, and let the human brain make connections!

www.joomla.org

joomla templates beez ja_purity rhuk_milkyway system

ja_purity beez

rhuk_milkyway

joomla templates beez ja_purity rhuk_milkyway system

What does the “system” folder do?

What does the “system” folder do? Common html layout & css styling that is used throughout the entire Joomla! site.

http://yoursite/administrator

Extensions > Template Manager

joomla templates rhuk_milkyway index.php

Things that I saw but I did not understand

<jdocs:include> stuff <jdoc:include type="component" /> <jdoc:include type="modules" name="top" /> <jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="modules" name="right" style="xhtml"/> <jdoc:include type="modules" name="footer" style="xhtml"/>

Removed this.

And inserted a ducky...

Can you spot the difference?

<jdoc:include type="component" />

Then I replaced this with a ducky… <jdoc:include type="modules" name="left" style="rounded" />

and we have 2 duckies.

<jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="component" />

module module module module module module component module module

Joomla! templates are built with Component & Modules. <jdoc:include type="component" /> <jdoc:include type="modules" name="left" style="rounded" />

So, build your html codes around Component & Modules. <div id="mainContent"> <jdoc:include type="component" /> </div> <div id="sidebar"> <jdoc:include type="modules" name="left" style="rounded" /> </div>

joomla templates rhuk_milkyway templateDetails.xml

template metadata templateDetails.xml contains the metadata of your template, e.g. template name, template description, template license.

template files It also contains the list of your template files, which Joomla! look up to when installing/uninstalling a Joomla! template on Joomla! site.

So, build your html codes around Component & Modules. <div id="mainContent"> <jdoc:include type="component" /> </div> <div id="sidebar"> <jdoc:include type="modules" name="left" style="rounded" /> </div>

module positions The available module positions of the template is listed right here. Do you still remember… <jdoc:include type="modules" name="left" style="rounded" />

2 most important file that makes any Joomla! template work. index.php templateDetails.xml

The bare essentials of index.php 1. Doctype 2. Head 3. Joomla! system stylesheets 4. Component 5. Modules

1. Doctype <!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; ?>" >

2. Head <head> <jdoc:include type="head" /> </head>

3. Joomla! system stylesheets <link rel="stylesheet“ type="text/css" href="<?php echo $this->baseurl?> /templates/system/css/system.css" /> <link rel="stylesheet“ href="<?php echo $this->baseurl?> /templates/system/css/general.css" type="text/css" />

4. Component <jdoc:include type="component" />

5. Modules <jdoc:include type="modules" name="left" style="rounded" />

The bare essentials of index.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“ type="text/css" href="<?php echo $this->baseurl?> /templates/system/css/system.css" /> <link rel="stylesheet“ href="<?php echo $this->baseurl?> /templates/system/css/general.css" type="text/css" /> </head> <body> <jdoc:include type="component" /> <jdoc:include type="modules" name="left" style="rounded" /> </body> </html>

Demo The Bare Essentials

some things here… Let’s talk about… Modules. some things here also… some things everywhere… some things there…

Extensions > Module Manager

click! Creating a module.

Select module type.

Configure module & you’re done!

I’m green with white border! What I really want to talk about is… Module Chrome. I’m purple with rounded corner!

What does this style attribute does? <jdoc:include type="modules" name="left" style="rounded" /> <jdoc:include type="modules" name="right" style="xhtml"/>

There are 6 types of Chrome that comes with Joomla!. <jdoc:include type="modules" name="left" style="none" /> style="table" style="horz" style="xhtml" style="rounded" style="outline"

How do they look like? rounded xhtml outline

Speaking of outline…

Now that’s a neat trick! http://yoursite/index.php?tp=1

Where do module chromes come from?

joomla templates system html modules.php

Can I make my own module chrome?

joomla templates yourtemplatename html modules.php

The bare essentials of a module chrome <?php echo $module->title; ?> <?php echo $module->content; ?>

A sample module chrome <?php function modChrome_rounded($module, &$params, &$attribs) { ?> <h3><?php echo $module->title; ?></h3> <div><?php echo $module->content; ?></div> <?php } ?>

Demo Module Chrome

Demo A quick Joomla! template.

We are hiring Web Designers. Become a Joomla! Web Designer @ Slashes and Dots! Talk to us or contact Meriza - meriza@azrul.com.

Recommend a friend and get RM1500 If you know any friends who is a web designer. Recommend them to us! If we hire them, you get RM1500.

http://www.52joomla.com	12189
http://www.scoop.it	502
http://claude-bueno.blogspot.com	278
http://www.hksilicon.com	194
http://evdesign.org	114
http://bloghoctap.blogspot.com	100
http://www.qings.com	64
http://blog.websourcing.fr	33
http://feeds.feedburner.com	7
http://translate.googleusercontent.com	5
http://cache.baidu.com	5
http://webcache.googleusercontent.com	4
http://proxy5060.appspot.com	3
http://www.netvibes.com	2
http://us-w1.rockmelt.com	2
http://www.twylah.com	1
http://www.evdesign.me	1
http://www.evdesign.org	1
http://www.52joomla.com HTTP	1
http://xianguo.com	1

Joomla! Template for Beginners

by Slashes & Dots Sdn Bhd on Oct 07, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 13,507

Statistics

Joomla! Template for Beginners — Presentation Transcript