Même si l'un des thèmes proposés par DotClear ou par ses utilisateurs vous convient parfaitement, il y a de fortes chances que vous vouliez en personnaliser le contenu par l'ajout ou la suppression d'éléments composant votre page. À titre d'exemple, détaillons l'ajout de votre nom au pied de la page, l'ajout d'infos personnelles dans le menu latéral (sidebar) ou le retrait du calendrier des billets dans ce même menu latéral. Pour les uns comme pour les autres, tout se passe dans le fichier template.php.

Rappel : Si ce fichier n'est pas présent dans le répertoire de votre thème, copiez-le ainsi que tous les fichiers portant l'extension .php du répertoire themes/default vers celui du thème que vous utilisez.

Ajouter un p'tit truc

Tout en bas de la page de votre blogue, vous voyez la ligne "propulsé par dotclear". Cela peut-être un bon endroit pour y placer vos propres informations. Dans les dernières lignes du template.php vous trouverez ceci :

<p id="footer"><a href="http://www.dotclear.net/">
propuls&eacute; par DotClear</a></p>

Vous pouvez y ajouter votre nom par exemple :

<p id="footer">Le blog de Tartempion est <a href="http://www.dotclear.net/">
propuls&eacute; par DotClear</a></p>

Et même votre adresse mail :

<p id="footer">Le blog de <a href="mailto:tartempion@bidule.truc">Tartempion</a> est <a href="http://www.dotclear.net/">propuls&eacute; par DotClear</a></p>

Ajouter un gros truc

Mais peut-être voulez-vous ajouter non quelques mots mais carrément une boîte ? Prenons par exemple le cas de l'ajout d'une sorte de fiche d'identité dans le menu latéral.

Poupées russes

Comme on peut le constater en observant les pages de radiographie ou de template commenté, la structure d'une page est faite d'emboîtement d'éléments. Ainsi, le menu latéral (sidebar) est une grande boîte comprise dans la boîte page. Le sidebar contient d'autres boîtes : calendar, selection, categories, etc. Le début d'une boîte est signalé par le code <div id="nom-de-la-boite"> et sa fermeture par </div>.

Organisation générale

Voyons les grandes boîtes composant le blog :

shema des boites

  • <div id="page"> début de la page
    • <div id ="top"> [...] </div> Entête
    • <div id="main"> début de la partie principale (contient les billets)
      • <div id="content> debut de la boite intérieure de cette partie principale
        • <div class="post"> [...] </div> un billet
        • <div class="post"> [...] </div> un autre billet
        • <div class="post"> [...] </div> un autre billet (etc.)
      • </div> fermeture du content
    • </div> fermeture du main
    • <div id="sidebar"> début du menu latéral
      • <div id="search"> [...] </div> recherche
      • <div id="calendar"> [...] </div> calendrier des billets
      • <div id="selection"> [...] </div> à retenir
      • <div id="categories"> [...] </div> catégories
      • <div id="archives"> [...] </div> archives
      • <div id="links"> [...] </div> liens
      • <div id="syndicate"> [...] </div> syndication
    • </div> fermeture de sidebar
    • <p id="footer"> [...] </p> pied de page
  • </div> fermeture de la page.

Revenons à notre exemple : pour ajouter un bloc (une boîte, une div) contenant quelques informations personnelles en haut du menu, il faudra alors ajouter une boîte au-dessus de la recherche avec sa balise d'ouverture et sa balise de fermeture :

<div id="infoperso"> [...] </div>

Puis de la remplir avec le contenu de votre choix. Un exemple :

<div id="infoperso"> <!-- ouverture de la boîte -->
     <h2>Informations personnelles</h2> <!-- un titre -->
          <ul><li>Mon nom : Tartempion</li>
              <li>Ma photo <img src="url-vers-mon-portrait" alt="voici ma photo" /></li>
              <li>M'écrire : tartempion[at]fournisseur.ext</li>
          </ul>
</div> <!-- fermeture de la boite des informations personnelles -->
Remarque

J'ai choisi pour cet exemple l'ajout d'une liste (reconnaissable aux balises <ul> (la liste) et <li> (ses items) mais il aurait pu bien sûr s'agir de simples paragraphes, auquel cas on utiliserait pour chaque paragraphe les balises <p> au début et </p> à la fin.

Retirer un machin

Pour retirer un élément de la page, il vous suffira de repérer cet élément dans le fichier template.php et de supprimer ces lignes, ouverture et fermeture comprises. Ainsi, pour supprimer le calendrier des billets on enlèvera la portion suivante :

	<div id="calendar">
	   <h2>Calendrier</h2>
	   <?php #Affichage du calendrier
	   dcCalendar('<table summary="Calendrier">%s</table>'); ?>
	   <span></span>
	</div>