WordPress Francophone

baudry · 26-06-2008 16:07:47

Bonjour,

Ma configuration WP actuelle Wordpress 2.51
- Version de WordPress :
- Thème utilisé :
- Plugins en place :
- Nom de l'hebergeur :
- Adresse du site :

Problème(s) rencontré(s) : http://olivierbaudrydesign.free.fr

Dans mon template home à l'adresse http://olivierbaudrydesign.free.fr j'ai décidé de faire de la customisation javascript avec ceci :

Code:

<div id="search">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>"     "method="get" name="searchform"  id="searchform"  onsubmit="if(document.searchform.keyword.value=='Rechercher'){alert('Entrez votre recherche');document.searchform.keyword.focus();return false;}">
<input type="text" name="s" id="s"  value="Rechercher" size="12" maxlength="255"  onClick="this.value='';" class="champ_recherche" onfocus="if(this.value=='Rechercher'){ this.value=''; }" onblur="if(this.value==''){ this.value='Rechercher'; }"/>
<input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif"   action="javascript:document.searchform.submit()"/>
 
</form>
</div>

à la place de

Code:

<div id="search">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" name="searchform" id="searchform">
<input type="text" name="s" id="s"  value="search in blog..." />
<input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif"   />
</form>
</div>
  </div>

mon css est celui-ci

Code:

#s {
width: 150px;
height: 17px;
background-image: url(/wp-content/themes/oupocreanum/images/loupe.gif);
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: grey;
border-right-color: grey;
border-bottom-color: grey;
border-left-color: grey;
vertical-align: text-bottom;
/* partie rajoutée pour le texte rechercher mais comment l'afficher à droite de la loupe il y a pourtant 18 pixels*/
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 18px;
color: #b4b4b4;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 1em;
font-size: 9px;
letter-spacing: 0px;
background-color: #ffffff;
float: left;
padding-right: 0px;
padding-bottom: 1px;
padding-left: 0px;
}
 
 
 
#search label {
  display: none;
}
 
#search h2, #search form {
  display: inline;
}

Je n'arrive pas à comprendre comment faire pour que le texte recherche ne se superpose pas à l'icône de la loupe si on clique dans le champ rechercher on peux voir en dessous que le texte rechercher et quasiment bien positionné alors comment faire pour le champ en question?

Dernière modification par baudry (26-06-2008 16:33:47)

Comme une image · 27-06-2008 23:40:41

Ben faut décaler la loupe (par exemple avec #s { background-position: 250px 0px; }
ou bien décaler le texte en mettant des espaces (insécables) avant.

(C'est pourtant évident, non ?!)

baudry · 28-06-2008 09:18:03

Comment faire donc pour décaler le texte, les espaces insécables comment les marquer?

Dernière modification par baudry (28-06-2008 09:18:36)

Lumière de Lune · 28-06-2008 12:07:43

Code:

&nbsp;

baudry · 28-06-2008 13:18:35

Merci pour cette réponse mais ou l'intégrer avec ceci :

Code:

<div id="search">
 
<form action="<?php echo $_SERVER['PHP_SELF']; ?>"     "method="get" name="searchform"  id="searchform"  onsubmit="if(document.searchform.keyword.value=='Rechercher'){alert('Entrez votre recherche');document.searchform.keyword.focus();return false;}">
 
<input type="text" name="s" id="s"  value="Rechercher" size="12" maxlength="255"  onClick="this.value='';" class="champ_recherche" onfocus="if(this.value=='Rechercher'){ this.value=''; }" onblur="if(this.value==''){ this.value='Rechercher'; }"/>
 
<input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif"   action="javascript:document.searchform.submit()"/>
 
</form>

Lumière de Lune · 28-06-2008 14:05:07

Si tu fais de la customisation java tu connais le java, non ?

baudry · 28-06-2008 14:21:52

javascript oui mais sans plus j'essaie tout comme le php avec wordpress,

Comme une image · 28-06-2008 16:00:43

Ben tu remplaces 'Rechercher' par '  (QSP...)Rechercher' dans ton javascript.

baudry · 28-06-2008 17:20:19

D'accord et comment faire pour trouver le même principe lorsque l'on veut remplir le champ?

Lumière de Lune · 28-06-2008 18:09:34

Rechercher Google, form, input, value peut être ?

Enfin en java je ne sais pas ce que ça donne.

WordPress Francophone

La référence en matiere de moteur de blog.

Le multi-blogs devient un jeu d'enfant !

La communauté, c'est vous qui la faites !

WordPress et vous !

Annonce

#1 26-06-2008 16:07:47

customisation de barre de recherche et css.

Code:

Code:

Code:

#2 27-06-2008 23:40:41

Re: customisation de barre de recherche et css.

#3 28-06-2008 09:18:03

Re: customisation de barre de recherche et css.

#4 28-06-2008 12:07:43

Re: customisation de barre de recherche et css.

Code:

#5 28-06-2008 13:18:35

Re: customisation de barre de recherche et css.

Code:

#6 28-06-2008 14:05:07

Re: customisation de barre de recherche et css.

#7 28-06-2008 14:21:52

Re: customisation de barre de recherche et css.

#8 28-06-2008 16:00:43

Re: customisation de barre de recherche et css.

#9 28-06-2008 17:20:19

Re: customisation de barre de recherche et css.

#10 28-06-2008 18:09:34

Re: customisation de barre de recherche et css.

Pied de page des forums