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èmeUn 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 defaultle 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"> </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}> |
39818
Re: Xoopser un template xhtml/css en moins de 10mn
Re: Xoopser un template xhtml/css en moins de 10mn
