4. Mise en oeuvreNous 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.cssOn 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.htmlDans 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 HeaderToujours 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:
...
<div id="header">
<div id="logo"> </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:
<div id="header">
<div id="logo"> </div>
<div id="banniere"><{$xoops_banner}></div>
</div>
4.4 Menu horizontalPour 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 droiteIl 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 centraleMaintenant 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 pageRetirer le texte de présentation, et incorporez juste la variable <{$xoops_footer}>. |