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.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |