Personnaliser une barre de recherche

Lun 2 Oct 2017 - 3:10

Kilou1984

Age : 40Messages : 38

Lun 2 Oct 2017 - 3:10

Bonjour,

J'ai crée un forum sur l'hébergeur xooit.
Voilà mon forum : http://rencontresentreaspergers.soforums.com/

J'avais trouvé un barre de recherche, mais, j'aimerai la personnaliser, la rendre plus jolie et plus petite :
Personnaliser une barre de recherche Captur31

Personnaliser une barre de recherche Captur31

Voilà son code :

Code::  <div><form action="search.php?mode=results" method="post"> <input class="post" type="text" name="search_keywords" size="20" onfocus="this.value=''" value="Recherche rapide" /> <input class="button" name="submit" type="submit" value="Rechercher" /> </form></div>

J'aimerai qu'elle fasse cette largeur --> Personnaliser une barre de recherche Vert-f10

Mais en faisant en sorte que les membres puissent taper des mots assez longs.

J'aimerai que elle soit un peu comme ça --> Personnaliser une barre de recherche Captur32

Personnaliser une barre de recherche Captur32

écriture taille size : 11
Avec les bords légèrement arrondis et une loupe à la place du coeur.

Merci d'avance pour votre réponse. :)

Ven 20 Oct 2017 - 20:27

Onyx

Age : 30Messages : 3350

Ven 20 Oct 2017 - 20:27

Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de cette demande.
Attention, l'absence de réponse à ce message entraînera l'archivage du topic d'ici 10 jours.

Lun 23 Oct 2017 - 19:19

Kilou1984

Age : 40Messages : 38

Lun 23 Oct 2017 - 19:19

Bonjour,

Merci pour votre réponse.
Oui, ce topic est toujours d'actualité, je n'ai pas trouvé de solutions pour modifier cette barre de recherche.

À bientôt

Lun 6 Nov 2017 - 19:29

Nihil Scar Winspeare

Messages : 5244

Lun 6 Nov 2017 - 19:29

Coucou :)

Si j'ai bien compris souhaites faire ces 2 modifications ?
1/ Réduire la largeur de l'input (l'endroit où on peut écrire)
2/ Remplacer le bouton par une loupe

C'est bien cela ? Est ce que tu as une préférence pour l'image pour la loupe ?

Jeu 23 Nov 2017 - 3:41

Kilou1984

Age : 40Messages : 38

Jeu 23 Nov 2017 - 3:41

Bonjour,

Excusez moi pour ma réponse tardive, j'allais pas bien.Mais ça va mieux Very Happy

1)Oui, je souhaite réduire la largeure de l'input pour que la barre de recherche soit de la même largeur que ce bouton --> Personnaliser une barre de recherche Vert-fait-bonne-taille-4fb0444

Personnaliser une barre de recherche Vert-fait-bonne-taille-4fb0444

2) Et une loupe comme ceci --> Personnaliser une barre de recherche Loupe11

À bientôt

Ven 15 Déc 2017 - 15:59

Koray Allister

Age : 29Messages : 71

Ven 15 Déc 2017 - 15:59

Salut,

HTML:

CSS:

Voilà, tout est expliqué à l'intérieur, y a plus qu'à copier coller et à éditer selon ton besoin :)

Oublie à mettre en résolu si ça te convient :)

Ven 15 Déc 2017 - 22:18

Kilou1984

Age : 40Messages : 38

Ven 15 Déc 2017 - 22:18

Bonjour,

J'ai essayé d'installer les codes mais ça avait buggé. Je ne sais pas où mettre le code CSS dans mon template.

Voilà mon template overhall header :

