Personnaliser le header - 1. Le logo

Le logo en haut à gauche de tous les thèmes Ductile[1] est appelé dans le fichier ductile/tpl/_top.html à la ligne suivante :

<p id="logo" class="nosmall"><a href="{{tpl:BlogURL}}"><img src="{{tpl:BlogThemeURL}}/img/logo.png" alt="{{tpl:lang Home}}" /></a></p>

Ductile et ses variations permettent de choisir un logo personnel différent de celui proposé par défaut. Le plus simple (en attendant que le configurateur le permette depuis l’interface d’administration) est de remplacer le fichier logo.png se trouvant actuellement dans le répertoire ductile/img/ (ou ductileFocus/img, etc.) par l’image de votre logo et de le nommer à l’identique. Si votre image n’est pas plus haute que l’actuelle, vous en aurez fini là, par ce simple remplacement.

Mais vous voudrez peut-être introduire un logo plus haut et en ce cas il y aura quelques modifications à placer dans la feuille de style pour une présentation élégante. Voici un exemple de logo de 150px de large sur 130px de haut et le résultat que nous souhaitons obtenir. Comme vous le voyez, le logo occupe alors toute la hauteur du header et le reste vient se placer à sa droite :

logo_150-130.png

Étape 1

Nous commençons donc par placer le nouveau logo. Sans changer les CSS, ça donne ça :

logo_avant_css.png

Pas terrible hein ? On va donc intervenir sur le fichier style.css, section 4 Haut de page et sur le fichier mediaqueries.css, section Autres (plus de 480px)[2].

Étape 2

Dans style.css, on supprime la règle .supranav { clear: both; } et c’est déjà beaucoup mieux, mais le décalage du menu est assez disgrâcieux :

logo_apres-1.png

Or le menu n’est en réalité pas vraiment décalé, c’est simplement que les items ont une marge intérieure (padding) gauche, ce qu’on voit bien au survol, quand l’item de menu se voit doté d’un fond gris ; le décalage n’est alors que de quelques pixels :

logo_apres-2.png

Étape 3

On va donc changer un peu l’organisation dans l’espace de façon que le menu « au repos » soit aligné sur le titre. Ça se passe maintenant dans le fichier mediaqueries.css. Tout d’abord, on repère cette règle :

.supranav {
		margin: 36px 0 0;
		border-bottom: 1px solid #ccc;
		padding: 0 0 0 4px;
		}

Et on remplace la dernière ligne par padding: 0;. Voilà pour les 4 pixels de décalage à gauche sur l’ensemble du bloc de menu. Les items ont eux aussi un décalage de 4 pixels à gauche, que nous corrigeons ici, en supprimant tout simplement la dernière ligne padding-left: 4px; :

.supranav li {
		display: inline;
		padding: 8px 0;
		padding-left: 4px;
		}

Étape 4, premier essai

Il ne reste plus qu’à s’occuper du décalage sur le lien lui-même (celui qui prend le fond gris au survol). Ça se passe dans ce bloc de règles-là, à la ligne définissant le padding (dans l’ordre : en haut, à droite, en bas, à gauche) :

.supranav li a {
		display: inline-block;
		vertical-align: top;
		padding: 8px 32px 8px 28px;
		border-right: 1px solid #ccc;
		min-height: 2.5em;
		-webkit-border-radius: 0 0 0 4px;
		-moz-border-radius: 0 0 0 4px;
		-o-border-radius: 0 0 0 4px;
		-ms-border-radius: 0 0 0 4px;
		-khtml-border-radius: 0 0 0 4px;
		border-radius: 0 0 0 4px;	
	 	}

Premier essai, on enlève le padding à gauche et on le remplace par un margin à droite, en remplaçant la ligne padding: 8px 32px 8px 28px; par les deux lignes suivantes :

padding: 8px 32px 8px 0;
margin-right: 28px;

Aaaaaaah, voilà ! Quoique… Si c’est impec au repos, ça n’est vraiment pas joli au survol n’est-ce pas ?

logo_apres-3.png

Étape 4, second essai

On renonce donc à cette méthode et l’on revient sur l’étape 4 pour se retrouver à la fin de l’étape 3. Finalement, à bien y réfléchir, il n’y a que le premier item qui nous cause du souci, pour les autres leur présentation ne posait pas de problèmes. On va donc ne supprimer le padding de gauche que sur le premier item. Or le plugin simpleMenu dote chaque item d’une classe portant le numéro d’ordre (en l’occurrence li-1) et marque même le premier item d’une classe supplémentaire li-first. Il va donc nous être facile de ne viser que celui-là en ajoutant sous le bloc de règle sus-cité un bloc supplémentaire ne concernant que ce premier item. Pour des raisons esthétiques (ça ne serait pas joli si le fond gris collait tout à fait au bord gauche des lettres) on en laisse quand même un tout petit au lieu de le remettre à zéro, puis on redécale le tout à gauche pour l’alignement (vous pouvez adapter cette valeur à votre guise, pour peu que vous mettiez la même sur les deux lignes) :

.supranav li.li-first a {
		padding-left: 4px;
		margin-left: -4px;
		}

Hourra, on le tient cette fois ! Voyons ça :

logo_apres-4-1.png

logo_apres-4-2.png

Et maintenant c’est nickel, vous pouvez aller faire des pâtés de sable à la plage !

Notes

[1] Ce logo est supprimé de l’affichage sur les tout petits écrans tels deux des mobiles.

[2] Comme indiqué dans la note précédente, le logo n’apparaît que sur les résolutions supérieures à 480px, c’est donc là que j’ai placé les règles le concernant.