Joomla - Programmer Sheet

index.php

defined('_JEXEC') or die;

Librairies

JHtml::_('behavior.framework', true);
JHtml::_('bootstrap.framework');
JHtmlBootstrap::loadCss(
  $includeMaincss = false,
  $this->direction);
JHtml::_('jquery.framework', true);

Modules

<jdoc:include type="modules"
  name="position-0"
  style="none" />

Positions standards

<jdoc:include type="modules"
  name="debug"
  style="none" />
<jdoc:include type="head" />
<jdoc:include type="component" />
<jdoc:include type="message" />

Variables

$this->baseurl
$this->template
$this->direction
$this->params->get('templateparam')
$this->language

Images

template_preview.png [640x400 px]
template_thumbnail.png [200x150 px]

Template Override

Fichier source

components/com_content/views
/article/tmpl/default.php

Fichier cible

templates/[yourtemplate]/html
/com_content/article/default.php

Variables Joomla!

$config = JFactory::getConfig()
$config->get('sitename')
$app = JFactory::getApplication()
$doc = JFactory::getDocument()

none

...contenu du module...

xhtml

<div class="moduletable[suffixe]"> 
  <h3>Titre du module</h3> 
  ...contenu du module... 
</div>

rounded

<div class="module[suffixe]">
  <div>
    <div>
      <div>
        Titre du module
        ...contenu du module...
      </div>
    </div>
  </div>
</div>

table

<table cellpadding="0" cellspacing="0" class="moduletable[suffixe]"> 
  <tr> 
    <th>Titre du module</th> 
  </tr>
  <tr> 
    <td> 
    ...contenu du module... 
    </td> 
  </tr> 
</table>

html5

<TAG class="moduletable[suffixe] BS">
  <HEADER class="HEADERCLASS">
    Titre du module
  </HEADER>
  ...contenu du module...
</TAG>

horz

<table cellspacing="1" cellpadding="0" width="100%">
  <tr>
    <td>
      charge le module avec le style table
    </td>
  </tr>
</table>

Condition d'affichage

<?php if ($this->countModules('position-7')): ?>
  <div class="navigation">
    <jdoc:include type="modules" name="position-7" style="xhtml" />
  </div>
<?php endif; ?>

Module Chrome

templates/[TEMPLATE]/html/modules.php
function modChrome_foobar($module, &$params, &$attribs) {...}
<jdoc:include type="modules" name="position-7" style="foobar" />
$params->get('moduleclass_sfx')
$module->showtitle
$module->title
$module->content

DOCTYPE

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

HTML

<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>"
dir="<?php echo $this->direction; ?>" >

Appel CSS

<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" rel="stylesheet" type="text/css">
$doc->addStyleSheet($this->baseurl.'templates/'.$this->template.'/css/template.css');
<style type="text/css">code ici</style>

Appel Javascript

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js" type="text/javascript"></script>
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/javascript/template.js');
<script type="text/javascript">code ici</script>

Commentaire conditionnel

<!--[if IE 7]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/ie7only.css">
<![endif]-->
[if gt IE 7] : Plus grand que IE7
[if gte IE 7] : Plus grand et égal que IE7
[if lt IE 7] : Plus petit que IE7
[if lte IE 7] : Plus petit et égal que IE7

Responsive design

<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media  screen and (max-width: 1024px) { }

templateDetails.xml

<?xml version="1.0" encoding="utf-8"?>
<extension
  version="3.0"
  type="template"
  client="site"
  method="upgrade"
>
</extension>

Infos

<name></name>
<version></version> 
<creationDate></creationDate> 
<author></author> 
<authorEmail></authorEmail> 
<copyright></copyright> 
<description></description>

Fichiers

<files> 
  <filename>index.php</filename> 
  <folder>css</folder> 
</files>

Positions de modules

<positions> 
  <position>debug</position> 
</positions>

Langues

<languages folder="language"> 
  <language tag="en-GB"> en-GB/en-GB.tpl_foobar.ini</language>
  <language tag="en-GB"> en-GB/en-GB.tpl_foobar.sys.ini</language> 
</languages>

Options

<config> 
  <fields name="params"> 
    <fieldset name="advanced">
      <field name="foobar" type="text" />
    </fieldset> 
  </fields> 
</config>

CSS (Cascading StyleSheet)

ID

<p id="foobar"></p>
 #foobar { color:red; }

CLASS

<p class="foobar"></p>
 .foobar { color:red; }