Code:: <div align="right" style="margin-right: 100px; position: right;"> <a href="#empty" onclick="showSpoiler(this);" style="position: fixed;"> </a> <div class="inner" style="display:none;"><br> <table align="center" style="position: fixed;" class="forumline"> <tr> <td width="900" style="background-color: #FFFFFF;" align="center"> <br /> <script type="text/javascript" xml:space="preserve"></script> </form></td> </tr> <tr> </tr> </table></div></div> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="google-site-verification" content= "Wd16375yy2yyZcjNfXyijbyVVFTpokaRJNBc08hgqcw"> <link rel="alternate" type="application/rss+xml" title="Global" href="/rss.php"> <link rel="alternate" type="application/rss+xml" title= "Global, sujets et réponses" href="/rss.php?t=1"> <meta name="google-site-verification" content= "OEwpZA40AkMHcBb7DSSJltmq3i2tW1waWlv1Y8B_-NA"> <meta name="language" content="fr"> <meta name="description" lang="fr" content= "Ceci n'est pas une association pour l'autisme ou le syndrome d'asperger, c'est un forum autisme pour le syndrome d'asperger ou syndrome asperger. Avec le syndrome d'asperger profitez d'un café rencontre ou divers cafés rencontres pour vous rencontrer."> <meta name="keywords" lang="fr" content= " forum, autisme, syndrome asperger, d'asperger association rencontre, café rencontre"> <link rel="search" title="Rencontres entre aspergers" type= "application/opensearchdescription+xml" href= "/opensearchdescription.php"> <link rel="top" href="./index.php" title= "Rencontres entre aspergers Index du Forum"> <link rel="search" href="./search.php" title="Rechercher"> <link rel="help" href="./faq.php" title="FAQ"> <link rel="author" href="./memberlist.php" title="Membres"> <title>Rencontres entre aspergers</title>  <style type="text/css"> #fastNewsInfo{display:none !important}  </style> <script language="Javascript" type="text/javascript">  </script> <link rel="shortcut icon" href= "http://img.xooimage.com/files110/a/a/3/c26600810947cc3f5...6d962d72-48640ac.jpg"> <style type="text/css"> #vapi_product_image {display: none !important;} </style> <style type="text/css"> #mainDivForCloseCIMDIV { /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */ position: absolute; left: 0px; top: 0px; } body > div#mainDivForCloseCIMDIV { /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */ position: fixed; } </style>  <style type="text/css"> /**volet facebook**/ /******************/ #volet_1 { width: 250px; /* Largeur du Volet */ padding: 3px; /* Marge intérieure dans le Volet */ background:#EFF0FF; /* Couleur de fond du Volet */ color: #000; /* Couleur texte dans Volet */ height: 500px; /* Hauteur du Volet */ border-radius:40px; /* Arrondir le volet */ border:2px solid #8FA3AD; } #volet_1 a.ouvrir, #volet_1 a.fermer { color: #000; /* couleur de Infos et de Fermer */ text-decoration: none; /* Décoration du texte Infos et de Fermer */ } #volet_1 { position: absolute; /* Positionnement du Volet */ right: -260px; /* plus le chiffre est bas, plus il va vers ma gauche */ /* Transition sur le volet */ -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; transition: all .5s ease-in; } #volet_1 a.ouvrir, #volet_1 a.fermer { position: absolute; /* Positionnement de Infos et Fermer */ left: -34px; /* plus le chiffre est bas, plus ça décale vers ma gauche */ top: 400px; /* plus le chiffre est bas plus ça remonte */ -moz-radius: 0 0 0px 0px; border-radius: 0 0 0px 0px; } #volet_1 a.fermer { display: none; /* Pour que ouvrir passe dessus fermer, lorsque c'est fermé */ } #volet_1:target { right: 10px; /* plus le chiffre est élevé, plus ça fait un espace entre le volet ouvert et le bord de l'écran */ } /* Code pour la fermeture */ #volet_1:target a.fermer { display: block; /* Pour que fermer apparaisse lorsque ouvrir apparait */ } #volet_1:target a.ouvrir { display: none; /* Pour que ouvrir disparaisse lorsque fermer apparait */ } #voletfermer_1:target #volet_1 { right: -258px; /* concerne la vitesse de fermeture du volet */ } #voletfermer_1 { position: fixed; top: 120px; right: 0; /* Si le chiffre est 1, ça remonte */ } /**fin volet facebook**/ /**********************/ </style>  <style type='text/css'> /* Fond du gadget de la barre de recherche */ .recherche_p { } background-color: #D9D9EB; /* Couleur de fond */ /* Champ de saisie */ #searchthis #search { } border: none; /* Pas de bordure */ padding: 1px 3px 1px 3px; /* Espace entre les bords et le contenu : haut droite bas gauche */ width: 70.5%; /* Permet d'ajuster la largeur du champ de saisie à 100% */ box-sizing: border-box; /* Important */ font-family: Lato; /* Police du texte */ font-size: 12px; /* Taille de la police du texte */ font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */ letter-spacing: 1px; /* Espacement des caractères */ /* Bouton valider */ #searchthis #search-btn { } margin: 2px 0 0 0; /* Espace autour du bouton : haut droite bas gauche */ color: #0F056B; /* Couleur du texte */ </style> <style type="text/css"> .monLien { position: relative; float: left; left: 80px; } #imgLien { width: 50px; margin:10px; } textarea{ padding:30px 60px; height: 80px; } </style> </head> <a name="top"></a>  <div style="display: inline-block; position: absolute;right:10px"> <a target="_blank" title="Partagez sur Twitter" href="https://twitter.com/intent/tweet?text=Rencontres%20entre%20aspergers%20%3A%3A%20Ceci%20n%27est%20pas%20une%20association%20pour%20l%27autisme%20ou%20le%20syndrome%20d%27asperger%2C%20c%27est%20un%20forum%20autisme%20pour%20le%20syndrome%20d%27asperger%20ou%20syndrome%20asperger.%20Avec%20le%20syndrome%20d%27asperger%20profitez%20d%27un%20caf%C3%A9%20rencontre%20ou%20divers%20caf%C3%A9s%20rencontres%20pour%20vous%20rencontrer.&url="http%3A%2F%2Frencontresentreaspergers.soforums.com%2Findex.php" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><img src="http://img.xooimage.com/files110/9/b/0/oie_24191212q0xlm8ia-5038e39.png" alt="Twitter" /></a> <br> <a target="_blank" title="Partagez sur Google +" href="https://plus.google.com/share?url=http%3A%2F%2Frencontresentreaspergers.soforums.com%2Findex.php" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img src="http://img.xooimage.com/files110/6/9/0/google--5038c7f.png" alt="Google Plus" /></a> <br> <a target="_blank" title="Envoyer par mail" href="mailto:?subject=Ce forum peut t'intéresser&body=Bonjour, j'ai trouvé un forum s'appelant Rencontres entre aspergers http://rencontresentreaspergers.soforums.com/index.php " rel="nofollow"><img src="http://img.xooimage.com/files110/c/8/8/oie_jpg-5038e2e.png" alt="email" /></a><br> </div>   <div style="display: inline-block; position: absolute;"> <a lambdaeverupdated="43" href="http://rencontresentreaspergers.soforums.com/index.php" title="Accueil du forum"><img src="http://img.xooimage.com/files110/5/6/8/accueil-4fbdb67.gif" alt="Accueil du forum rencontre" border="0"></a><br> <a lambdaeverupdated="43" href="http://rencontresentreaspergers.soforums.com/portal.php" title="Portail"><img src="http://img.xooimage.com/files110/5/2/c/portail-4fbdb6e.gif" alt="Portail du forum autisme" border="0"></a><br> <a lambdaeverupdated="43" href="http://contact.xoo.it/index.php" target="_blank" title="Contacter l'administratrice"><img src="http://img.xooimage.com/files110/a/9/c/contact-4fbdb7b.gif" style="border:0px" alt="Contact de ce forum autisme"></a><br> <a lambdaeverupdated="43" href="http://rencontresentreaspergers.soforums.com/t953-Nous-aider.htm#p4070" title="Nous aider pour faire connaitre ce forum"><img src="http://img.xooimage.com/files110/d/8/4/nous.aider-4fbdb89.gif" alt="Aider ce forum autisme" border="0"></a>  <font color = "#000000"><div style="margin: 0px 0px 0px;"> <input value="" style="border: 0px; padding: 0px; width: 110px; font-size: 20px; background-image: url(http://img.xooimage.com/files110/6/4/1/vert-fait-bonne-taille-4fb0444.jpg); background-position: center center; background-repeat: no-repeat;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.style.backgroundImage = 'url(http://img.xooimage.com/files110/5/9/1/cacher-4fb07bd.jpg)'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.style.backgroundImage = 'url(http://img.xooimage.com/files110/6/4/1/vert-fait-bonne-taille-4fb0444.jpg)'; }" type="button"></div><div class="quotecontent"><div style="display: none;"> <br/>  <table width="40%" cellspacing="0" border="0" align="center" cellpadding="1"> <tr> <td align="left"> <span class="gensmall"><a href="{}" class="gensmall">{}</a></span> </td> <td align="right"> <span class="gensmall">{}</span> </td> </tr> </table> <table width="65%" cellpadding="0" cellspacing="1" border="0" class="forumline"> <tr> <td class="catHead" colspan="2" height="10"> <span class="cattitle"> <font color = "#000000">Rechercher :</font></span> </td> </tr> <tr> <td class="row1" align="left" width="100%"> <span class="gensmall">  <div><form action="search.php?mode=results" method="post"> <input class="post" type="text" name="search_keywords" size="20" onfocus="this.value=''" value="Recherche rapide" /> <input class="button" name="submit" type="submit" value="Rechercher" /> </form></div>  </span> </td> </tr> </table> <table width="60%" cellpadding="1" cellspacing="1" border="0"> <tr> <td align="left" valign="top"> <span class="gensmall">{}</span> </td> </tr> </table>  </div></div></div></font>  </div>   /**volet facebook**/ /******************/ <div id="voletfermer_1" style="z-index:299 !important;"> <div id="volet_1">  <br/> <div align="center"> <strong><a href="https://www.facebook.com/rencontresentredesaspergers?fref=ts" style="text-decoration:none" target="_blank"><font size="3" color="#0F056B">Page Facebook</font></a></strong> <br/><br/><br/> <strong><a href="https://www.facebook.com/profile.php?id=100004653464965" style="text-decoration:none" target="_blank"><font size="3" color="#0F056B">Profil d'Admin</font></a></strong> <br/><br/><br/>  <a href="http://pup-op-1.clicforum.com/index.php" onclick="window.open(this,'popup','width=800,height=340,left=50,top=50,toolbar=0, location=0, menubar=0, status=0, directories=0, scrollbars=1, resizable=1'); return false;"> <img src="http://img.xooimage.com/files110/7/2/3/capture-du-2016-0...19-26-32-4f64f8f.png"></img></a>  <br/><br/>  <a href="https://www.facebook.com/dialog/send?link=http%3A%2F%2Frencontresentreaspergers.soforums.com%2Fportal.php&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Freturn%2Fclose&display=popup&app_id=189314431096339" onclick="window.open(this,'popup','width=500,height=250,left=50,top=50,toolbar=0, location=0, menubar=0, status=0, directories=0, scrollbars=1, resizable=1'); return false;"> <img src="http://img.xooimage.com/files110/7/9/a/capture-du-2016-0...19-05-37-4f64efd.png"></img></a>  <br/>  <a href="#volet_1" class="ouvrir"><img src="http://img.xooimage.com/files110/3/f/7/petit-facebook-5038738.jpg"/></a> <a href="#voletfermer_1" class="fermer"><img src="http://img.xooimage.com/files110/a/7/4/fermer-petit-4f648e8.png"/></a> </div> </div> /**fin volet facebook**/ /**********************/ </div>   <body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"> <a name="top"></a> <table width="80%" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline"><table width="80%" cellspacing="0" cellpadding="0" border="0"> <div align="center"> <img src= "http://img.xooimage.com/files110/9/1/d/bande-blanche-de-l-accueil-48c6ccb.png" alt="espace"><br> <img src="http://img.xooimage.com/files110/b/b/3/nouvel-espace-largeur-85-4faefac.png" alt="espace">  <a href="http://rencontresentreaspergers.soforums.com/index.php" title="Accueil du forum"><img src="http://img.xooimage.com/files110/0/b/4/titre.du.forum-4fbd8c4.gif" alt="titre du forum" border="0"></a>   <a href="http://rencontresentreaspergers.soforums.com/login.php?logout=true" title="Vous êtes en ligne"><img src="http://img.xooimage.com/files110/3/3/2/enligne-4fbdd6e.gif" alt="déconnexion forum" border="0"></a>   <a href="http://rencontresentreaspergers.soforums.com/login.php" title="Vous êtes hors ligne"><img src="http://img.xooimage.com/files110/7/0/e/horsligne-4fbdd7f.gif" alt="connexion au forum" border="0"></a>  <br/> <img src= "http://img.xooimage.com/files110/a/2/a/sous-titre-4fbdddf.gif" alt="description du forum">  <table width="100%" cellspacing="0" border="0" align="center"cellpadding="1"> <tr> <td align="left"> <span class="gensmall"><a href="" class="gensmall"></a></span> </td> <td align="right"></td> </tr> </table> <table width="100%" cellpadding="1" cellspacing="1" border="0"class="forumline"> <tr> <td class="row1" align="left"> <div align="center"><span class="gensmall"> <a href="http://rencontresentreaspergers.soforums.com/t379-Charte-et-services-du-forum.htm" title="Charte"><img src="http://img.xooimage.com/files110/f/9/5/oie_15225142hy0vznh-539e375.png" alt="Charte" border="0"></a> <a href="http://rencontresentreaspergers.soforums.com/t379-Charte-et-services-du-forum.htm" style="text-decoration:none"><font size="2" color="#0F056B">Charte</font></a> <a href="http://rencontresentreaspergers.soforums.com/privmsg.php?folder=inbox" title="Messagerie"><img src="http://img.xooimage.com/files110/1/b/6/iconelettreactive-4dcd7f5.png" alt="Messagerie du forum" border="0"></a> <a href="http://rencontresentreaspergers.soforums.com/privmsg.php?folder=inbox" style="text-decoration:none"><font size="2" color="#0F056B">Messagerie</font></a> <a href="http://enregistrement.e-monsite.com/" title="S'enregister"><img src="http://img.xooimage.com/files110/6/b/f/capture-du-2015-0...01-17-24-4a809e4.png" alt="S'enregistrer sur le forum" border="0"</a> <a href="http://enregistrement.e-monsite.com/" style="text-decoration:none"><font size="2" color="#0F056B">S'enregistrer</font></a> <a href="http://rencontresentreaspergers.soforums.com/profile.php?mode=editprofile" title="Éditer son profil"><img src="http://img.xooimage.com/files110/7/6/2/profil-4db3683.png" alt="Profil" border="0"></a> <a href="http://rencontresentreaspergers.soforums.com/profile.php?mode=editprofile" style="text-decoration:none"><font size="2" color="#0F056B">Profil</font></a> <a href="http://rencontresentreaspergers.soforums.com/t278-identifiants-oubli.htm#p2216" title="Identifiants oubliés?"><img src="http://img.xooimage.com/files1/3/5/e/interrogation-1--2e754.gif" alt="Profil" border="0"></a> <a href="http://rencontresentreaspergers.soforums.com/t278-identifiants-oubli.htm#p2216" style="text-decoration:none"><font size="2" color= "#0F056B">Identifiants oubliés?</font></a> <img src="http://img.xooimage.com/files110/1/4/3/oie_7144757ewl5ewwl-4f985fe.png" style="border:0px" alt="Afficher plus de liens de ce forum"></a> <a href="http://rencontresentreaspergers.soforums.com/t2778-Plus.htm#p10579" style="text-decoration:none"><font size="2" color= "#0F056B">Afficher plus</font></a> <a href=http://rencontresentreaspergers.soforums.com/admin/?rci=b5cf4aeebd149b531cf2b3c6fd0a6e63><img src="http://img.xooimage.com/files110/7/c/0/carr-.transparent-51b2305.png" border="0"></a> <br> <strong><FONT size="2" font color = "#9F00CC">Membres :</font> </strong> <a href="http://rencontresentreaspergers.soforums.com/t882-Liste-des-membres-par-d-partements.htm" title="Membres par départements français"><img src=" http://img.xooimage.com/files110/1/5/6/oie_18161838c3470tur-4dcd5b3.png" alt="Membres par départements français" border="0"></a> <a href="http://rencontresentreaspergers.soforums.com/t882-Liste-des-membres-par-d-partements.htm" style="text-decoration:none"><font size="2" color="#0F056B">Membres par départements français</font></a> <a href="http://rencontresentreaspergers.soforums.com/t946-Liste-des-membres-trangers-par-pays.htm#p4056" title="Membres par pays étrangers"><img src="http://img.xooimage.com/files110/b/5/d/monde-4dcd55d.png" alt="Membres par pays" border="0"></a> <a href="http://rencontresentreaspergers.soforums.com/t946-Liste-des-membres-trangers-par-pays.htm#p4056" style="text-decoration:none"><font size="2" color="#0F056B">Membres par pays étrangers</font></a> <a href="http://rencontresentreaspergers.soforums.com/memberlist.php" title="Rechercher un membre"><img src="http://img.xooimage.com/files110/e/8/f/search_16_ns-4dcd674.png" alt="Rechercher un membre du forum" border="0"></a> <a href="http://rencontresentreaspergers.soforums.com/memberlist.php" style="text-decoration:none"><font size="2" color= "#0F056B">Rechercher un membre</font></a> <a href="http://rencontresentreaspergers.soforums.com/t2326-Comment-faire-des-rencontres-ici.htm#p9056" title="Comment faire des rencontres sur ce forum"><img src="http://img.xooimage.com/files110/8/c/e/groupes-ff-4db36e6.png" alt="rencontres entre autistes" border="0"></a> <a href="http://rencontresentreaspergers.soforums.com/t2326-Comment-faire-des-rencontres-ici.htm#p9056" style="text-decoration:none"><font size="2" color="#0F056B">Comment se rencontrer ici?</font></a> </span></div> </td> </tr> </table> <table width="60%" cellpadding="1" cellspacing="1" border="0"> <tr> <td align="left" valign="top"></td> </tr> </table>    <div>  <a href=http://smartseotools.org/meta-tags-analyzer>meta-tags-analyzer</a> <a href=http://rencontresentreaspergers.soforums.com/t3941-Balises-m-ta.htm#p17152>Balises Méta</a> <a href=http://rencontresentreaspergers.soforums.com/t3335-test.htm#p13245>Édit An'Coeur</a>   <a href=http://rencontresentreaspergers.soforums.com/admin/index.php?admin=1&rci=f4aea9d4db03c416a898a27566724065>Panneau d'Administration</a>   <a href=http://rencontresentreaspergers.soforums.com/groupcp.php>Groupes</a>

