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

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 ^^

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 :

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 :

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

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 :

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 :

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 :

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 :

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 :

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

Bon blogging ! ;)

Menu

Lady Bird Red