Pour le moment, il n'est pas possible de modifier directement l'en-tête de son blog. il contient la petite image du blog, son titre, et sa description, point. Impossible d'y mettre une grande image qui sert de bannière ou une barre de navigation, par exemple, comme on pourrait le souhaiter. Le Suprême qui s'occupe de faire évoluer KarmaOS a dit que ça allait venir, mais en attendant, si vous le voulez bien, on va mettre les mains dans le cambouis.

Si vous voulez seulement ajouter une bannière en haut de votre blog, comme sur le blog de Matys on va "simplement" modifier le CSS de votre page. Hé, mais revenez, c'est simple ! Si vous voulez ajouter une barre de navigation ou des trucs plus bizarres encore, comme sur Culture Kaamelott va falloir jouer au javascript, mais aussi regarder la note suivante ! Ajoutons d'abord une bannière seule.

L'espace que prend votre blog en largeur mesure initialement 760px. Pour votre bannière, vous devriez donc avoir une image de cette largeur, ça sera plus beau.

Imaginons maintenant que votre bannière mesure 200 pixels de hauteur (et 760 de largeur). Il faut agrandir l'en-tête de votre blog afin que la bannière soit entière et ne dépasse pas sur vos notes. Nous allons faire cette modification et ajouter la bannière. Ajoutez à la feuille de style CSS de votre blog cette ligne :

#head {height: 200px; background: url(http://votreblog.karmaos.com/Image/votrebanniere.jpg);  padding: 0;}

Ainsi, nous fixons la hauteur de l'en-tête à la hauteur de la bannière (height: 200px;), et nous précisons que le fond de l'en-tête est l'image qui se trouve à l'url http://votreblog.karmaos.com/Image/votrebanniere.jpg. Bien sûr, modifiez cette URL en la remplaçant par celle de votre bannière. Dernière chose, nous disons au bloc d'en-tête de se coller à son contenu (padding: 0;).

Déjà en sauvegardant, vous pouvez admirer votre bannière ! Reste que les éléments qui étaient là avant elle restent par dessus ! On va leur signaler qu'ils ne sont plus les bienvenus :

#head img, #head p, #head h1 {display: none;}

Et voilà, vous avez une belle bannière !

Mais j'en entends qui râlent, "et mon lien vers la page d'accueil, il ne marche plus !". C'est vrai, mais c'est réparable ! A la place de ce que vous avez ajouté à la dernière étape, ajoutez plutot ceci :

#head img, #head p {display: none;}
#head h1 {opacity: 0;}
#head h1 a {display: block; height: 200px; width: 760px;}

Dans ce code, on efface l'image et la description du blog, comme avant. Par contre, on laisse le titre du blog (#head h1), mais on lui dit d'être totalement transparent (opacity 0;) ! Vous ne le voyez pas, mais il est toujours là, et le lien qu'il porte (#head h1 a) aussi ! on dit ensuite à ce lien de s'afficher comme un bloc (display: block;), et de prendre la même taille que l'image (height: 200px; width: 760px;). Ainsi, le lien recouvre l'image sans qu'on ne voie le texte !

Ch'est bieau, non ?!