Merci d'avance.

Sam 16 Déc 2017 - 6:54

Koray Allister

Age : 29Messages : 71

Sam 16 Déc 2017 - 6:54

Je ne sais pas du tout comment fonctionnent les forums sur xooit mais je pense qu'il doit tout de même y avoir une page pour le CSS, je regarde ça plus en détail demain ou dimanche mais si c'est pas le cas je l'incorporerai directement au html, on perdra un peu en lisibilité mais peu importe :)

Envoyé depuis l'appli Topic'it

Sam 16 Déc 2017 - 9:26

Nihil Scar Winspeare

Messages : 5244

Sam 16 Déc 2017 - 9:26

Merci pour ton aide Koray :hudada:

Au passage, petite erreur d'inattention, en CSS les commentaires ne s'écrivent pas avec //, ça va cause des erreurs sur les lignes suivantes :'(

Code:: /* Commentaire en CSS */

Remplacer comme ça :

Code:: /* Le conteneur de ta barre de recherche et du bouton */ .search_bar { background-color: #ecab50; /* Couleur de fond du conteneur */ width: 190px; /* Largeur du conteneur */ padding: 1px 3px; /* Marge intérieure du conteneur */ } /* La barre de recherche */ .search_bar .post{ background-color: #fefefe; /* Couleur de fond de la barre de recherche */ border-radius: 5px; /* Valeur d'arrondi des angles */ width: 150px; /* Largeur de la barre */ height: 18px; /* Hauteur de la barre */ margin-right: 3px; /* Espacement entre la barre et le bouton */ } /* Le bouton */ .search_bar .button { width: 30px; /* Largeur du bouton */ /* Couleur Ton image L'image n'est pas dupliqué Position */ background: #000 url("https:/*i11.servimg.com/u/f11/17/81/42/50/loupe11.png") no-repeat center center; /* Background de ton bouton */ }

Sam 16 Déc 2017 - 16:03

Koray Allister

Age : 29Messages : 71

Sam 16 Déc 2017 - 16:03

Effectivement, ça fait un moment que j'ai pas fait de web donc je me suis un peu emmêlé les pinceaux.
Sinon, dans le template ils ont l'air de tout foutre directement dans les balises, ce qui est pas forcément la meilleur solution mais bon...
Du coup ça donnerai ceci :

Code::  <div style="background-color: #ecab50; width: 190px; padding: 1px 3px;"> <form action="search.php?mode=results" method="post"> <input style="background-color: #fefefe; border-radius: 5px; width: 150px; height: 18px; margin-right: 3px;" type="text" name="search_keywords" onfocus="this.value=''" value="Recherche rapide" /> <input style="width: 30px; background: #000 url("https://i11.servimg.com/u/f11/17/81/42/50/loupe11.png") no-repeat center center;" name="submit" type="submit" value="" /> </form> </div>

Voilà avec ça, ça devrait marcher :)
Sinon si tu as une balise < head > dans ton template tu peux toujours mettre ton css dedans dans une balise de < style >, tu gagneras un peu en lisibilité :)

Dim 17 Déc 2017 - 11:25

Kilou1984

Age : 40Messages : 38

Dim 17 Déc 2017 - 11:25

Bonjour,

Oui, j'ai un template que pour le CSS :

Code:: /* The original BlueDim Theme for phpBB version 2+ Created by subBlue design http://www.subBlue.com NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2 theme administration centre. When you have finalised your style you could cut the final CSS code and place it in an external file, deleting this section to save bandwidth. */ /* General page style. The scroll bar colours only visible in IE5.5+ */ body { background-color: #336699; scrollbar-face-color: #ccd7e0; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #ccd7e0; scrollbar-3dlight-color: #e6ecf1; scrollbar-arrow-color: #336699; scrollbar-track-color: #e6ecf1; scrollbar-darkshadow-color: #98AAB1; } /* General font families for common tags */ font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif } a:link,a:active,a:visited { color : #336699; } a:hover { text-decoration: underline; color : #336699; } hr { height: 0px; border: solid #e6ecf1 0px; border-top-width: 1px;} /* This is the border line & background colour round the entire page */ .bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; } /* This is the outline round the main forum tables */ .forumline { background-color: #FFFFFF; border: 2px #336699 solid; } /* Main table cell colours and backgrounds */ td.row1 { background-color: #e6ecf1; } td.row2 { background-color: #ccd7e0; } td.row3 { background-color: #e6ecf1; } /* This is for the table cell above the Topics, Post & Last posts on the index.php page By default this is the fading out gradiated silver background. However, you could replace this with a bitmap specific for each forum */ td.rowpic { background-color: #d3e4f2; background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif'); } /* Header cells - the blue and silver gradient backgrounds */ th { color: #336699; font-size: 14px; font-weight : bold; background-color: #d3e4f2; height: 25px; background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif'); } td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom { background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif'); background-color:#d3e4f2; border: #FFFFFF; border-style: solid; height: 28px; } /* Setting additional nice inner borders for the main table cells. The names indicate which sides the border will be on. Don't worry if you don't understand this, just ignore it :-) */ td.cat,td.catHead,td.catBottom,td.rowpic { height: 28px; border-width: 0px 0px 0px 0px; } th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR { font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; } td.row3Right,td.spaceRow { background-color: #e6ecf1; border: #FFFFFF; border-style: solid; } th.thHead,td.catHead { font-size: 15px; border-width: 0px 0px 0px 0px; } th.thSides,td.catSides,td.spaceRow { border-width: 0px 0px 0px 0px; } th.thRight,td.catRight,td.row3Right { border-width: 0px 0px 0px 0px; } th.thLeft,td.catLeft { border-width: 0px 0px 0px 0px; } th.thBottom,td.catBottom { border-width: 0px 0px 0px 0px; } th.thTop { border-width: 0px 0px 0px 0px; } th.thCornerL { border-width: 0px 0px 0px 0px; } th.thCornerR { border-width: 0px 0px 0px 0px; } /* The largest text used in the index page title and toptic title etc. */ .maintitle { font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif; text-decoration: none; line-height : 120%; color : #000000; } /* General text */ .gen { font-size : 15px; } .genmed { font-size : 14px; } .gensmall { font-size : 13px; } .gen,.genmed,.gensmall { color : #000000; } a.gen,a.genmed,a.gensmall { color: #336699; text-decoration: none; } a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #336699; text-decoration: underline; } /* The register, login, search etc links at the top of the page */ .mainmenu { font-size : 14px; color : #000000 } a.mainmenu { text-decoration: none; color : #336699; } a.mainmenu:hover{ text-decoration: underline; color : #336699; } /* Forum category titles */ .cattitle { font-weight: bold; font-size: 15px ; letter-spacing: 1px; color : #336699} a.cattitle { text-decoration: none; color : #336699; } a.cattitle:hover{ text-decoration: underline; } /* Desc menu: Text to the forums used in: header.php */ .mainmenu { font-size : 14px; color : #006699; font-weight: bold; } /* Forum title: Text and link to the forums used in: index.php */ .forumlink { font-weight: bold; font-size: 15px; color : #336699; } a.forumlink { text-decoration: none; color : #336699; } a.forumlink:hover{ text-decoration: underline; color : #336699; } /* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */ .nav { font-weight: bold; font-size: 15px; color : #000000;} a.nav { text-decoration: none; color : #336699; } a.nav:hover { text-decoration: underline; } /* titles for the topics: could specify viewed link colour too */ .topictitle,h1,h2 { font-weight: bold; font-size: 15px; color : #000000; } a.topictitle:link { text-decoration: none; color : #336699; } a.topictitle:visited { text-decoration: none; color : #336699; } a.topictitle:hover { text-decoration: underline; color : #336699; } /* Name of poster in viewmsg.php and viewtopic.php and other places */ .name { font-size : 15px; color : #000000;} /* Location, number of posts, post date etc */ .postdetails { font-size : 13px; color : #000000; } /* The content of the posts (body of text) */ .postbody { font-size : 15px; line-height: 18px} a.postlink:link { text-decoration: none; color : #336699 } a.postlink:visited { text-decoration: none; color : #336699; } a.postlink:hover { text-decoration: underline; color : #336699} /* Quote & Code blocks */ .code { font-family: Courier, 'Courier New', sans-serif; font-size: 15px; color: #006600; background-color: #FAFAFA; border: #e6ecf1; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px } .quote { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #444444; line-height: 125%; background-color: #FAFAFA; border: #e6ecf1; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px } /* Copyright and bottom info */ .copyright { font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;} a.copyright { color: #444444; text-decoration: none;} a.copyright:hover { color: #000000; text-decoration: underline;} /* Form elements */ input,textarea, select { color : #000000; font: normal 14px Verdana, Arial, Helvetica, sans-serif; border-color : #000000; border-width : 1px; } /* The text input fields background colour */ input.post, textarea.post, select { background-color : #FFFFFF; } input { text-indent : 2px; } /* The buttons used for bbCode styling in message post */ input.button { background-color : #e6ecf1; color : #000000; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; } /* The main submit button option */ input.mainoption { background-color : #FAFAFA; font-weight : bold; } /* None-bold submit button */ input.liteoption { background-color : #FAFAFA; font-weight : normal; } /* This is the line in the posting page which shows the rollover help line. This is actually a text box, but if set to be the same colour as the background no one will know ;) */ .helpline { background-color: #ccd7e0; border-style: none; } .newsbutton { color: #000000; background-color: #e6ecf1; border: 1px solid #98AAB1; width: 13; height: 13; font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 13pt; border-style: solid; border-width: 1px; cursor: hand; } /* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */ @import url('http://img.xooimage.com/files10/f/o/formie-30d7c.css');

Bonne journée

Dim 17 Déc 2017 - 11:31

Kilou1984

Age : 40Messages : 38

Dim 17 Déc 2017 - 11:31

Bonjour,

Oui, j'ai un template que pour le CSS :

Code:: /* The original BlueDim Theme for phpBB version 2+ Created by subBlue design http://www.subBlue.com NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2 theme administration centre. When you have finalised your style you could cut the final CSS code and place it in an external file, deleting this section to save bandwidth. */ /* General page style. The scroll bar colours only visible in IE5.5+ */ body { background-color: #336699; scrollbar-face-color: #ccd7e0; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #ccd7e0; scrollbar-3dlight-color: #e6ecf1; scrollbar-arrow-color: #336699; scrollbar-track-color: #e6ecf1; scrollbar-darkshadow-color: #98AAB1; } /* General font families for common tags */ font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif } a:link,a:active,a:visited { color : #336699; } a:hover { text-decoration: underline; color : #336699; } hr { height: 0px; border: solid #e6ecf1 0px; border-top-width: 1px;} /* This is the border line & background colour round the entire page */ .bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; } /* This is the outline round the main forum tables */ .forumline { background-color: #FFFFFF; border: 2px #336699 solid; } /* Main table cell colours and backgrounds */ td.row1 { background-color: #e6ecf1; } td.row2 { background-color: #ccd7e0; } td.row3 { background-color: #e6ecf1; } /* This is for the table cell above the Topics, Post & Last posts on the index.php page By default this is the fading out gradiated silver background. However, you could replace this with a bitmap specific for each forum */ td.rowpic { background-color: #d3e4f2; background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif'); } /* Header cells - the blue and silver gradient backgrounds */ th { color: #336699; font-size: 14px; font-weight : bold; background-color: #d3e4f2; height: 25px; background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif'); } td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom { background-image: url('http://img.xooimage.com/files6/c/e/cellpic3-316d3.gif'); background-color:#d3e4f2; border: #FFFFFF; border-style: solid; height: 28px; } /* Setting additional nice inner borders for the main table cells. The names indicate which sides the border will be on. Don't worry if you don't understand this, just ignore it :-) */ td.cat,td.catHead,td.catBottom,td.rowpic { height: 28px; border-width: 0px 0px 0px 0px; } th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR { font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; } td.row3Right,td.spaceRow { background-color: #e6ecf1; border: #FFFFFF; border-style: solid; } th.thHead,td.catHead { font-size: 15px; border-width: 0px 0px 0px 0px; } th.thSides,td.catSides,td.spaceRow { border-width: 0px 0px 0px 0px; } th.thRight,td.catRight,td.row3Right { border-width: 0px 0px 0px 0px; } th.thLeft,td.catLeft { border-width: 0px 0px 0px 0px; } th.thBottom,td.catBottom { border-width: 0px 0px 0px 0px; } th.thTop { border-width: 0px 0px 0px 0px; } th.thCornerL { border-width: 0px 0px 0px 0px; } th.thCornerR { border-width: 0px 0px 0px 0px; } /* The largest text used in the index page title and toptic title etc. */ .maintitle { font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif; text-decoration: none; line-height : 120%; color : #000000; } /* General text */ .gen { font-size : 15px; } .genmed { font-size : 14px; } .gensmall { font-size : 13px; } .gen,.genmed,.gensmall { color : #000000; } a.gen,a.genmed,a.gensmall { color: #336699; text-decoration: none; } a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #336699; text-decoration: underline; } /* The register, login, search etc links at the top of the page */ .mainmenu { font-size : 14px; color : #000000 } a.mainmenu { text-decoration: none; color : #336699; } a.mainmenu:hover{ text-decoration: underline; color : #336699; } /* Forum category titles */ .cattitle { font-weight: bold; font-size: 15px ; letter-spacing: 1px; color : #336699} a.cattitle { text-decoration: none; color : #336699; } a.cattitle:hover{ text-decoration: underline; } /* Desc menu: Text to the forums used in: header.php */ .mainmenu { font-size : 14px; color : #006699; font-weight: bold; } /* Forum title: Text and link to the forums used in: index.php */ .forumlink { font-weight: bold; font-size: 15px; color : #336699; } a.forumlink { text-decoration: none; color : #336699; } a.forumlink:hover{ text-decoration: underline; color : #336699; } /* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */ .nav { font-weight: bold; font-size: 15px; color : #000000;} a.nav { text-decoration: none; color : #336699; } a.nav:hover { text-decoration: underline; } /* titles for the topics: could specify viewed link colour too */ .topictitle,h1,h2 { font-weight: bold; font-size: 15px; color : #000000; } a.topictitle:link { text-decoration: none; color : #336699; } a.topictitle:visited { text-decoration: none; color : #336699; } a.topictitle:hover { text-decoration: underline; color : #336699; } /* Name of poster in viewmsg.php and viewtopic.php and other places */ .name { font-size : 15px; color : #000000;} /* Location, number of posts, post date etc */ .postdetails { font-size : 13px; color : #000000; } /* The content of the posts (body of text) */ .postbody { font-size : 15px; line-height: 18px} a.postlink:link { text-decoration: none; color : #336699 } a.postlink:visited { text-decoration: none; color : #336699; } a.postlink:hover { text-decoration: underline; color : #336699} /* Quote & Code blocks */ .code { font-family: Courier, 'Courier New', sans-serif; font-size: 15px; color: #006600; background-color: #FAFAFA; border: #e6ecf1; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px } .quote { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #444444; line-height: 125%; background-color: #FAFAFA; border: #e6ecf1; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px } /* Copyright and bottom info */ .copyright { font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;} a.copyright { color: #444444; text-decoration: none;} a.copyright:hover { color: #000000; text-decoration: underline;} /* Form elements */ input,textarea, select { color : #000000; font: normal 14px Verdana, Arial, Helvetica, sans-serif; border-color : #000000; border-width : 1px; } /* The text input fields background colour */ input.post, textarea.post, select { background-color : #FFFFFF; } input { text-indent : 2px; } /* The buttons used for bbCode styling in message post */ input.button { background-color : #e6ecf1; color : #000000; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; } /* The main submit button option */ input.mainoption { background-color : #FAFAFA; font-weight : bold; } /* None-bold submit button */ input.liteoption { background-color : #FAFAFA; font-weight : normal; } /* This is the line in the posting page which shows the rollover help line. This is actually a text box, but if set to be the same colour as the background no one will know ;) */ .helpline { background-color: #ccd7e0; border-style: none; } .newsbutton { color: #000000; background-color: #e6ecf1; border: 1px solid #98AAB1; width: 13; height: 13; font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 13pt; border-style: solid; border-width: 1px; cursor: hand; } /* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */ @import url('http://img.xooimage.com/files10/f/o/formie-30d7c.css');

Bonne journée

Dim 17 Déc 2017 - 15:52

Koray Allister

Age : 29Messages : 71

Dim 17 Déc 2017 - 15:52

Je poste juste un message à la suite car je vois pas ta réponse, ce qui est étrange, de plus, mon message précédent est coupé.

Dim 17 Déc 2017 - 17:14

Nihil Scar Winspeare

Messages : 5244

Dim 17 Déc 2017 - 17:14

Hello,

Juste pour prévenir j'ai édité ce message pour mettre des espaces dans < head > et < style >.

En effet, sinon c'est comme si tu ouvrais les balises HTML en plein milieu de ton message et ça causait un bug html qui faisait qu'on ne pouvait plus voir les messages, ça devrait être réglé maintenant :)

Dim 17 Déc 2017 - 17:23

Koray Allister

Age : 29Messages : 71

Dim 17 Déc 2017 - 17:23

C'est vrai que j'avais pas pensé à ça :)
Donc normalement tu devrais pouvoir mettre le css dans ton template dédié histoire que ce soit un peu plus lisible :)
Du coup on est bon pour ta barre de recherche ?

