Xoopser un template xhtml/css en moins de 10mn

Date 10/07/2005 | Sujet : Documentations

Sous ce titre volontairement provocateur mais tout à fait réalisable, nous souhaitons vous aider à utiliser des thèmes qui ne soient plus forcément basés sur des tableaux, mais plutôt en suivant les recommandations du W3C.
Nous vous proposons la méthode suivante : réaliser un thème xoops à partir d'un template standard non xoops téléchargeable sur le site Alsacreations. Après avoir rappelé ce qu'est un thème et expliqué comment fonctionne le thème default, nous construirons ce nouveau thème avec juste quelques copier/coller.

De quoi avez-vous besoin ? juste d'un éditeur de texte tout simple, la boîte d'aspirine est en principe superflue.

1. Qu'est-ce qu'un thème

Un thème se compose d'éléments qui vont déterminer l'apparence globale de votre site. On y positionne l'emplacement des différents blocs, le contenu, le logo, les bannières, etc...
Les templates Xoops, quant à eux, sont des fichiers ayant une extension html, ils sont "gérés" par les modules et sont destinés à assurer l'affichage et la présentation des données issues de ces modules.
L'utilisation du mot template dans le titre de cet article peut paraître impropre dans le monde xoops, mais c'est le mot qu'il vous faudra utiliser dans un moteur de recherche pour trouver des modèles. A la fin de cet article, vous trouverez quelques liens de téléchargement.

Comment est organisé un thème ?

Votre site dispose d'un répertoire themes dans lesquels sont stockés les différents thèmes. Chaque thème dispose donc d'un répertoire qui porte son nom (sans accent ni espaces) dans lequel on trouvera au minimum les fichiers suivants :

un fichier de gabarit : theme.html
une feuille de style principale : style.css, éventuellement des fichiers secondaires comme styleNN.css et styleMAC.css pour assurer la compatibilité avec d'autres navigateurs
éventuellement un répertoire images pour stocker les différentes images utilisées par le thème

2. Présentation du thème default

le thème default est l'un des thèmes qui est systématiquement présent dans les versions de xoops que vous téléchargez.
Après une image présentant son architecture, vous trouvez dans l'encart ci-après une version de ce thème dans laquelle ont été insérés des commentaires en français


<!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" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">

<head>

<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />

<meta http-equiv="content-language" content="<{$xoops_langcode}>" />

<meta name="robots" content="<{$xoops_meta_robots}>" />

<meta name="keywords" content="<{$xoops_meta_keywords}>" />

<meta name="description" content="<{$xoops_meta_description}>" />

<meta name="rating" content="<{$xoops_meta_rating}>" />

<meta name="author" content="<{$xoops_meta_author}>" />

<meta name="copyright" content="<{$xoops_meta_copyright}>" />

<meta name="generator" content="XOOPS" />

<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>

<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />

<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />

<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />

<!-- RMV: added module header -->

<{$xoops_module_header}>

<script type="text/javascript">

<!--

<{$xoops_js}>

//-->

</script>

</head>

<body>

  <table cellspacing="0">

    <tr id="header">

      <!-- Affichage du logo du site dont l'image est située dans le répertoire images à la racine de votre site -->

      <td id="headerlogo"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>logo.gif" width="150" height="80" alt="" /></a></td>

      <!-- Affichage d'une bannière aléatoire provenant de la gestion intégrée des bannières dans Xoops -->

      <td id="headerbanner"><{$xoops_banner}></td>

    </tr>

    <tr>

      <td id="headerbar" colspan="2">&nbsp;</td>

    </tr>

  </table>



  <table cellspacing="0">

    <tr>

      <td id="leftcolumn">

        <!-- Début de la boucle pour affichage des blocs dans la colonne de gauche -->

        <{foreach item=block from=$xoops_lblocks}>

          <{include file="default/theme_blockleft.html"}>

        <{/foreach}>

        <!-- Fin de la boucle pour affichage des blocs dans la colonne de gauche -->



      </td>



      <td id="centercolumn">



        <!-- Test pour vérifier s'il faut afficher des blocs au centre de la page -->

        <{if $xoops_showcblock == 1}>



        <table cellspacing="0">

          <tr>

            <td id="centerCcolumn" colspan="2">



            <!-- Début de la boucle pour affichage des blocs centrés dans la colonne du milieu  -->

            <{foreach item=block from=$xoops_ccblocks}>

              <{include file="default/theme_blockcenter_c.html"}>

            <{/foreach}>

            <!-- Fin de la boucle pour affichage des blocs centrés dans la colonne du milieu -->



            </td>

          </tr>

          <tr>

            <td id="centerLcolumn">



            <!-- Début de la boucle pour affichage des blocs centrés-gauche dans la colonne du milieu -->

              <{foreach item=block from=$xoops_clblocks}>

                <{include file="default/theme_blockcenter_l.html"}>

              <{/foreach}>

            <!-- Fin de la boucle pour affichage des blocs centrés-gauche dans la colonne du milieu -->



            </td><td id="centerRcolumn">



            <!-- Début de la boucle pour affichage des blocs centrés-droit dans la colonne du milieu -->

              <{foreach item=block from=$xoops_crblocks}>

                <{include file="default/theme_blockcenter_r.html"}>

              <{/foreach}>

            <!-- Fin de la boucle pour affichage des blocs centrés-droit dans la colonne du milieu -->



            </td>

          </tr>

        </table>



        <{/if}>

        <!-- Fin du test sur l'affichage des blocs dans la colonne du milieu -->

    

    <!-- Affichage du contenu du module actuel -->

        <div id="content">

          <{$xoops_contents}>

        </div>

        <!-- fin de l'affichage du contenu du module actuel -->

      </td>



      <!-- test pour affichage éventuel de blocs dans la colonne droite -->

      <{if $xoops_showrblock == 1}>



      <td id="rightcolumn">

        <!-- Début de la boucle pour affichage des blocs dans la colonne de droite -->

        <{foreach item=block from=$xoops_rblocks}>

          <{include file="default/theme_blockright.html"}>

        <{/foreach}>

        <!-- Fin de la boucle pour affichage des blocs dans la colonne de droite -->

      </td>

     <!-- fin du test pour affichage éventuel de blocs dans la colonne droite -->

      <{/if}>



    </tr>

  </table>

   

   <!-- Affichage du pied de page -->

  <table cellspacing="0">

    <tr id="footerbar">

      <td><a href="https://www.frxoops.org/" target="_blank"><img src="<{$xoops_imageurl}>poweredby.gif" alt="" /></a></td>

    </tr>

  </table>

</body>

</html>

Les 25 premières lignes de ce fichier theme.html sont destinées à enregistrer les différentes balises nécessaires à l'identification de votre site et à son référencement. Les informations présentées sous cette forme <{$xoops_meta_description}> sont des balises Smarty. Ces variables sont alimentées automatiquement par le système, mais vous pouvez les personnaliser par les menus suivants :

Admin system, préférences, paramètres généraux : titre du site, slogan
Admin system, préférences, meta balises et pied de page

La lecture de la suite de ce code affiche clairement que l'alimentation des blocs s'effectue en positionnant des boucles (3 lignes à chaque fois) alors que l'affichage du contenu d'un module est tout simplement réalisé avec la formule <{$xoops_content}>.

A noter cependant que le thème défaut n'utilise pas les informations stockées pour le pied de page paramétrables dans le menu admin system, préférences, meta balises et pied de page. Pour les afficher, il suffit de positionner cette variable : <{$xoops_footer}>

3. Situation de départ

Dans l'image ci-dessous, vous avez un site tout simple avec :

un logo et une bannière dans l'en-tête
une colonne de gauche avec les blocs Menu Utilisateur, Menu Principal, Thèmes
un bloc articles récents du module news en position centrale
un bloc recherche situé en colonne de droite

Comme vous l'avez constaté cette présentation utilise jusqu'à présent le thème default qui est la référence.

Thème default

Alsacreations, animé par Raphael Goetter, propose différents tutoriels sur le langage xhtml/css dont une galerie de templates pour la mise en page de votre site. Pour cet article, j'ai choisi d'utiliser ce modèle

L'édition de fichier permet de comprendre sa construction. Après le doctype et les éléments de style, on y trouve les différents balises div qui vont constituer son architecture :

conteneur : c'est le bloc qui va contenir la totalité du site, sa taille est de 750 pixels, elle est définie dans le style
header : ce bloc représente la bannière supérieure
haut : cette partie est destinée à recevoir un menu horizontal qui sera situé sous la bannière
gauche et droite représentent bien évidemment les colonnes gauche et droite
centre est la partie qui affichera les blocs centrés et le contenu principal
pied quant à lui représente la partie inférieure de votre site

4. Mise en oeuvre

