Personnaliser l’apparence du formulaire de recherche de SPIP

But Recherché

Personnaliser l’apparence du moteur de recherche avec Spip 1.9 qui utilise la balise #FORMULAIRE_RECHERCHE (c’est cette balise qu’il faudra inclure dans votre fichier html pour la modification proposée ci-dessous soit visible).

Au préalable, on peut installer (pas obligatoire) le plugin recherche étendue en le téléchargeant sur http://zone.spip.org/files/spip-zone/recherche_etendue_1.9.zip
-  Le décompresser dans un répertoire plugins créé à la racine du site spip dans un dossier appelé recherche_etendue (nom du dossier important !).
-  Ensuite allez dans l’admin en mode complet au niveau de « Configuration » et activez le plugin.
-  Enfin purgez l’index et réindéxez en allant sur le menu proposé dans « A suivre ».

Personnaliser la balise recherche

La balise #FORMULAIRE_RECHERCHE est utilisable telle quelle et donne l’apparence classique du squelette par défaut. Celle-ci correspond au fichier html formulaire_recherche.html qui se trouve dans le dossier formulaires à la racine du site. L’original donne ceci :

<div class="formulaire_spip formulaire_recherche">
<a name="formulaire_recherche" id="formulaire_recherche"></a>
<form action="[(#ENV{lien})]" method="get">
	[(#ENV{lien}|form_hidden)]
	[<input type="hidden" name="lang" value="(#ENV{lang})" />]
	<label for="recherche"><:info_rechercher:></label>
	<input type="text" class="forml" name="recherche" id="recherche" value="[(#ENV{recherche}|sinon{<:info_rechercher:>" onfocus="this.value='';})]" />
</form>
</div>

Pour le personnaliser, il faudra modifier ce fichier.
-  Si vous voulez créer votre propre zone de recherche, copier le fichier original (c’est à dire formulaire_recherche.html) dans votre dossier squelette puis éditez le et modifiez le.
-  En ce qui me concerne, je ne voulais plus le texte Rechercher, j’ai donc supprimé tout ce qui était entre les labels (on peut mettre un autre texte). J’ai remplacé < :info_rechercher :> par le texte que je voulais voir apparaître dans la case recherche. J’ai remplacé id=« recherche » par id=« le style css que je voulais ». J’ai ensuite ajouté un bouton de validation. Ce qui donne :

<div class="formulaire_spip formulaire_recherche">
<a name="formulaire_recherche" id="formulaire_recherche"></a>
<form action="[(#ENV{lien})]" method="get">
	[(#ENV{lien}|form_hidden)]
	[<input type="hidden" name="lang" value="(#ENV{lang})" />]
	<input type="text" class="forml" name="recherche" id="q" value="[(#ENV{recherche}|sinon{..." onfocus="this.value='';})]" />
	<input type="submit" class="bouton" value="Ok" />
</form>
</div>


-  Le style CSS associé à cette zone de recherche :

#q{	border-top: 1px solid #333;
	border-left: 1px solid #333;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
	background: #eee url("../images/search.gif") no-repeat 0px center;
	padding-left: 18px;
	width: 89px;}
#q:focus {background: #fff url("../images/search.gif") no-repeat 0px center;}

Le fichier search.gif est à placer dans le dossier images de votre dossier squelette.

Discussion

4 discussions

  • Le nom du fichier de ce plugin est maintenant
    http://files.spip.org/spip-zone/recherche_etendue_1_9.zip

    Répondre à ce message

  • 5

    Bonjour,
    j’ai modifié l’apparence du bouton dans un .bouton dans mon fichier css et ça marche mais je ne parviens pas à personaliser le survol du bouton (en utilisant hover).

    Est-il possible de le faire et si oui comment ?

    Merci de votre aide.

    • j’ai oublié de préciser que je developpe une appli pour IE6...

      Cela viendrait-il de là ?

    • FranckA

      Bonsoir

      Un extrait du css concerné ?

    • .bouton{
      background-color:#FFFF00;
      color:#FF00FF;
      font-weight:bold;
      border-color:#FFFF00;}
      .bouton:hover{
      color:#FFFF00;
      background-color:#FF00FF;
      text-decoration:underline;}

      (couleurs prises volontairement vives pour voir si ça marche...)

    • .bouton{
      background-color:#FFFF00;
      color:#FF00FF;
      font-weight:bold;
      border-color:#FFFF00;}
      .bouton:hover{
      color:#FFFF00;
      background-color:#FF00FF;
      text-decoration:underline;}

      (couleurs prises volontairement vives pour voir si ça marche...)

    • oups... désolée du doublon

    Répondre à ce message

  • 1

    Est-ce moi ou est-ce que le fichier à copier et modifier ne s’appelle plus « forumaire-recherche.html » ?? Si je modifie par contre le fichier « recherche.html », par exemple le label, là ça fait le changement...
    Mais alors comment s’appelle le fichier qui renvoie les résultats de la recherche ??
    J’en perds mon latin ^^

    • FranckA

      Bonsoir
      Attention dans Spip 1.9.2 formulaire_recherche.html mais recherche.html et doit se trouver dans le dossier formulaires du dossier squelette !

    Répondre à ce message

  • Bonjour :-)

    Sympa cette contrib, c’est vrai que la zone de recherche par défaut est un peu austère, c’est une très bonne idée de la personnaliser un peu... merci :-)

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 9 août 2009