Outils pour utilisateurs

Outils du site


joomla:skin

Initiation à la réalisation d'un gabarit

le but de ce TP est de réaliser un gabarit (skin) dont le résultat sera semblable à la maquette suivante :

Le point de départ sera une installation de Joomla! qui est rempli avec un contenu minimal et où est installer un gabarit “vide” :
http://src/public/src2006/votre_login/tp_joomla

Au besoin, vous pouvez télécharger le gabarit, cela peut servir comme point de départ pour vos propres réalisations.

Préparation du travail

Firefox

Télécharger et installer firebug, cela vous sera utile pour comprendre la structure de la page.
Activez FireBug dans FireFox par le menu Outils / FireBug / Disable FireBug

Ouvrir dans des onglets de firefox :

Dreamweaver

Configuration du site

Lancer Dreamweaver et créer un nouveau site avec les paramètres suivants :

  • nom : tp_joomla
  • Utiliser une technologie serveur : PHP MySQL
  • Modifier localement, puis télécharger vers le serveur d'évaluation
  • Stocker les fichiers sur : z:\tp_joomla
  • Se connecter au serveur : FTP
    • nom d'hôte : src
    • dossier : /web/tp_joomla/templates/TP_Joomla/
    • nom d'utilisateur : votre_login
    • mot de passe : votre_mot_de_passe
      • penser à tester avant de poursuivre
  • pas activer l'archivage et l'extraction
  • Terminé

Si vous demandez à voir les fichiers du serveur :

Acquérir les fichiers pour en faire une copie locale.

Pour le détail de ces manipulations, se référer au TD : Prise en main de Dreamweaver

Mise en place

Ouvrir les fichiers :

templateDetails.xml

  <?xml version="1.0" encoding="iso-8859-1"?>
  <mosinstall type="template" version="1.0.0">
  	<name>TP_Joomla</name>
  	<creationDate>25/03/2007</creationDate>
  	<author>pracht</author>
  	<copyright>GNU/GPL</copyright>
      <authorEmail>[email protected]</authorEmail>
      <authorUrl>http://src.pu-pm.univ-fcomte.fr/public/profs/pracht</authorUrl>
  	<version>0.1</version>
  	<description>Gabarit vide pour TP</description>
  	<files>
  		<filename>index.php</filename>
  		<filename>template_thumbnail.png</filename>
  	</files>
  	<images>
  		<filename>images/fond.jpg</filename>
  		<filename>images/bare_ronde.gif</filename>
  		<filename>images/button_bg.png</filename>
  		<filename>images/menu.png</filename>
  		</images>
  	<css>
  		<filename>css/template_css.css</filename>
  	</css>
  </mosinstall>

Ne pas modifier ce fichier pour le TP. Mais le personnaliser si vous faites une copie du dossier pour débuter un nouveau gabarit (TP2)

Les points importants sont :

  • name : le nom du gabarit
  • creationDatedescription : divers renseignement
  • logiquement vous ne devez pas toucher à files
  • images : mettre içi les images utilisées par le gabarit
  • css : au besoin ajouter d'autre css

index.php

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!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" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>"
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type="text/javascript"> </script>
<!--http://www.bluerobot.com/web/css/fouc.asp-->
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
</head>
    <body>
    <!-- 1 --><?php echo $mosConfig_sitename;?>
    <!-- 2 --><?php mosLoadModules('banner',-2);?>
    <!-- 3 --><?php mosLoadModules('menu',-2);?>
    <!-- 4 --><?php mosMainBody();?>
    <!-- 5 --><?php mosLoadModules('right',-2);?>
    <!-- 6 --><?php include_once( $mosConfig_absolute_path .'/includes/footer.php' );?>
</body>
</html>

C'est un fichier “minimum” qui servira de base à votre gabarit :

  • <?php echo $mosConfig_sitename;?> : affiche le nom du site
    • modifiable par (site/configuration du site)
  • <?php mosLoadModules('xxxxxx',-2);?> : définit une “position” nommée 'xxxxxx' (explication à suivre)
  • <?php mosMainBody();?> : affiche le contenu propre à la page (un ou plusieurs article)
  • <?php include_once( $mosConfig_absolute_path .'/includes/footer.php' );?> affiche le pied de page standard de Joomla!

Durant le TP vous allez ajouter du code HTML à ce fichier pour mettre en page le gabarit

template_css.css

/* CSS Document */

C'est dans ce fichier que vous allez ajouter le code CSS pour mettre en forme le gabarit.

Dreamweaver ne sait pas que ce ficher CSS est utilisé par le fichier index.php, vous devez lui indiquer :

  • Texte / Style CSS / Conception…

Vérifier que tout fonctionne en modifiant le fichier CSS :

/* CSS Document */
body {
	margin:0;
	padding:0;
	font-family: Arial, "MS Trebuchet", sans-serif;
	}

Vous pouvez maintenant utiliser toutes les fonctionnalités de Dreamweaver pour les styles :

Publier les modifications et visualiser le résultat dans le navigateur : Demander de l'aide si cela ne fonctionne pas.
Remarque : Vous ne pouvez utiliser F12 (aperçu dans le navigateur). Vous devez placer les fichiers sur le serveur, puis actualiser la page affichée dans le navigateur.

Utiliser FireBug (clic droit : inspect Element) pour visualiser le code généré par Joomla!

Principe des gabarits de Joomla!

Un gabarit de Joomla! doit comporter :

  • le contenu de la page : mosMainBody
  • une ou plusieurs “position” : mosLoadModules
    • chaque position comporte un ou plusieurs modules

La configuration des modules et des positions est définie dans la partie administration du site : http://src/public/src2006/votre_login/tp_joomla/administrator

  • les noms des positions : (site / Gestion des Templates / Positions des Modules)
  • les modules et leurs configurations : (Modules / Modules du Site)

Remarque tous les modules présents dans la configuration, ne sont pas forcément affichés. Il peuvent être vides, non publiés, à une position inexistante, affichés sur aucune page, visibles à un public restreint …

Sur le site d'exemple du TP, vous avez un gabarit avec 3 positions (banner, menu, right) plus le contenu.

Dans le code du fichier index.php :

<?php mosLoadModules('banner',-2);?>

Cette ligne sera remplacée par rien du tout, car il n'y a pas de modules actuellement configurés pour s'afficher à cette position.

<?php mosLoadModules('menu',-2);?>

Cette ligne sera remplacée par le contenu du module Menu Principal (le module Menu utilisateur ne s'affiche pas car il n'est visible que lorsque l'on est connecté).

<?php mosMainBody();?>

Cette ligne sera remplacée par le contenu de la page.

<?php mosLoadModules('right',-2);?>

Cette ligne sera remplacée par le contenu du module Derniers articles (d'autres modules sont définis à cette position, mais ils ne s'affichent pas).

Ce qu'il faut savoir :

  • mosLoadModules affiche les modules définis à une position
    • le premier paramètre est le nom de la position
    • le second paramètre est le style d'affichage : n'utiliser que -2 ou -3 (voir plus loin)
  • Ce qui est affiché par un module dépend du type du module et de son paramètrage
    • Changer les paramètres d'un module par : (Modules / Modules du Site)
      • Pour un menu, toujours choisir : (Style de menu → Liste)
  • mosMainBody affiche le contenu de la page

Utiliser FireBug pour visualiser les points précédemment évoqués :

Travail à réaliser

Le travail se décompose en deux parties :

  • Mise en page HTML/CSS
  • Installation et paramètrage d'un module

Les codes HTML/CSS employés dans ce TP ne sont pas à prendre comme exemples. Pour votre projet, documentez-vous sur les techniques CSS et vérifiez sur différent navigateur. L'objectif de ce TP est purement didactique. Venez avec un objectif (maquette) et des questions (comment faire …

) lors du second TP.

Mise en page HTML/CSS

Toute une série d'étapes pour vous montrer qu'il est possible de réaliser un gabarit correspondant à une maquette.

A chaque étapes :

  • Publier les fichiers index.php et template_css.css
  • Visualiser le résultat dans le navigateur
  • Inspecter le résultat avec FireBug

Centrer la page

<body>
    <div id="page">
<!-- 1 --><?php echo $mosConfig_sitename;?>
<!-- 2 --><?php mosLoadModules('banner',-2);?>
<!-- 3 --><?php mosLoadModules('menu',-2);?>
<!-- 4 --><?php mosMainBody();?>
<!-- 5 --><?php mosLoadModules('right',-2);?>
<!-- 6 --><?php include_once( $mosConfig_absolute_path .'/includes/footer.php' );?>
    </div>
</body>
/* CSS Document */
body {
	margin:0;
	padding:0;
	background-color:#21242C;
	}
