Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Ce petit encadré gris qui s'affiche quand vous faites une recherche de libellé vous agace ? Aujourd'hui je vais vous expliquer comment personnaliser son apparence, et le supprimer si vraiment il vous sort par les yeux ^^

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

C'est parti pour les explications !

Sauvegarde de votre thème

Je vous conseil fortement de faire une sauvegarde avant toute modification, comme toujours. C'est vraiment indispensable si vous faites une erreur, car on peut facilement revenir en arrière.

Cliquez sur Modèle à partir de votre tableau de bord, puis sur Sauvegarder/Restaurer en haut à droite de l'écran.
Cliquez ensuite sur Télécharger le modèle complet et sauvegardez le fichier sur votre ordinateur :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

En cas d'erreur il suffira de cliquer sur Choisissez un fichier et de sélectionner ce fichier.

Où coller les codes pour supprimer/modifier l'encadré

Maintenant que votre sauvegarde est faite, cliquez sur Modèle à partir de votre tableau de bord puis sur Modifier le code HTML :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Cliquez sur le triangle noir à gauche de <b:skin>...</b:skin> :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte, passez à la suite.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.
Collez ici la première ligne des codes donnés et appuyez sur Entrer pour les trouver.

Supprimer l'encadré

Pour supprimer l'encadré, cherchez le code suivant :
/* Content
Au-dessus de cette ligne collez le code suivant :
.status-msg-wrap {
display: none !important;
}
Sauvegardez, et voilà ! L'affreux encadré à disparu ! ;)

Personnaliser l'apparence de l'encadré

Voici les codes CSS pour personnaliser l'apparence de l'encadré. Cherchez le code suivant :
/* Content
Et collez les codes avant cette ligne.

Nous allons voir comment :

Modifier ou supprimer la bordure

Ajouter le code suivant pour modifier la bordure :
.status-msg-border {
border-color: #D9EFF2;   /* Couleur de la bordure */
border-style: solid;   /* Style de la bordure */
border-width: 1px;   /* Epaisseur de la bordure */
opacity: 1;
}
OU pour supprimer la bordure collez ce code à la place :
.status-msg-border {
border: none;   /* Supprime la bordure */
opacity: 1;
}
Visuellement, sans la bordure on obtient :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Modifier la couleur de fond :

Ajoutez le code suivant pour modifier la couleur de fond de l'encadré :
.status-msg-bg {
background-color: #fcb74b;   /* Couleur de fond de l'encadré */
opacity: 1;
}
Visuellement on obtient :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Modifier le texte

Pour modifier la police et la couleur du texte, ajouter le code suivant :
.status-msg-body {
font-family: 'Lora', serif;   /* Police du texte */
font-size: 13px;   /* Taille de la police du texte */
color: #AE6129;   /* Couleur du texte */
letter-spacing: 1px;   /* Espacement des caractères du texte ; 0 = espacement par défaut */
}
Visuellement on obtient :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Modifier le lien "Afficher tous les articles"

Pour modifier la couleur et la police du lien "Afficher tous les articles" ajoutez le code suivant :
.status-msg-body a {
font-family: 'Lora', serif;   /* Police du lien */
font-size: 13px;   /* Taille de la police du lien */
text-decoration: none;   /* Permet d'enlever le soulignement du lien */
color: #D35B00;   /* Couleur du lien */
}
Pour changer la couleur du lien quand survolé par la souris, ajoutez ce code :
.status-msg-body a:hover {
color: #AE6129;   /* Couleur du lien quand survolé par la souris*/
}
Visuellement on obtient :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

A vous de jouer maintenant sur les couleurs.
Remarque : pour trouver le code hexadécimal de la couleur souhaitée, allez sur code-couleur.com, c'est un site bien pratique pour trouver le code d'une couleur ;)

Voici quelques exemples de combinaisons :

Supprimer / Modifier l'encadré sur la page des libellés sur Blogger

Voilà ! Vous savez maintenant comment supprimer et personnaliser l'apparence de l'encadré qui apparaît sur les pages de libellés.

Bon blogging ! ;)

Autres articles

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger