Préambule

L'explication donnée pour ce changement partira du thème par défaut de la version 1.2.1 de DotClear. Il nécessitera quelques aménagements en fonction du thème que vous utilisez mais si vous prenez le temps de comprendre la démarche, cette adaptation ne devrait pas vous poser de problèmes.

Ce billet figurant dans la catégorie Premiers pas je ne décrirai que des méthodes simples de personnalisation.

Comprendre

Le contenu

Actuellement le code du top de votre page se présente de la façon suivante :

<div id="top">
	<h1><a href="<?php dcInfo('url'); ?>"><?php dcInfo(); ?></a></h1>
</div>

Soit : une boîte top contenant un titre de niveau h1 (hiérarchiquement le plus élevé). Ce titre est constitué d'un lien pointant vers l'url de votre blog et portant le nom de votre blog. Ces deux éléments : lien vers l'accueil et nom du blog devront être préservés pour conserver l'ergonomie et l'accessibilité de votre blog.

La mise en forme

En regroupant les mises en forme déclarées dans layout.css et dans style.css voici les règles appliquées au top :

#top{
	height: 120px;
	background: #FFF url(img/top.png) no-repeat left top;
}

#top h1{
	height: 80px;
	line-height: 80px;
	margin: 0 0 0 40px;
	padding-top: 20px;
	color: #FFFFFF;
}

#top h1 a{
	text-decoration: none;
	color: #FFFFFF;
}

cliquez pour agrandir

L'image signalée en fond du top (top.png) mesure 780 pixels de large et 120 pixels de haut. Notez que la boîte top est déclarée à 120 pixels de hauteur également. Si l'on ouvre le fichier layout.css on observera que #top est déclaré avec margin : 0; padding : 0; et que la #page est déclarée à 780px de large (toujours avec margin : 0; padding : 0;). Ainsi, le fond « remplit » complètement le top.

Les règles appliquées à #top h1 et #top h1 a concernent la typographie du titre.

Modifier

Youhou ?! Vous n'avez pas oublié que le thème par défaut doit rester tel qu'au jour de sa naissance n'est-ce pas ? Donc, la première chose à faire est de créer son propre thème. On va faire simple :

  • duplication du répertoire themes/default/ au grand complet
  • on renomme ce répertoire en kilebo
  • ouverture du fichier desc.xml et remplacement des occurrences default par kilebo
  • sélection de ce tout nouveau thème en thème actif via l'onglet Outils - Gestionnaire de thèmes

Remplacer l'image de fond en conservant la typo

C'est la méthode la plus facile. Créez une image à votre goût de 780px sur 120px, enregistrez-la au format png, nommez-la top.png. Placez cette nouvelle image à la place de celle du répertoire /themes/kilebo/img/top.png

Rafraîchissez l'affichage de votre page dans votre navigateur préféré... Wahou ! C'est bôôô !

Si vous le souhaitez, vous pouvez modifier quelque peu les caractères et la couleur du titre dans les règles de #top h1 et top h1 a, déclarer une famille de caractères différente de celle du reste de la page. Bref, vous savez tout ça depuis votre fort instructive lecture de Votre blog à vos couleurs, n'est-ce pas ?

Une bannière cliquable

Ça se complique, mais on va y arriver. Commencez déjà par réaliser votre bandeau 780px*120px avec votre titraille incrustée, nommez-le comme vous voulez. Puisque cette image doit servir de lien, nous allons la placer dans la source.

Dans le fichier template.php, remplacez les lignes citées dans la première partie de ce billet par :

<div id="top">
	<h1><a href="<?php dcInfo('url'); ?>"><img src="<?php dcInfo('theme'); ?>/mon_répertoire_images_de_mon_thème/mon_nouveau_bandeau.png" alt="<?php dcInfo(); ?>" /></a></h1>
</div>

Ensuite, il va falloir retirer l'image de fond d'origine et supprimer les informations de présentation typographiques du titre, devenues inutiles. Ouvrir la feuille de style (style.css) et remplacer le code cité au début de ce billet par :

#top{
	height: 120px;
}

#top h1{
	height: 120px;
	margin : 0;
	padding : 0;
}
Remarque importante

Si nous avons pris soin de renseigner la balise alt de notre nouveau code, c'est afin que l'information du titre du blog apparaisse aux navigateurs oraux, aux navigateurs ayant désactivé l'affichage des images et diverses autres fonctionnalités qui ne vous apparaissent pas si vous êtes en bonne santé et équipés de matériel moderne mais qui manqueraient cruellement dans un cybercafé de Bamako ou pour les utilisateurs de Lynx.

Extrapolations

Maintenant que vous en avez compris le principe vous pouvez bien entendu varier la hauteur de l'image en la répercutant dans les déclarations de #top et #top h1. Pensez aussi que votre image peut être plus petite et se fondre dans un arrière-plan de couleur et autres variations possibles...

Si vous vous êtes servis de l'une ou l'autre de ces personnalisations de bannière, faites-le savoir dans les commentaires, je mettrai un lien vers votre blog à titre d'exemple.