Déployer l'en-tête

Source : Pixabay

Le sujet du jour, personnaliser l'en-tête du blog et faire en sorte qu'il prenne toute la largeur de l'écran et non pas seulement la largeur du blog. C'est parti !

Avant toute chose, on n'oublie pas d'enregistrer son modèle. Une erreur est si vite arrivée. Avec la sauvegarde à l'abri sur son ordinateur, on peut toujours retourner en arrière en cas d'erreur. Comme ça, on ne "casse pas tout" sur son blog sans espoir de retour. Pour enregistrer son modèle, on va dans Tableau de bord → Modèle → Sauvegarder/Restaurer (en haut à droite) → Télécharger le modèle.

Pour travailler sur quelque chose d'agréable pour les yeux, on change dès à présent la couleur du fond de l'en-tête. Pour cela, on va dans Tableau de bord → Modèle → Personnaliser. L'outil de création de modèles de Blogger s'ouvre. On choisit alors dans le menu à gauche l'élément Avancé → Arrière-plans , puis, Arrière-plan de l'en-tête. Ici, la couleur appliquée à l'arrière-plan de l'en-tête est #294094. Avant de quitter l'outil de création de modèles de Blogger, on clique sur Appliquer au blog et puis sur Retour à Blogger.

A ce stade, l'aspect du blog ressemble à ça :

On passe maintenant aux choses sérieuses. On va enfin déployer l'en-tête du blog afin que celle-ci fasse 100% de la largeur de l'écran et ne soit plus seulement limitée à la boite du blog. Cette modification requiert un travail dans le code html du blog-même. Et donc, on ouvre l'éditeur de modèle en allant dans Tableau de bord → Modèle → Modifier le code HTML.

Une fois, l'éditeur html ouvert, cliquez n'importe où dans la boite de code et faites ctrl+f. Dans la boite de recherche, taper <header>. Cliquer sur le numéro de la ligne où se trouve la balise <header>, cela ferme la balise. On voit alors sur cette ligne <header>...</header>. Ensuite, coupez la portion de code comprise entre les balises <header>...</header> et collez-la dans un éditeur de texte. Puis, recherchez le code <div class='content-outer'>. A ce moment, collez le code <header> juste au-dessus de la ligne <div class='content-outer'>. Finalement, cliquez sur Enregistrer le modèle. Et voilà le résultat :

Le plus gros du travail est fait. Seulement, il reste quelques petits détails à corriger. Parce que, comme vous pouvez le voir, l'en-tête est plus large que le corps du blog mais ne prend pas l'entièreté de la largeur de l'écran. Il y a des bandes tout autour de l'en-tête qui ne sont pas du tout esthétiques.

Attaquons-nous d'abord aux espaces à gauche et à droite de l'en-tête. Pour les supprimer, on suit ces quelques étapes. On recherche d'abord le code <b:skin>. S'il y a un triangle noir à côté du numéro de la ligne avec <b:skin>, alors on clique sur le triangle pour déployer la balise. Sinon, cela signifie que la balise est déjà ouverte et on peut passer directement à l'étape suivante. Recherchez la portion de code /* Content. Sous cette ligne, dans la partie body{ ... } et sur la ligne commençant par padding:, effacez ce qu'il faut pour obtenir le code padding:0;. Attention, veuillez à ne pas supprimer le point-virgule à la fin de la ligne ! Une fois les espaces à gauche et à droite enlevés, on obtient donc ça :

Il y a aussi un espace bizarre au-dessus de l'en-tête. En effet, celui-ci est dû au fait qu'on n'affiche pas la navbar. Or, celle-ci n'a pas disparu en fait mais juste non visible. Il faut donc trouver un "truc" pour qu'elle ne nous gêne pas plus longtemps. Pour cela, recherchez le code </b:skin>. Une fois trouvé, juste au-dessus de la ligne ]]></b:skin<, ajouter ce code : body .navbar{ height: 0; }. Et hop, l'en-tête est bien collé au bord supérieur de l'écran :

C'est presque fini. Il reste encore à centrer le titre parce que tout isolé à gauche, ce n'est pas très joli. Pour cela, recherchez le code .Header h1 { et ajoutez la propriété text-align:center; juste sous cette ligne-là. Petit plus, pour ajouter de l'espace autour du titre (à l'intérieur de sa boite), ajouter la ligne padding:0.3em; sous la ligne .Header h1 {.

Le titre est trop long et n'est pas aligné sur la partie centrale du blog? Il faut alors faire en sorte que le titre ne puisse jamais sortir de la partie centrale du blog. Ainsi, cherchez le code </b:template-skin>. Avant la ligne ]]></b:template-skin>, collez le code .header-outer{ width: $(content.width); margin: 0 auto; }. Si jamais les bords ne sont pas de la couleur du header, ajouter la ligne header{ background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; } sous la partie /* Header .

Et voilà, nous avons sorti la tête du blog et arrangé le tout pour que ce soit plus joli. C'est fini pour aujourd'hui. A la prochaine pour la suite de l'histoire de ce blog !