Option rechercher

[MAC]

Bonjour,

Je souhaite installer le même type de qualité graphique que forumactif du rechercher, pouvez vous me communiquer le script.

Merci

[Dr. Karlos]

Bonsoir,

Nous ne donnons pas de codes sans vous faire travailler un peu.

Pouvons-nous avoir l'adresse de votre forum? De plus, quels éléments en particulier désirez-vous retrouver sur votre barre de recherche?


Cordialement.

[MAC]

Bonjour,

Voici mon forum : http://www.letirsportif.com/forum

je consacre beaucoup de temps au forum et cela fait bientôt 7 ans que je suis chez forumactif et je suis bien evidemment tres satisfait du service, mais je n'ai aucune idée à quoi doit ressembler le script.
Je ne parle pas de la barre de navigation mais juste en dessous de celle ci la zone de recherche, que lorsque l'on clique celle ci s'élargie, dispose d'un beau bouton...
merci

[Dr. Karlos]

Bonsoir,

Pour réaliser l'effet d'agrandissement de la boîte de recherche, insérez ces deux codes dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS);

Code:

#search #keywords{
-htm-transition-duration:1s;
-moz-transition-duration:1s;
-o-transition-duration:1s;
-webkit-transition-duration:1s;
transition-duration:1s;
}

Les transition-duration correspondent au nombre de secondes avant que la boîte de recherche redevienne normale. La valeur doit être la même sur l'ensemble de ceux-ci puisqu'ils permettant l'affichage de l'effet sous différents navigateurs.

Insérez ensuite ce code à la suite de l'autre:

Code:

#search #keywords:focus{
width:250px;
-htm-transition-duration:4s;
-moz-transition-duration:4s;
-o-transition-duration:4s;
-webkit-transition-duration:4s;
transition-duration:4s;}

Remplacez 250px par la grandeur de la taille lorsqu'elle est agrandie. Pour les transition-duration, il s'agit du nombre de secondes avant que la boîte atteigne la taille maximale.

Pour la bouton, vous pouvez le modifier à l'aide de ce code CSS:

Code:

#search-box input.button2{
propriétés;
}

Et pour le bouton lorsque survolé:

Code:

#search-box input.button2:hover{
propriétés;
}

Le tutoriel sur le CSS devrait vous aider à la modifier, nous sommes aussi présents afin de vous aider.


Cordialement.

[MAC]

Merci beaucoup c'est super !

Par contre un dernier petit détail, comment retirer la petite loupe qui est présente dans cette zone ?

Merci

[Dr. Karlos]

Re,

Il suffit d'insérer ce code à la suite des autres dans votre CSS:

Code:

input.search {
background-image: none;
}

Cordialement.

[MAC]

Merci beaucoup