Lexique template & css joomla
Lexique Source: http://www.joomlack.fr
La page HTML se divise en deux : l'entête et le corps. Voici la structure basique d'une
page web :
<html>
<head>
...on y place tous les appels aux fichiers externes, feuilles de style, scripts, les
balises méta...
</head>
--------------------------------------------------------------------------------
<body>
...on construit l'architecture (ou squelette) du site avec les balises HTML...
</body>
</html>
-------------------------------------------------------------------
Quelques balises HTML
Balise bloc
<div> : élément bloc
<p> : paragraphe
<ul> : liste
<li> : élément de liste
<h1>,<h2>,<h3>,... : titres
Balise en ligne
<a> : ancre qui permet d'insérer des liens
<span> : élément en ligne
<img> : image
<input> : champ de formulaire
-------------------------------------------------------------------------------
Forcer le comportement CSS
display : block;
"Je veux que tu t'affiches comme un bloc"
display : inline;
"Je veux que tu t'affiches en ligne"
display : inline-block;
"Je veux que tu t'affiches comme un bloc mais en ligne"
------------------------------------------------------------------------------
Comment mettre deux blocs côte à côte.
<head>
<style type="text/css">
#conteneur { width : 800px; }
#bloc1 { width : 400px; height : 50px; float : left;}
#bloc2 { width : 400px; height : 50px; float : left;}
.clr { clear : both; }
</style>
</head>
<body>
<div id="conteneur">
<div id="bloc1"></div>
<div id="bloc2"></div>
<div class="clr"></div>
</div>
</body>
clear : both;
Places toi sous toutes les boites flottantes précédentes et mets fin à la flottaison
--------------------------------------------------------------------------------------
(index.php) Barrière de sécurité qui bloque les personnes malintentionnées de regarder votre code.
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
----------------------------------------------------------------------------
DOCTYPE détermine la règle utilisée pour construire votre page. C'est lui qui va permettre de valider la page d'après le W3C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
----------------------------------------------------------------------------
Partie HEAD
On déclare le début de l'entête du document.
<head>
----------------------------------------------------------------------------
On charge les informations de l'entête à partir des données de Joomla!.
<jdoc:include type="head" />
----------------------------------------------------------------------------
Déclaration des "CSS system" dans index.php
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
Déclaration du CSS du template template.css
<link rel="stylesheet" href="/templates//css/<strong>template.css</strong>" type="text/css" />
----------------------------------------------------------------------------
pour obtenir l'adresse de base du site
<?php echo $this->baseurl ?>
----------------------------------------------------------------------------
Pour obtenir le nom du template (renseigné dans le fichier XML)
<?php echo $this->template ?>
----------------------------------------------------------------------------
Partie body
On déclare le début du corps de la page.
<body>
----------------------------------------------------------------------------
jdoc:include type="modules" : définit un emplacement dans lequel on pourra
charger plusieurs modules.
name="position-7" : donne le nom de la position, ici position-7.
----------------------------------------------------------------------------
Dans chaque dossier et sous-dossier du template il faut mettre un fichier "index.html"
qui contient:
<html><body bgcolor="#FFFFFF"></body></html>
C'est une procédure qui fait partie de la sécurité du template, elle évite à quiconque de voir ce qui se trouve à l'intérieur du dossier.
----------------------------------------------------------------------------
Les différents appels JDOC de Joomla
Le code interne <jdoc:include /> permet d'afficher les différents éléments du template.
C'est une instruction de l'API Joomla! qui va chercher les informations dans la base de
données et les intégrer dans le template (articles, modules, textes, etc...).
------------------------------------------------------------------------------
<jdoc:include type="head" />
cette fonction introduit les codes internes de Joomla! dans
l'entête tels que les balises méta et le titre de la page.
------------------------------------------------------------------------------
<jdoc:include type="component" />
Cette appellation n'apparait normalement qu'une seule fois sur dans le document, elle permet de charger le contenu principal de la page : les articles, catégories, page de contact, n'importe quel composant du site.
--------------------------------------------------------------------------------
<jdoc:include type="message" />
Cette inclusion affiche les messages d'erreur ou les messages système qui pourrait survenir lors du chargement de la page. On la place généralement juste au-dessus de l'appel de type "component".
----------------------------------------------------------------------------
<jdoc:include type="module" name="position-1" />
Permet de charger une position de module, mais un seul module pourra être publié dans cette position. On l'utilise le plus souvent pour afficher un fil d'ariane (breadcrumbs), name= : c'est le nom de la position que l'on veut charger
----------------------------------------------------------------------------
<jdoc:include type="modules" name="position-1" />
Charge une position avec tous les modules qui y sont publiés. Ici tous les modules publiés dans la position "position-1" seront chargés.
----------------------------------------------------------------------------
On peut personnaliser l'affichage du module en utilisant l'attribut "style=" à la fin de la procédure.
<jdoc:include type="modules" name="position-1" style="xhtml"/>
----------------------------------------------------------------------------
Les différants styles d'affichage des modules
rounded <div class="module[suffixe]">
<div>
<div>
<div>
<h3>Titre du module</h3>
...contenu du module...
</div>
</div>
</div>
</div>
Très utilisé pour créer desmodule arrondis grâceaux quatre DIV imbriquées.
-----------------------------------------------------------------------------