Maintenant que nous avons notre template, une bonne partie du travail est faite. Il reste à traiter le contenu des pages de notre annuaire mais il s’agit somme toute de fignolage.
Dans notre fichier header.html, on trouve à la fin cette ligne :
<div id="content"> (notez que la balise est refermée dans le fichier footer.html)
Il s’agit du conteneur de contenu dont il va falloir ajuster la position et les dimensions dans notre fichier style.css, en tenant compte du fait que l’on n’a plus qu’une seule colonne latérale et de la largeur de celle-ci.
Dans Fresh, le design est fluide et varie de 760px à 1200px en largeur, les colonnes latérales gauche et droite font 170 px de largeur d’où les valeurs suivantes :
#content {
margin:0 200px 0 200px; // #content doit être à 200px des bords gauche et droit
padding:20px 0 0 20px; // le contenu doit être à 20px des bords haut et gauche
}
ce qui donne :
(#content est bordé de rouge et son contenu de bleu pour repérage)
Dans Dum-Dum, le site fait 760px de large et la largeur de la colonne latérale droite est de 223px. On va donc donner les valeurs suivantes au #content :
#content {
margin:0 240px 0 0; // #content doit être à 240px du bord droit
padding:20px 0 0 20px; // le contenu doit être à 20px des bords haut et gauche
}
ce qui donne :
Ceci étant réglé, examinons le code d’un fichier essentiel dans le répertoire de notre thème qui se nomme main.html. Il permet de définir quel contenu doit être affiché selon que la page appelée est l’accueil ou une catégorie.
<{include file="header.html" }> //toutes les pages incluent l'en-tête du site
<div style="text-align: center;"> //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<{if isset($smarty.get.dir) }> // si l'on est dans une catégorie
<h1 style="text-align: center; font-size: 14px;"> //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<{$way_to_cat}> // on affiche le chemin de cette catégorie
</h1>
<br />
<{/if}>
<{include file="categories_alternate.html"}> //on inclut la liste des catégories
<hr style="background-color: #CCC; color: #CCC; border: 0px; height: 1px;" /> //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<br />
</div>
<{if !$smarty.get.dir}> //si la page affichée n'est pas une catégorie
<div style="text-align: center;"> //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<p style="border-bottom: 1px dashed #ccc;"> //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<{$lang.newsites}> //on affiche le titre Nouveautés
</p>
</div>
<br />
<{/if}>
<{if isset($nosite)}> //s'il n'y a aucun site inscrit
<div id="message" style="text-align: center;"> //mauvais. Il ne devrait jamais y avoir d'attributs de style en dehors de feuilles de style
<p>
<{$lang.nositeincat}> //on affiche le message "Il n'y a pas encore de site dans cette catégorie"
</p>
</div>
<{else}> //sinon (s'il y a au moins 1 site)
<{include file="sites.html"}> //on affiche la liste des sites
<{include file="pages.html"}> //on affiche la pagination s'il y a plusieurs pages
<{/if}>
<{include file="footer.html"}> // toutes les pages incluent le pied de page du site
Remarque : quand je signale que le code est mauvais parce qu’il ne devrait jamais y avoir d’attributs de style en dehors des feuilles de styles, ça ne veut pas dire que je condamne qui que ce soit de le faire. On fait ce qu’on peut parfois 
Occupons-nous d’abord de la page d’accueil.
Le contenu de la page d’accueil standard fait appel à deux autres fichiers :
- categories-alternate.html => liste des catégories
- sites.html => liste des sites inscrits en fonction des critères demandés
Si on laisse les styles de fresh, voici ce qu’on obtient :
Bon, ce n’est déjà pas si mal. Juste quelques petits changements de couleurs et d’images pour rendre les choses un peu plus dans le style du thème et ce sera très joli. Tiens, j’ai toujours rêvé d’inclure Garfield dans un thème, les couleurs s’y prêtent on dirait
Ressources en ligne sur cette page
