Bon le principe est simple j’ai eu besoin pour le site d’un copain qui montait une asso de self-défense, de faire un site sous spip un peu sympa au niveau des couleurs et j’ai donc souhaité intégrer simplement mais efficacement la « ZONE DE RECHERCHE ».
Voici une représentation du résultat sur le site dont je vous parle (cliquez pour agrandir).
Supprimons l’inutile
J’ai décidé de supprimer le texte RECHERCHER et le bouton. Je pense que le simple fait d’avoir une LOUPE dans la boite de recherche doit suffire. De plus, il me semble tout aussi efficace de lancer la recherche par le bouton ENTRER et non par le BOUTON, donc suppression du bouton.
Pour faire ces modif, il faut travailler sur le formulaire recherche.
Il faut faire une copie du formulaire original se trouvant dans l’un de ces repertoires :
- « SITE/squelettes-dist/formulaires/recherche.html »
- « SITE/dist/formulaires/recherche.html »
IL NE FAUT PAS MODIFIER CE FICHIER A CET EMPLACEMENT, mais il faut le recopier dans :
- SITE/squelettes/formulaires/recherche.html
Et c’est donc ce nouveau fichier que nous allons modifier.
RECHERCHE.HTML, le code original :
<div class="formulaire_spip formulaire_recherche" id="formulaire_recherche">
<form action="[(#ENV{action})]" method="get"><div>
[(#ENV{action}|form_hidden)]
[<input type="hidden" name="lang" value="(#ENV{lang})" />]
<label for="recherche"><:info_rechercher_02:></label>
<input type="text" class="text" size="10" name="recherche" id="recherche"[ value="(#ENV{recherche})"] accesskey="4" />
<input type="submit" class="submit" value=">>" title="<:info_rechercher:>" />
</div></form>
</div>RECHERCHE.HTML, le code modifié :
<div class="formulaire_spip formulaire_recherche" id="formulaire_recherche">
<form action="[(#ENV{action})]" method="get">
<div>
[(#ENV{action}|form_hidden)]
[<input type="hidden" name="lang" value="(#ENV{lang})" />]
<input type="text" class="text" size="10" name="recherche" id="recherche"[ value="(#ENV{recherche})"] accesskey="4" />
</div>
</form>
</div>Le CSS
Maintenant dans votre fichier de style css, il vous faut rajouter le code suivant :
input#recherche {
width:130px;height:20px;
padding-left:15px;
font-size:15px;
color:white;
border:1px solid #000000;
background:url(./images/fond_recherche.png) top left;
}L’image de fond
Vous trouverez en piece jointe, l’image de background qui est utilisée dans le code CSS ci-dessus. Il faudra par defaut la mettre dans le dossier :
- SITE/squelettes/images/fond_recherche.png
Vous remarquerez l’utilisation d’un fichier PNG afin de jouer une une semi transparence de l’image.
