Fork me on GitHub

Page (1) 2 3 4 »

Xoopser un template xhtml/css en moins de 10mn

200510
Juillet
  Christian Documentations 35874

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

Anatomie du thème default
<!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}>" />
<!-- 
RMVadded 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="http://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}>

Note: 9.00 (4 votes) - Noter cet article -
Page (1) 2 3 4 »

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article Ă  un ami
Les commentaires appartiennent Ă  leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Supporter Xoops
Inscrit le: 09/01/2005
De: Breizh
Contributions: 16972
Kris PostĂ© le: 11/07/2005 01:19  Mis Ă  jour: 11/07/2005 01:19
 Re: Xoopser un template xhtml/css en moins de 10mn
FĂ©licitations pour cet excellent tuto, qui va ravir les membres de frxoops.
J'ai mis moins de temps à faire mon thème que christian ses 4 pages de cours !!

Un article de professionnel
:tucartonnes:
Semi pro
Inscrit le: 06/01/2004
De: Non loin de Paris
Contributions: 666
zoullou PostĂ© le: 11/07/2005 10:46  Mis Ă  jour: 11/07/2005 10:46
 Re: Xoopser un template xhtml/css en moins de 10mn
Excelent tuto, va faloir que je m'en inspire, mais je croit que le plus dur c'est d'ajouter les block center/left et center/right :banana:
RĂ©gulier
Inscrit le: 09/07/2005
De: Les Sables 85
Contributions: 159
pwmac PostĂ© le: 12/07/2005 18:24  Mis Ă  jour: 12/07/2005 18:24
 Re: Xoopser un template xhtml/css en moins de 10mn
Tuto peut etre super mais pour moi il faut le ré-intituler :xhtml/css en moins de dix ans!!!!!
Trop compliqué pour moi, vous allez peut être raler, mais depuis que j'essaie d'installer mon site avec xoops, je ne trouve aucune explication SIMPLE et EXPLICITE pour un débutant.
Newbie
Inscrit le: 12/07/2005
De:
Contributions: 1
SuperDevy PostĂ© le: 12/07/2005 19:57  Mis Ă  jour: 12/07/2005 19:57
 Re: Xoopser un template xhtml/css en moins de 10mn
Génial, je commençais à démoraliser en voyant tous ces templates à base de tableau. Certain tutos appreinnement même à les utiliser !

Merci, je crois que que si cet article n'avait pas été là j'aurai abandonné Xoops ...
Anonyme PostĂ© le: 12/07/2005 21:15  Mis Ă  jour: 12/07/2005 21:15
 Re: Xoopser un template xhtml/css en moins de 10mn
pwmac,

A tu posé les questions sur les points qui te posent problèmes ?

A+
Hervé
Admin Frxoops
Inscrit le: 04/02/2003
De: Blois
Contributions: 3071
philou PostĂ© le: 12/07/2005 21:25  Mis Ă  jour: 12/07/2005 21:25
 Re: Xoopser un template xhtml/css en moins de 10mn
oups... Il me semble pourtant que c'est très simplement expliqué.
Tu as essayé de suivre à la lettre ?
RĂ©gulier
Inscrit le: 09/07/2005
De: Les Sables 85
Contributions: 159
pwmac PostĂ© le: 12/07/2005 23:13  Mis Ă  jour: 12/07/2005 23:13
 Re: Xoopser un template xhtml/css en moins de 10mn
bonsoir Ă  tous

Le pb c'est que je suis trop habitué a dreamweaver (qui m'a permis de construire mon site) non pas que dreamweaver soit simple mais plus abordable pour moi .
Mon pb consiste en un point capital, c'est que je ne comprend rien au language php,(il faut dire que je ne fais pas partie de la génération qui assimile aussi facilement que vous) et franchement les questions/réponses des forums ne m'apprennent rien du tout, il faut se rendre sur un autre article, etc etc ... trop pointu.
Puisque nous sommes dans les confidences, je n'ai pas trouvé un seul screnshoot qui me dise ce qu'est:
-un bloc
-une section
-un article etc etc.
Même pour un malheureux album, je ne saisi pas la façon de faire des sous menus, alors que la case "inclure les sous dossiers est cochée !!!!!
Bien sur j'ai trouvé comment faire (pour certains) mais rien de vraiment concluant.
Malgré les efforts de titoine76 (encore merci) je
suis limite de décrocher, et me servir uniquement des modules xoops tel que sondages,(ou peut etre petites annonces)et de les intégrer dans mon site, puique ça au moins j'arrive à le faire.
Je pensais quand mĂŞme y arriver plus facilement.

Bon je vais m'arreter lĂ , si vous avez une VRAIE documentation Ă  me signaler........

Merci
Semi pro
Inscrit le: 06/01/2004
De: Non loin de Paris
Contributions: 666
zoullou PostĂ© le: 13/07/2005 00:16  Mis Ă  jour: 13/07/2005 00:17
 Re: Xoopser un template xhtml/css en moins de 10mn
Pas besoin de s'ennervé .
L'utilisation basique de XOOPS (installation et utilisation de module) n'est pas bien dure aprés un petit temps d'adaptation.
Par contre, il est sur qu'il faut avoir quelques connaissance en (X)HTML/CSS pour pouvoir modifier ou créer un thème, c'est comme si tu disais que tu n'arrive pas à réparer ta voiture alors que tu n'a aucune connaissance en mécanique.
Heureusement pour toi, les forums de XOOPS France sont là pour t'aider. Tu peut utiliser préalablement la fonction recherhcer (en haut à droite) et si tu ne trouve pas de réponse pose ta question, nous nous ferons un plaisir de te répondre.

A+

PS : Tout le monde est bénévole ici
Semi pro
Inscrit le: 05/04/2003
De:
Contributions: 1645
fooups PostĂ© le: 14/07/2005 09:00  Mis Ă  jour: 14/07/2005 09:00
 Re: Xoopser un template xhtml/css en moins de 10mn
Bonjour,

tout d'abord, les commentaires des articles ne sont pas mis en place pour faire du support, je vais donc devoir ĂŞtre bref .

Pour plus de connaissances en HTML/CSS, va voir (par exemple) les tutoriels sur developpez.com et pour en apprendre un peu plus sur le PHP (bien que cela ne soit absolument pas nécessaire, tant que tu ne souhaites pas modifier les fichiers de ton XOOPS, va regarder du côté du site du zero.

Je pense que cela devrait déjà te donner quelques bases.

@+
Supporter Xoops
Inscrit le: 13/05/2005
De: Le théíƒÂ¢tre de la vie
Contributions: 340
mediateur PostĂ© le: 24/07/2005 16:37  Mis Ă  jour: 24/07/2005 16:37
 Re: Xoopser un template xhtml/css en moins de 10mn
ça cartonne ce tuto !
merci !
RĂ©gulier
Inscrit le: 26/08/2005
De:
Contributions: 390
bobjean PostĂ© le: 26/08/2005 03:37  Mis Ă  jour: 26/08/2005 03:37
 Re: Xoopser un template xhtml/css en moins de 10mn
dsl mais je voi po kel fichier je doit telecharger sur le site alsacreation lol

voulez vous bien préciser s'il vous plait, je suis nouveau merci
Semi pro
Inscrit le: 05/04/2003
De:
Contributions: 1645
fooups PostĂ© le: 26/08/2005 09:16  Mis Ă  jour: 26/08/2005 09:16
 Re: Xoopser un template xhtml/css en moins de 10mn
Il faut regarder dans les gabarits ici

@+
Supporter Xoops
Inscrit le: 13/05/2005
De: Le théíƒÂ¢tre de la vie
Contributions: 340
mediateur PostĂ© le: 04/09/2005 09:09  Mis Ă  jour: 04/09/2005 09:09
 Re: Xoopser un template xhtml/css en moins de 10mn
J'utilise actuellement le travail réalisé par les autres et je grimpe au plafond quand je parviens à en faire des adaptations personnelles. Quand même, tjrs dans le même esprit, comme je me suis fortement intéressé aux thèmes, je me dis qu'il pourrais bien y avoir un utilitaire, style module de fabrication de thèmes, qui permettrait de ne rien oublier, étant donné qu'il y a des incontournables. Partant de modèles standards, ça serait possible de les faire à sa main, comme je le vois sur le système de blog de msn qui en est à proposer des trucs simples en drag and drop.... Je sais, c'est facile de dire "J'aimerais..." A tout hasard, je le dis
Supporter Xoops
Inscrit le: 09/01/2005
De: Breizh
Contributions: 16972
Kris PostĂ© le: 04/09/2005 14:15  Mis Ă  jour: 04/09/2005 14:15
 Re: Xoopser un template xhtml/css en moins de 10mn
Pour les utilisateurs de dreamweaver il existe une extension, voir cet article sur xoops.org
Team FrXoops
Inscrit le: 01/11/2004
De:
Contributions: 1823
patz PostĂ© le: 06/09/2005 07:18  Mis Ă  jour: 06/09/2005 07:18
 Re: Xoopser un template xhtml/css en moins de 10mn
super article comme d'habitude (même moi j'y suis arrivé c'est dire)mais comme je suis un peu flemmard j'ai trouvé ce site csscreatoravec la page 1 qui permet de creer untemplate css en ligne en complétant des champs et celle-ci pour le style css très sommaire de la page
Semi pro
Inscrit le: 27/08/2003
De: Perpignan
Contributions: 1255
Paul PostĂ© le: 27/11/2005 16:16  Mis Ă  jour: 27/11/2005 16:21
 Re: Xoopser un template xhtml/css en moins de 10mn
salut, d'abord bravo Ă  Christian...

Je viens de lire la réflexion de pwmac au sujet de dreamweaver... juste pour te dire que :
tu n'as pas à trop comprendre le html pour faire un thème mais plutôt le css, qui est carrement éditable dans dream... ce qui te permet d'avoir le thème "en clair" (évidemment je parle des couleurs et images, pas du code...) et de changer les couleurs ou autres (fonction chercher remplacer #FFFFF par #EFEFEF par exemple)...
Voir la documentation de dreamweaver.
Aspirant
Inscrit le: 11/07/2008
De: France - 87 Haute Vienne
Contributions: 52
jeromehej PostĂ© le: 21/09/2010 20:46  Mis Ă  jour: 21/09/2010 20:46
 Re: Xoopser un template xhtml/css en moins de 10mn
Salut,
et ben, c'est super. Après avoir créé un template avec des tuto diverses dont Alsacréation, ce tuto m'a permis en peu de temps de l'adapter à xoops, tout au moins pour la base, c'est à dire hors design des blocks, forum,...
Merci beaucoup.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

42 Personne(s) en ligne (2 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 1 | Invité(s): 41 | Heyula, Plus ...