Dim 17 Déc 2017 - 19:32

Kilou1984

Age : 40Messages : 38

Dim 17 Déc 2017 - 19:32

Koray Allister a écrit:
Du coup on est bon pour ta barre de recherche ?

Bonsoir,

Oui, si vous voulez.

Dim 17 Déc 2017 - 20:42

Koray Allister

Age : 29Messages : 71

Dim 17 Déc 2017 - 20:42

Koray Allister a écrit:Du coup on est bon pour ta barre de recherche ?

En disant ça je sous-entendait : "Est-ce que tu as encore besoin de mon aide ou tu as réussis à l'installer et le résultat te convient ?"
S'il y a des modifications à faire n'hésite pas à me le dire :)

Mer 27 Déc 2017 - 1:19

Kilou1984

Age : 40Messages : 38

Mer 27 Déc 2017 - 1:19

Bonjour,

Merci pour l’explication Wink

. Le résultat me convient sauf s'il y a des erreurs de codes :

Code::  <div style="width: 110px; padding-top: 1px; padding-bottom: 2px; border: 0px solid #66AB6B; text-align: left; background: #66AB6B;border-radius: 0px;"> <title>Barre de Recherche</title> <div class="barre"> <form method="post" action="search.php?mode=results"> <input type="text" value=" Rechercher" size="8" onfocus="this.value=''" name="search_keywords" class="post" /> <input type="image" src="https://i62.servimg.com/u/f62/17/26/27/57/loupe111.png" onclick="submit()" name="submit" title="Valider la recherche" /> </form> </div> </div>

Cordialement,

Mer 27 Déc 2017 - 14:08

Koray Allister

Age : 29Messages : 71

Mer 27 Déc 2017 - 14:08

Je n'ai, personnellement, aucune erreur avec ce code, peux-tu me préciser ce qui ne va pas (via un screen ou quelque chose comme ça) ?

Mer 3 Jan 2018 - 3:37

Kilou1984

Age : 40Messages : 38

Mer 3 Jan 2018 - 3:37

Bonsoir,
Je voulais dire que le code que j'ai mis sur le forum me convient au niveau de l'affichage. J'avais juste peur qu'il y ai des erreurs avec ce code, donc, s'il n'y a pas d’erreurs, c'est parfait.

Ce sujet est résolu, merci beaucoup à vous tous pour votre aide et votre patience :ange:

Contenu sponsorisé

Personnaliser une barre de recherche

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée