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; }

Joomla - Programmer Sheet

index.php

Images

Template Override

Variables Joomla!

none

xhtml

rounded

Titre du module

table

html5

horz

Condition d'affichage

Module Chrome

DOCTYPE

HTML

Appel CSS

Appel Javascript

Commentaire conditionnel

Responsive design

templateDetails.xml

CSS (Cascading StyleSheet)

We use cookies!🍪