Créer un nouveau template en utilisant Atomic

Le template Atomic est un squelette pour votre propre template. Il se compose de :

• /htdocs/templates/atomic
  component.php - le template de vue d'impression
  error.php - le template de page d'erreur
  favicon.ico - l'icône du site (Favicon)
  index.html - un fichier de sécurité affichant une page blanche lorsque le répertoire est accédé directement (doit également être configuré par le serveur web, mais l'est généralement)
  index.php - La page principale du template
  templateDetails.xml - Ce fichier de configuration contenant toutes les informations sur les fichiers, options, et positions, est nécessaire pour montrer le template dans le gestionnaire de templates et pour créer plus tard un package zip installable.
  template_preview.png - l'image de prévisualisation, affichée dans le gestionnaire de template
  template_thumbnail.png - l'image miniature du template, affichée dans le gestionnaire de template
• /htdocs/templates/atomic/css
  le dossier pour les fichiers CSS
• /htdocs/templates/atomic/html
  le dossier pour les fichiers de surcharge (override) - Atomic fournit quelques surcharges pour les modules.
• /htdocs/templates/atomic/images
  le dossier d'images
• /htdocs/templates/atomic/js
  le dossier pour les fichiers Java script
• /htdocs/templates/atomic/languages
  le dossier de la langue des fichiers - Atomic est fourni avec les fichiers de langue anglaise à la base.

Le fichier principal du template index.php

Le nom de ce fichier de mise en page doit être index.php puisque Joomla! cherche ces commandes <jdoc> et PHP. Tout le balisage HTML nécessaire est déjà intégré et commenté. Vous pouvez modifier le contenu du fichier selon vos besoins.

Pour nous faire une idée, nous allons en faire un parcours rapide:

Dans la ligne 24 vous pouvez choisir si vous voulez utiliser le framework CSS blueprint ou pas.

Dans les lignes 50, 55, 61 et plus, vous voyez que le template fournit des positions avec des noms spéciaux (atomic-search, atomic-topmenu, ...). Si vous voulez employer ces noms vous devez assigner vos modules à ces positions. Si vous voulez changer les noms, vous pouvez faire cela dans le fichier templatedetails.xml.

Dans la ligne 24 vous verrez:

echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js

Joomla! connait les valeur dans baseurl ainsi le nom de votre template et vous pouvez y accéder en cas de besoin.

Dans la ligne 46 vous verrez:

echo $app->getCfg('sitename');

Il vous indiquera le nom de votre site.

Dans la ligne 48 vous allez voir:

if($this->countModules('atomic-search')) ...

Cela compte le nombre de modules dans la position atomic-search. C'est utilisé pour ajuster votre mise en page à des situations différentes.

Dans la ligne 50 vous verrez:

<jdoc:include type="modules" name="atomic-search" style="none" />

C'est une commande <jdoc>, qui n'existe que comme un emplacement de nom dans Joomla!. On s'en sert pour insérer la sortie HTML d'un type donné dans les attributs. Dans ce cas, cela veut dire que la sortie de tous les modules est assignée à la position atomic search. L'attribut style est appelé module chrome et peut avoir ces valeurs

• table - La sortie est affichée dans un tableau.
• horz - Le résultat est affiché horizontalement dans une cellule d'une table qui l'entoure.
• xhtml - La sortie est en dans un élément XHTML <div> compatible.
• rounded - La sortie est dans un format dans lequel des coins arrondis peuvent être affichées. La classe de l'élément est renommé à partir de moduletable vers module.
• none - aucune mise en forme
• outline - le type d'affichage de l'aperçu de position (?tp=1)
• Style de template spécifique - Certains templates, comme Beez, ont leurs propres styles. Voir le chapitre Le template Beez.

Vous trouverez une liste complète des styles dans la documentation Joomla! - What is module chrome.

Les autres types <jdoc> sont:

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

Chaque page nécessite un head, parfois un message (après sauvegarde) et, bien sûr, un composant. Un composant peut être affiché par page. Le composant peut se servir aussi bien du module chrome.

Les fichiers error et print view fonctionnent exactement comme le fichier principal du template.

dossier CSS

Vous trouverez trois fichiers dans ce dossier.

1. Le fichier css/template.css avec des commandes prédéfinies de CSS commentées. Si vous n'utilisez pas le framework blueprint, vous devez décommenter certaines d'entre elles. Les lignes sont spécifiquement marquées.
2. Le fichier css/template_ie.css est vide. Ici vous pouvez ajouter les styles de remplacement de pour Internet Explorer.
3. Le fichier css/template_rtl.css est également vide. Vous pouvez y ajouter les styles de remplacement pour les langues de droite à gauche.

Framework Blueprint

Blueprint est un framework CSS conçu pour réduire les temps de développement et assurer la compatibilité entre navigateurs.

Quelques phrases tirées du fichier readme:

Bienvenue sur Blueprint! Il s'agit d'un framework CSS conçu pour réduire votre temps de développement CSS. Il vous donne une base solide pour construire vos propres commandes CSS. Voici quelques-unes des caractéristiques out-of-the-box fournies par BP:
* Une grille facilement personnalisable
* Typographie par défaut sensible
* Une baseline typographique
* Réinitialisation perfectionnée du navigateur CSS
* Une feuille de style pour l'impression
* Scripts puissants pour la personnalisation
* Absolument aucun excés!

Vous trouverez des démos et tutoriels sur le site Web du projet - http://www.blueprintcss.org/.