FreeGlobes : Personnaliser son thème, on affine quelques pages

Le design de notre page d’accueil est maintenant bien avancé et si vous regardez votre annuaire en cours, vous verrez que les pages faisant appel au fichier sites.html sont pratiquement terminées.

Finissons-en avec cette série de pages : Nouveautés, Top Rank, Top Hits, Top Votes, Tag (la page qui s’affiche après une recherche par tag), Résultat de recherche.

Si vous ouvrez chaque page concernée dans Fresh, vous voyez que le titre se présente de cette façon :

<div id="message" style="text-align: center;"><{Titre de la page}></div>

Remplacez ce code dans votre thème Dum-Dum par :

<h2><{Titre de la page}></h2>

Voici le style de la balise h2 du contenu du site dans notre fichier style.css :

#content h2 {
color: #8D6649;			//couleur de caractère
font-family: "Trebuchet MS";	//police de caractère
font-size: 19px;			//taille de caractère
font-weight: normal;		//texte normal
font-variant: normal;		//police normale
text-align:center;			//centrage du texte
margin-bottom :1em ;			//marge de 1em sous le titre
}

C’est mon côté tatillon, mais en même temps il y a une explication. La balise “H” est utilisée pour les titres et le chiffre qui suit (de 1 à 6) indique la signification de ce titre dans la page. Il est donc logique de l’utiliser dans ce cas-là.

Remarque : pour une structure correcte de nos pages, nous devrions utiliser le balisage suivant :

<h1>Titre du site</h1>
<h2>Description du site</h2>
<h3>Titre des pages et des blocs dans la colonne latérale</h3>

Mais ce balisage ne peut pas être utilisé avec FreeGlobes car le titre des plugins fait appel à la balise h2 codée en dur dans les extensions. Nous utiliserons donc la structure suivante :

<h1>Titre du site</h1>
<h2>Description du site, Titre des pages et des blocs dans la colonne latérale</h2>

Voilà, normalement vos pages Nouveautés, Top Rank, Top Votes, Top Hits, Recherche par tag et Résultats de recherche devraient être terminées.

D’autres pages sont faciles à finir et nous allons les faire de suite, histoire de s’en débarrasser.

Catégories (allcats.html)
Remplacez :

<div id="message" style="text-align: center;">
<{$lang.allcats}>
</div>
<br />

par

<h2><{$lang.allcats}></h2>

Recherches (keywords.html)
Remplacez :

<div id="message" style="text-align: center;">
<{$lang.top_search}>
</div>
<br />

par

<h2><{$lang.top_search}></h2>

Profitez-en aussi pour remplacer dans cette page et dans toutes celles où vous trouverez ce code (qui correspond à la pagination au cas où le nombre de sites affichés nécessiterait plusieurs pages) :

<div style="text-align: center;">
<{$pagenav}>
</div>

par

<div class="pagenav"><{$pagenav}></div>

Vous définirez la nouvelle classe .pagenav dans votre style.css ainsi :

.pagenav {
text-align :center ;	//centrage du texte
margin :1.5em 0 ;	//marge au-dessus et au-dessous de la navigation par page
}

Résultats de recherche par formulaire (recherche.html)
Remplacez :

<div id="message" style="text-align: center;">
<{$total_results}>&amp;amp;nbsp;<{$resultsfor}>&amp;amp;nbsp;
<h1><{$searched_expr}></h1>
</div>
<br />

par

<h2><{$total_results}>&amp;amp;nbsp;<{$resultsfor}>&amp;amp;nbsp;<{$searched_expr}></h2>

Recherche par tag (tag.html)
Remplacez :

<div id="contenu">
<div id="tag" style="text-align: center;">
<{$sites|@count}> <{$lang.sites_for_this_tag}> : <h1 style="display: inline; font-size: 14px;"><{$tag}></h1>
</div>
<br />
<br />
<{include file="sites.html"}>
</div>

par

<h2><{$sites|@count}> <{$lang.sites_for_this_tag}> : <{$tag}></h2>
<{include file="sites.html"}>

Contact (contact.html)
Après <{include file=”header.html” }>

Ajoutez :

<h2>Contactez-nous</h2>

Le formulaire est défini dans notre style.css par :

#content form {
padding:10px;
border:1px dotted #ccc;
}
#content label {
display:block;
font-weight:bold;
color:#444;
margin:5px 0;
}
#content input {
padding: 2px;
margin: 2px;
border :1px dotted #ccc;
font:90% Verdana;
color:#666;
}
#content textarea {
padding:4px;
font:90% Verdana;
border:1px solid #eee;
height:200px;
display:block;
color:#777;
}

Ces attributs s’appliquant également aux formulaires de soumission de sites et à la page boost.html, on verra à faire quelques modifications spécifiques à ces derniers.

Soumissions fermées (submission_closed.html)
Remplacez :

<br />
<div style="text-align: center;">
<p style="color: red; font-size: 14px;"><{$lang.submission_closed}></p> <{$lang.submission_closed_help}>
</div>
<br />

par

<h2><{$lang.submission_closed}></h2>
<p><{$lang.submission_closed_help}></p>

Confirmation de soumission (confirmation.html)
Remplacez :

<div id="message">
<{$message}>
</div>

par

<p><{$message}></p>

La page d’erreur 404 (404.html)
Remplacez :

<br />
<div align="center">
<font-size=5; color="red;"><{$lang.error404}></font><br /> <{$lang.error404_help}></div>

par

<h2><{$lang.error404}></h2>
<p><{$lang.error404_help}></p>

En ce qui concerne cette dernière, pour que l’internaute tombe dessus s’il fait une erreur sur votre site, il faut ajouter dans votre fichier .htaccess à la racine de votre annuaire :

ErrorDocument 404 http://adresse-de-votre-site/index.php?do=404

Voilà, je ne crois pas avoir oublié grand-chose mais si c’était le cas, n’hésitez pas à le signaler dans les commentaires.

La prochaine fois, nous nous occuperons des pages de soumission des sites.

Bonne journée à tous

Ressources en ligne sur cette page