Personnalisation du module de recherche

Cela fait pratiquement un an que le module de recherche a été rendu public. Beaucoup d'entre vous ont ajouté ce module à leur blog, facilitant ainsi la recherche de notes.

Nous avons reçu pas mal de questions sur la manière de personnaliser ce module, particulièrement son en-tête. Avec le CSS Personnalisé - fonctionnalité disponible pour les abonnements illimités et supérieurs - vous pouvez customiser ce module.

Dans Habillage > CSS Personnalisé, vous pouvez entrer le CSS fourni ci-dessous avec quelques conseils.

 

Cachez l'en-tête du module

Dans la mesure où le bouton affiche le terme "Rechercher", vous pouvez légitimement penser qu'il est inutile d'afficher une en-tête à ce module de recherche. Le code CSS pour cacher cette en-tête est :

.module-search .module-header { display: none !important; }

 

Alignez le bouton "Rechercher" à côté du champ de recherche

Pour gagner de l'espace dans la barre de recherche, vous pouvez souhaiter que le champ de recherche et le bouton soient affichés sur la même ligne. Pour ce faire, collez le code CSS ci-dessous :

.module-search input[type="search"] {
width: 175px !important;
float: left !important;
display: inline !important;
}

.module-search input[type="submit"] {display: inline !important;}

Il est possible que vous ayez besoin d'ajuster la largeur du module en changeant la valeur du paramètre "width", en fonction de la largeur de votre colonne.

 

Changez l'en-tête du module de recherche

Il est possible d'ajouter du contenu avant ou après l'élément "Rechercher" dans l'en-tête. Si vous voulez ajouter le nom de votre blog par exemple, vous pouvez utiliser un bout de code CSS similaire à celui-ci :

.module-search .module-header:after { content: " sur ce blog" !important; }

Libre à vous de changer " sur ce blog" par le texte qui vous convient. L'espace après le premier guillemet est cependant nécessaire pour séparer votre texte du mot "Rechercher".