Nous allons commencer par créer un nouveau dossier dans le répertoire themes, appelons le xhtml.
Puis nous y enregistrons le fichier modele15.htm préalablement téléchargé sur Alsacréations. Renommons ce fichier en theme.html.
On termine cette étape en copiant les fichiers suivants du répertoire default :

style.css
styleNN.css
styleMAC.css
theme_blockcenter_c.html
theme_blockcenter_l.html
theme_blockcenter_r.html
theme_blockleft.html
theme_blockright.html

La suite de l'exercice va donc consister à aménager notre fichier theme.html pour le rendre compatible avec la norme Xoops.

4.1 Le fichier style.css

On va commencer par intégrer dans notre feuille de style (style.css) les classes et id qui sont dans notre fichier theme.html.
Ouvrons le fichier xthml/theme.html avec un éditeur de texte. Copier les lignes 8 à 93 pour les coller au tout début du fichier xhtml/style.css du même répertoire et sauvegarder ce fichier.

4.2 En-tête du fichier xhtml/theme.html

Dans votre fichier xhtml/theme.html supprimer toutes les lignes présentes avant la balise < body >
Ouvrez le fichier default/theme.html, copier les toutes les lignes jusqu'à la balise et coller les dans la partie supérieure de votre fichier xthml/theme.html.
Le début de votre fichier xhtml/theme.html doit donc ressembler à ceci :


<!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" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">

<head>

<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />

<meta http-equiv="content-language" content="<{$xoops_langcode}>" />

<meta name="robots" content="<{$xoops_meta_robots}>" />

<meta name="keywords" content="<{$xoops_meta_keywords}>" />

<meta name="description" content="<{$xoops_meta_description}>" />

<meta name="rating" content="<{$xoops_meta_rating}>" />

<meta name="author" content="<{$xoops_meta_author}>" />

<meta name="copyright" content="<{$xoops_meta_copyright}>" />

<meta name="generator" content="XOOPS" />

<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>

<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />

<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />

<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />

<!-- RMV: added module header -->

<{$xoops_module_header}>

<script type="text/javascript">

<!--

<{$xoops_js}>

//-->

</script>

</head>

<body>

<div id="conteneur">

      <div id="header">Header (modèle utilisant les positionnements flottants)<a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">

        (voir tous les modèles)</a>

      </div>....

4.3 Header

Toujours dans votre fichier xhtml/theme.html, retirons le texte dans la balise header pour y mettre les premiers éléments xoops. Pour avoir une couleur d'arrière-plan identique au thème default, nous allons éditer la feuille de style, rechercher la class header et remplacer la couleur #99CCCC par celle-ci : #2F5376;
On va positionner notre logo en trois étapes:

création d'un répertoire images dans notre dossier xhtml, puis on colle dedans le fichier logo.gif
dans le fichier xhtml/style.css on ajoute à la fin cet id :
#logo { background-image: url("images/logo.gif"); background-repeat: no-repeat; width: 150px; height: 80px; float: left; }
dans notre fichier xhtml/theme.html il nous reste plus qu'à faire appel à cet id pour le positionner


...

<div id="header">

  <div id="logo">&nbsp;</div>

...

Si vous souhaitez utiliser le système de bannières de Xoops pour afficher des bannières aléatoires, nous avons juste deux éléments à compléter:

dans la feuille de style, on ajoute un nouvel id comme ceci


#banniere {

    float: right;

    width: 468px;

    height: 60px;

    padding-right : 10px;

    padding-top : 10px;

}

puis on le positionne dans le fichier xhtml/theme.html à la suite du logo


<div id="header">

     <div id="logo">&nbsp;</div>

     <div id="banniere"><{$xoops_banner}></div>

</div>

4.4 Menu horizontal

Pour implémenter un menu horizontal, on va utiliser la solution proposée avec des listes pour en faire des éléments de menu, mais en l'enrichissant avec la variable smarty <{$xoops_url}> qui représente l'url de votre site, ce qui va donner :


<ul id="menuhaut">

      <li><a href="<{$xoops_url}>/index.php" target="_self"  title="Accueil">Accueil</a></li>

      <li><a href="<{$xoops_url}>/modules/news/" target="_self" title="Articles">Articles</a></li>

      <li><a href="<{$xoops_url}>/modules/mylinks/" target="_self" title="Liens">Liens</a></li>

      <li><a href="<{$xoops_url}>/modules/contact/" target="_self" title="Contact">Contact</a></li>

</ul>

En utilisant la variable smarty <{$xoops_url}>, cela vous évite d'écrire le chemin complet de votre site, et ce lien fonctionnera autant dans votre environnement de test (en local par exemple) que sur votre site web de production.

4.5 Colonnes gauche et droite

Il convient de commencer par retirer les commentaires écrits par Raphael afin d'y positionner notre boucle sur les blocs de gauche que nous allons récupérer dans le thème default. Avec votre éditeur de texte , ouvrez le fichier default/theme.html, copier la boucle d'affichage sur les blocs de gauche, ce qui donne ceci :


...

<div id="gauche">

<!-- Début de la boucle pour affichage des blocs dans la colonne de gauche -->

<{foreach item=block from=$xoops_lblocks}>

  <{include file="xhtml/theme_blockleft.html"}>

<{/foreach}>

</div>

<div id="droite">....

Effectuez la même opération pour les blocs de droite

4.6 Colonne centrale

Maintenant que vous avez assimilé comment positionner l'affichage des blocs de xoops, le reste n'est plus qu'un "jeu d'enfant". Il ne vous reste donc qu'à positionner les boucles sur les blocs centrés et la variable smarty pour afficher le contenu des modules.

4.7 Pied de page

Retirer le texte de présentation, et incorporez juste la variable <{$xoops_footer}>.

5. Premiers tests

Comme je vous imagine déjà très impatients de vérifier que ces quelques "copier/coller" vont vous permettre de créer un nouveau thème, nous allons donc modifier le paramétrage de notre site pour prendre en compte ce nouveau thème :

Menu administration, admin system, préférences, paramètres généraux, nous allons répondre oui à la question Mise à jour des fichiers du thèmes à partir du répertoire themes/ ?, afin que les mises à jour que nous manqueront pas de faire plus tard soient prises en compte.
Toujours sur cette même page, dans la partie thèmes sélectionnables, nous allons cocher les thèmes default et xhtml
comme il faut être prévoyant afin de ne pas se retrouver devant une page blanche, on va également activer sur cette même page, le mode debug (mode de mise au point : debug php)

Afin de pouvoir passer facilement du thème default à notre nouveau thème, nous allons activer le bloc thèmes, dans admin system, blocs, éditez le bloc thèmes, modifiez ses attributs afin qu'il soit visible et affiché sur toutes les pages.

Bon il faut se lancer et avoir un aperçu du résultat, clic sur le lien page d'accueil, puis sur le lien xhtml dans le bloc tuto, et voilà le résultat :

Et maintenant

Je vais malheureusement tempérer quelque peu votre ardeur, en effet s'il faut moins de 10 minutes pour effectuer ces opérations quand on en a compris les tenants et aboutissants, votre travail n'en est pas terminé pour autant.
Il va falloir par exemple :

adapter la couleur de fond des colonnes, du pied de page, etc.. à votre goût
définir la présentation du titre des blocs
...tout compte fait, la boîte d'aspirine pourrait devenir nécessaire!

Le fichier default/theme.html utilise des fichiers externes pour l'affichage des blocs latéraux et centrés. Ce n'est pas une obligation, vous pouvez vous contenter de <{$block.title}> et <{$block.content}>

Quand vous serez satisfait du résultat, vous voudrez bien évidemment que ce nouveau thème soit votre thème par défaut. Allez dans le menu administration, admin system, préférences, paramètres généraux. Sur la ligne Thème par défaut sélectionnez dans la liste déroulante le nom de votre nouveau thème, puis répondez non à la question Mise à jour des fichiers du thèmes à partir du répertoire themes/ ? afin que votre thème soit mis en cache

Liens

Comme promis dans un chapître précédent voici quelques liens qui pourront vous aider:

Livre : Css2 : pratique du design web
CSS Creator est un site vous permettant de générer un template en ligne pour votre site (en anglais)
Open Source Web Design est un site sur lequel vous pouvez télécharger des templates. Utilisez la boite de recherche pour sélectionner des modèles xhtml/css

Conclusion

J'ai écrit cet article afin de vous faire bénéficier de ma modeste expérience, je vous serai gré de bien vouloir me pardonner à l'avance des incongruités qui auraient pu s'y glisser. Si vous souhaitez réagir à cet article, je vous invite à le faire plutôt dans ce forum que dans les commentaires.

Téléchargement des fichiers utilisés

Cet article provient de Communauté Francophone des Utilisateurs de Xoops
https://www.frxoops.org

L'adresse de cet article est :
https://www.frxoops.org/modules/news/article.php?storyid=829