Via SiM07

Un bel exemple de mixité sociale :

« Un appartement de 240 mètres carrés sur deux niveaux au sein d'un hôtel particulier de la place des Vosges, à Paris, vient de trouver de nouveaux acquéreurs. Il s'agit de Dominique Strauss-Kahn et de sa femme, Anne Sinclair. Le prix de la transaction s'élèverait à plus de 4 millions d'euros. Le candidat à la présidence du FMI aura pour voisin Jack Lang, propriétaire depuis 1984 de 165 mètres carrés donnant sur l'ancienne place Royale. »

Source : Le Point (n° 1819 du 26 juillet 2007)

On poursuit nos tutos de personnalisation d'un Cowblog avec la création d'un entête (bannière) personnalisé.

Dans la mesure où les deux premières parties sont en tous points identiques à celles concernant la création d'un menu perso en haut du blog, je vous invite à vous reporter directement aux articles : Menu perso en haut du blog et Menu perso en haut du blog (2)

On se trouve donc avec un blog qui ressemble à :

On va maintenant "remonter" notre code HTML libre dans le code source de la page du blog, pour le "sortir" du menu (#nav) et le placer au niveau de la bannière classique (#top), immédiatement avant le #main.

Pour cela, il nous faut fermer cinq balises DIV et les rouvrir ensuite afin de se repositionner dans le flux normal du blog.

Notre code HTML libre devient (le saisir tel quel sur la page comme précédemment) :

</div></div></div></div></div>
on insère le bloc "code html libre" en première position
<div id="main"><div id="nav"><div id="nav-content"><div><div>

Le résultat :

On a bien remonté notre code HTML libre, ce qui a créé un grand espace avec la bannière, c'est normal.

Ce qui nous gêne, ce sont les propriétés du menu classique du blog, toujours présentes.

Pas d'autre solution (à ma connaissance) que de renommer le menu "classique" du blog #nav en ce que vous voulez, par ex. #nav1.

Pour cela, il faut renommer, dans la feuille de styles, tout ce qui commence par #nav (sauf ce qui commence par #nav-box) en #nav1 par exemple.

Attention donc si vous faites une modification automatique avec un éditeur de textes, pensez ensuite à renommer ce qui commence par #nav1-box en #nav-box.

Il nous reste à supprimer l'affichage de la bannière classique, de l'ancien menu et à reporter une propriété du menu définie par la feuille de base de Cowblog en ajoutant, à la fin de la feuille de styles :

#top { display:none; }
#nav { display:none; }
#nav1 { overflow:hidden; }

Il faut également adapter le code html libre (nav en nav1 et nav-content en nav1-content) :

</div></div></div></div></div>
on insère le bloc "code html libre" en première position
<div id="main"><div id="nav1"><div id="nav1-content"><div><div>

Résultat :

On a maintenant retrouvé notre menu classique et la ligne qui va nous servir à définir notre entête.

Afin de pouvoir la personnaliser dans la feuille de styles, on va lui attribuer un identifiant, par exemple 'entete' :

</div></div></div></div></div>
<div id="entete">
on insère le bloc "code html libre" en première position
</div>
<div id="main"><div id="nav1"><div id="nav1-content"><div><div>

Libre à vous maintenant, de personnaliser cet entête.