#page {
    position:absolute;
    top:0;
    left:50%;
    width:960px;
    margin-left:-480px;
    background: #DBD8D1 url('../images/fond.jpg') no-repeat top center;
}

Rq : solution “simplifiée” se référer au TP1 html pour comment centrer correctement.

Mettre en place les blocs

<body>
    <div id="page">
        <div id="bandeau">
            <a id="logo" href="<?php echo $mosConfig_live_site;?>"><?php echo $mosConfig_sitename;?></a>
            <div id="banner"><?php mosLoadModules('banner',-2);?></div>
            <div id="menu"><?php mosLoadModules('menu',-2);?></div>
        </div>
        <div id="contenu">
            <div id="main_body"><?php mosMainBody();?></div>
            <div id="right"><?php mosLoadModules('right',-2);?></div>
        </div>
        <div id="footer"><?php include_once( $mosConfig_absolute_path .'/includes/footer.php' );?></div>
    </div>
</body>

le but est d'avoir une division et un identifiant pour chaque élément à mettre en place.
Par commodité il est conseillé de choisir des identifiants (id) semblable aux noms des positions/modules.

<a id="logo" href="<?php echo $mosConfig_live_site;?>"><?php echo $mosConfig_sitename;?></a>

Cette ligne de code illustre l'usage de deux variables permettant de récupérer l'url de la racine et le nom du site.

mise en place du contenu
#page {
    padding-top:350px;
}
#bandeau {
    position:absolute;
    top:0;
    left:0;
}

Classiquement on utilise un padding pour dégager le contenu et on place les éléments fixes en absolu.

Mise en place des éléments fixes
#menu {
    position:absolute;
    top:260px;
    left:50px;
}
#banner {
    position:absolute;
    top:80px;
    left:70px;
}
#logo {
    position:absolute;
    top:140px;
    left:480px;
    width:370px;
    height:0px;
    padding-top:80px;
    overflow:hidden;
}

Pensez à relever les positions et tailles des éléments de votre maquette.

Important : éviter l'usage de display:none pour des raisons d'accessibilité. La technique utilisée pour le logo est préférable.

mise en colonne
#main_body, #right {
    float:left;
    width:50%;
}
#footer {
    clear:both;
}
#right {
    padding-top:200px;
}

Utilisation de float (ne pas oublier d'utiliser clear)

Mettre en forme les éléments

La majorité du code HTML est générée par Joomla!, penser à utiliser FireBug pour trouver des sélecteurs CSS pour mettre en forme.
Au besoin modifier la configuration des modules (ex: suffixe CSS)

mise en forme du titre

Pour mettre en forme “Bienvenu sur Joomla” : faire un clic droit puis inspect element, FireBug devrait vous permettre de trouver sa classe. Combiner avec l'identifiant : “main_body” cela vous donne un sélecteur pour les titres d'article.

#main_body .contentheading {
  font-size:2em;
}
#menu {
    width:910px;
}
#menu ul {
    list-style-type: none;
}
#menu li {
    display:inline;
    padding:0 1em;
}

Une solution mais sans doute pas la bonne pour pouvoir fixer le fond.

Reste à faire ...

utiliser FireBug pour trouver des sélecteurs CSS pour mettre en forme les éléments restants.
Au besoin modifier la configuration des modules (ex: suffixe CSS)

Installation et paramètrage d’un module

Télécharger le module : Content Item, vous pouvez télécharger directement une copie içi.

Remarque : le fichier à télécharger est une archive zip contenant 4 fichiers. Vérifier ce point, mais ne pas extraire les fichiers.

L'installer par le biais de l'interface d'administration : (Instalation / Modules)

Ajouter un module Content Item : (Modules / Modules du site)

Le configurer comme suit :

  • position : right
  • Type : Section
  • ID : 2 (Rq: c'est le nombre que l'on peut lire dans la colonne ID Section de Contenu / Gestion des Sections)
  • Number of items : 0
  • Number of columnus : 1
  • Number of leading paragraphs : 3

Mettre en forme son affichage avec des style CSS.

Pour la semaine prochaine

  • Expérimenter en essayant de finir la mise en forme
  • Préparer la maquette pour votre gabarit :
    • déterminer les positions
    • mettre en place les blocks
joomla/skin.txt · Dernière modification: 2008/04/24 22:00 (modification externe)