[chargement/formulaire] Le forumline prend le CSS du formulaire

par Self Lun 29 Juil 2013 - 14:18

Bonjour à tous et toute Very Happy

.

Il y à de sa un petit bout de temps j'ai instauré sur mon forum un formulaire de présentation qui est sur cette page.

Le code de ce formulaire est le suivant:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr"> <head><title>French Gamers Community</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" type="image/x-icon" href="http://uprapide.com/images/invite/blason_51.jpg" /> <style type="text/css">hr{color:transparent!important;margin-right:50px;margin-left:50px;border:1px dotted #333} a:active, a:visited, a:link{color:red;text-decoration:none} a:hover{color:darkred;text-decoration:underline} body{text-shadow:5px 5px 5px #000;background:transparent;font-family:Arial;font-size:10px} i{color:red;font-weight:700;font-size:9px} p{margin:3px;color:#b5b5b5;font-weight:700} fieldset{border-radius:5px;box-shadow:5px 5px 5px #000;border:1px solid red;background-image:url(http://img90.xooimage.com/files/b/d/8/fondcoincoinfgc-3c291c8.png);background-color:transparent;margin:0} legend{font-family:Arial, Arial Black, Georgia, Times New Roman, Times, serif;color:red;margin-left:50px;font-size:16px;font-weight:700} input, textarea, select{border-radius:5px;box-shadow:3px 3px 3px #000;border:1px solid red;margin-left:5px;font-family:Arial, Arial Black, Georgia, Times New Roman, Times, serif;color:#b5b5b5;background-image:url();background-color:#202020} input:focus, textarea:focus, select:focus{border-radius:5px;box-shadow:3px 3px 3px #000;background-image:url();background-color:#404040} input[type=checkbox], input[type=radio]{box-shadow:none!important;background-color:transparent!important;background-image:url(//2img.net/i/fa/empty.gif)!important;border-style:none!important} label, input{margin-left:5px;color:#b5b5b5;font-weight:700} </style> <script type="text/javascript" src="http://www.aht.li/2083534/present.js"></script> <script type="text/javascript">//<![CDATA[ function verifchamps(){return 0==document.getElementById("pseudo").value.length?(document.getElementById("errormsg").innerHTML="Vous n'avez pas renseign\u00e9 votre nickname !",!1):0==document.getElementById("prenom").value.length?(document.getElementById("errormsg").innerHTML="Vous n'avez pas renseign\u00e9 votre pr\u00e9nom !",!1):0==document.getElementById("yn").value.length?(document.getElementById("errormsg").innerHTML="Vous n'avez pas renseign\u00e9 ce que vous d&eacutesirez !",!1):!0}function norightclick(){return!0}document.oncontextmenu=norightclick; function envoiMessage(a){var b="",b='<fieldset style="margin-top:20px; margin-bottom:20px; background:url(http://img90.xooimage.com/files/b/d/8/fondcoincoinfgc-3c291c8.png) repeat-y #111; width: 95%; padding: 15px; border: 1px solid '+a.color.value+'; text-shadow:5px 5px 5px #000; box-shadow: 5px 5px 5px #000; border-radius: 5px;"><legend style="font-weight:700; font-size:30px; color:'+a.color.value+';">'+a.pseudo.value+'</legend>\n<b style="color:'+a.color.value+';">\u256d Profil batlefield : </b><a href="http://battlelog.battlefield.com/bf3/fr/user/'+ a.pseudo.value+'" style="color:'+a.color.value+'; text-decoration:none;" title="External link (battlefield.com)" target="_blank">'+a.pseudo.value+'</a>\n<b style="color:'+a.color.value+';">\u251c Prénom : </b>'+a.prenom.value+'\n<b style="color:'+a.color.value+';">\u251c Age : </b>'+a.age.value+' ans\n<b style="color:'+a.color.value+';">\u251c Vos jeux : </b>';for(c=0;c<a.jeux.length;c++)!0==a.jeux[c].checked?b=b+' <b style="color:'+a.color.value+';">☑</b> '+ a.jeux[c].value+" ":!1==a.jeux[c].checked&&(b=b+" ");b=b+' <b style="color:'+a.color.value+';">☑</b> '+a.autre.value+'\n<b style="color:'+a.color.value+';">\u251c Je désire : </b>';for(c=0;c<a.recrutement.length;c++)!0==a.recrutement[c].checked&&(b+=a.recrutement[c].value);b=b+'\n<b style="color:'+a.color.value+';">\u251c Localisation : </b>'+a.flag.value+'\n<b style="color:'+a.color.value+';">\u251c Loisirs : </b>'+a.loisirs.value+'\n<b style="color:'+a.color.value+';">\u2570 Autres : </b>'+ a.autres.value+"\n",b=b+"\n\nAu plaisir ingame, "+a.prenom.value+".\n</fieldset>";a.message.value=b;a.subject.value="Présentation de "+a.prenom.value+" - "+a.pseudo.value};//]]> </script> </head> <body> <form method="post" action="/post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this);" target="_parent"><input type="hidden" name="lt" value="0" /><input type="hidden" name="mode" value="newtopic" /><input type="hidden" name="auth[]" value="" /><input type="hidden" name="topictype" value="0" /><input type="hidden" name="message" value="" /><input type="hidden" name="f" value="3" /><fieldset><legend>Formulaire De Présentation</legend><p><input type="hidden" name="subject" id="titre" value="" /></p><p><input type="hidden" name="username" id="username" value="" /></p><p><label for="pseudo"><i>*</i>Nickname ingame :</label><input type="text" name="pseudo" id="pseudo" size="30" maxlength="16" /></p><p><label for="prenom"><i>*</i>Prénom :</label><input type="text" name="prenom" id="prenom" size="30" /></p><p><label for="age">Age : </label><select name="age" id="age" style="background-color:#111111; color:#999999; border:1px solid #313131;"><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14" selected="selected">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option></select></p> <p><label>Vos jeux:</label><input id="Battlefield 3" type="checkbox" value="Battlefield 3" name="jeux" style="cursor:pointer;"></input><label for="Battlefield 3">Battlefield 3</label> <input id="LOL" type="checkbox" value="League Of Legends" name="jeux" style="cursor:pointer;"></input><label for="LOL">League Of Legends</label> <input id="WarT" type="checkbox" value="War Thunder" name="jeux" style="cursor:pointer;"></input><label for="WarT">War Thunder</label> <label for="other">Autre :</label><input type="text" name="autre" id="other" size="30" /></p> <p><label>Vous désirez:</label><input id="yn" type="radio" value="être recruter" name="recrutement" style="cursor:pointer;"></input><label for="yn">Poster une demande de recrutement</label> <input id="ny" type="radio" value="être simple visiteur" name="recrutement" style="cursor:pointer;"></input><label for="ny">Poster en tant que simple invité</label></p> <p><label for="flag">Localisation :</label><input type="text" name="flag" id="flag" size="30" /></p><p><label for="loisirs">Loisirs :</label><input type="text" name="loisirs" id="loisirs" size="30" /></p><p><label for="age">Choisissez une couleur :</label><input id="sample_1" type="button" style="background-image:none; background-color:darkred; cursor:pointer;" onclick="showColorGrid2('color','sample_1');" value=".." /><input name="color" type="text" id="color" size="8" maxlength="7" value="darkred" /></p><p><label for="autres">Autres , libre à toi :</label><br /><textarea style="width:98%; height:150px;" name="autres" id="autres" cols="2" rows="2"></textarea></p><span style="float:right; padding:0 10px;"><input type="reset" value="Réinitialiser" onclick="return confirm('Veuillez confirmer !');" style="cursor:pointer;" /><input type="submit" name="post" value="Envoyer" onclick="return verifchamps();" style="cursor:pointer;" /></span><div align="center" style="text-decoration:blink; color:orange; font-size:11px;" id="errormsg"></div><div id="colorpicker201" class="colorpicker201"></div><p align="left">Une fois présenter tu sera automatiquement placer dans le rang <font color="orange">Invités</font><br /><br /><b>Note :</b> Les champs marqués d'un (<i>*</i>) sont obligatoires</p><p align="right"> 2013 French Gamers Community </p></fieldset></form></body></html>

Il est accompagné d'un code javascript héberger sur Archive Host qui est le suivant:

Code:: function getScrollY(){var scrOfX=0,scrOfY=0;if(typeof(window.pageYOffset)=='number'){scrOfY=window.pageYOffset;scrOfX=window.pageXOffset;}else if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){scrOfY=document.body.scrollTop;scrOfX=document.body.scrollLeft;}else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){scrOfY=document.documentElement.scrollTop;scrOfX=document.documentElement.scrollLeft;}return scrOfY;}document.write("<style type='text/css'>.colorpicker201{visibility:hidden;display:none;position:absolute;background:#111111;border:solid 1px red;padding:3px;z-index:999;filter:progid:DXImageTransform.Microsoft.Shadow(color=#D0D0D0,direction=135);}.o5582brd{padding:0;width:12px;height:14px;border-bottom:solid 1px #DFDFDF;border-right:solid 1px #DFDFDF;}a.o5582n66,.o5582n66,.o5582n66a{font-family:arial,tahoma,sans-serif;text-decoration:underline;font-size:9px;color:#666;border:none;}.o5582n66,.o5582n66a{text-align:center;text-decoration:none;}a:hover.o5582n66{text-decoration:none;color:darkred;cursor:pointer;}.a01p3{padding:1px 4px 1px 2px;background:whitesmoke;border:solid 1px #DFDFDF;}</style>");function getTop2(){csBrHt=0;if(typeof(window.innerWidth)=='number'){csBrHt=window.innerHeight;}else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){csBrHt=document.documentElement.clientHeight;}else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){csBrHt=document.body.clientHeight;}ctop=((csBrHt/2)-115)+getScrollY();return ctop;}var nocol1="NO COLOR",clos1="CLOSE",tt2="FREE-COLOR-PICKER.COM",hm2="http://www.";hm2+=tt2;tt2="POWERED by FCP";function getLeft2(){var csBrWt=0;if(typeof(window.innerWidth)=='number'){csBrWt=window.innerWidth;}else if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){csBrWt=document.documentElement.clientWidth;}else if(document.body&&(document.body.clientWidth||document.body.clientHeight)){csBrWt=document.body.clientWidth;}cleft=(csBrWt/2)-125;return cleft;}function setCCbldID2(objID,val){document.getElementById(objID).value=val;}function setCCbldSty2(objID,prop,val){switch(prop){case"bc":if(objID!='none'){document.getElementById(objID).style.backgroundColor=val;};break;case"vs":document.getElementById(objID).style.visibility=val;break;case"ds":document.getElementById(objID).style.display=val;break;case"tp":document.getElementById(objID).style.top=val;break;case"lf":document.getElementById(objID).style.left=val;break;}}function putOBJxColor2(OBjElem,Samp,pigMent){if(pigMent!='x'){setCCbldID2(OBjElem,pigMent);setCCbldSty2(Samp,'bc',pigMent);}setCCbldSty2('colorpicker201','vs','hidden');setCCbldSty2('colorpicker201','ds','none');}function showColorGrid2(OBjElem,Sam){var objX=new Array('00','33','66','99','CC','FF');var c=0;var z='"'+OBjElem+'","'+Sam+'",""';var xl='"'+OBjElem+'","'+Sam+'","x"';var mid='';mid+='<table bgcolor="#111111" border="0" cellpadding="0" cellspacing="0" style="border:solid 0px #3dc3c5;padding:3px;"><tr>';mid+="<td colspan='18' align='left' style='font-size:10px;background:#6666CC;color:#FFF;font-family:arial;'> Chromatic Selection Palette</td></tr><tr><td colspan='18' align='center' style='margin:0;padding:2px;height:12px;' ><input class='o5582n66' type='text' size='12' id='o5582n66' value='#111111'><input class='o5582n66a' type='text' size='2' style='width:14px;' id='o5582n66a' onclick='javascript:alert(\"click on selected swatch below...\");' value='' style='border:solid 1px #666;'> | <a class='o5582n66' href='javascript:onclick=putOBJxColor2("+z+")'><span class='a01p3'>"+nocol1+"</span></a> <a class='o5582n66' href='javascript:onclick=putOBJxColor2("+xl+")'><span class='a01p3'>"+clos1+"</span></a></td></tr><tr>";var br=1;for(o=0;o<6;o++){mid+='</tr><tr>';for(y=0;y<6;y++){if(y==3){mid+='</tr><tr>';}for(x=0;x<6;x++){var grid='';grid=objX[o]+objX[y]+objX[x];var b="'"+OBjElem+"', '"+Sam+"','#"+grid+"'";mid+='<td class="o5582brd" style="background-color:#'+grid+'"><a class="o5582n66" href="javascript:onclick=putOBJxColor2('+b+');" onmouseover=javascript:document.getElementById("o5582n66").value="#'+grid+'";javascript:document.getElementById("o5582n66a").style.backgroundColor="#'+grid+'"; title="#'+grid+'"><div style="width:12px;height:14px;"></div></a></td>';c++;}}}mid+="</tr><tr><td colspan='18' align='right' style='padding:2px;border:solid 1px #FFF;background:#FFF;'><a href='"+hm2+"' style='color:#666;font-size:8px;font-family:arial;text-decoration:none;letter-spacing:1px;'>"+tt2+"</a></td></tr></table>";var ttop=getTop2();setCCbldSty2('colorpicker201','tp','240px');document.getElementById('colorpicker201').style.left=getLeft2();setCCbldSty2('colorpicker201','vs','visible');setCCbldSty2('colorpicker201','ds','block');document.getElementById('colorpicker201').innerHTML=mid;}

Pour finir et faire charger ce dernier dans le forumline j'ai appliquer ce code:

Code:: $(function () { /* On verifie que l'on soit bien sur la page de creation d'un nouveau sujet ../post?f=3&mode=newtopic */ if (document.location.pathname == "/post" && /^\?f=3&mode=newtopic$/.test(document.location.search)) { /* Si on est bien sur la page on charge le formulaire qui se trouve sur la page ../h7- et on insere tout ce qui ce trouve dans le div qui porte la class forumline */ $('form[name=post]').load('/h7-formulaire-presentation-div.forumline'); } });

Tout cela fonctionne seulement comme indiqué dans le titre de mon sujet le forumline prend en compte le CSS du formulaire et non celui du forum.
quelq'un aurait-il une solution à ce problème ?

Très bonne journée à tous et toutes Smile

.

par Self Mar 30 Juil 2013 - 16:41

par Self Mer 31 Juil 2013 - 20:46

par Scoubifitz Jeu 1 Aoû 2013 - 12:57

SeLfde4Th7 a écrit:Bonjour à tous et toute .

Il y à de ça un petit bout de temps j'ai instauré sur mon forum un formulaire de présentation qui est sur cette page.

Tout cela fonctionne . Seulement comme indiqué dans le titre de mon sujet , le forumline prend en compte le CSS du formulaire et non celui du forum.
Quelqu’un aurait-il une solution à ce problème ?

Très bonne journée à tous et toutes .

Bonjour,

Comme il n'y a pas de forumline dans la version invision , et qu'il n'y a aucun identifiant "forumline" dans le formulaire , pourriez vous expliquer plus en détail - voire rajouter des screens - le problème qui vous tracasse ?

par Self Jeu 1 Aoû 2013 - 15:47

Bonjour et merci de ta réponse Scoubifitz Smile

.

Voici un screen pour l'illustration du problème.

[chargement/formulaire] Le forumline prend le CSS du formulaire Formpre

Le background du forum charge, mais un fond blanc vien le cacher.
Certaines couleurs de lien tel celui du panneau d'administration prennent la couleur rouge, le selecteur pour naviguer entre les forum également.
Tout le texte du forum prend l'ombre portée aussi.
Voilà ce qui cloche.

PS: je vais très certainement bientôt changer de version pour aller ver un forum phpBB3.

Cordialement Smile

.

par Scoubifitz Jeu 1 Aoû 2013 - 17:20

pas besoin de changer de version pour si peu ...

dans le style du formulaire , repérez le body{...} et remplacez par form{...}

comme ça , il n'y aura que le formulaire qui prendra les changements du CSS et pas toute la page ...

par Self Jeu 1 Aoû 2013 - 17:41

Bonjour.

Je ne change pas de version pour ce problème, c'est un question de patique et fluidité Wink

.
Votre solution à fonctionné pour le background et l'ombre porté , seulement certain lien reste d'une couleur qu'il devrais pas et également le sélecteur pour naviguer entre les forum.
Pour les liens ce n'est pas pas grave, je verrais quand je referais mon thème, mais j'aimerais avoir une solution si possible pour le sélecteur Smile

Merci déjà pour le problème régler Yahoo

.

par Scoubifitz Jeu 1 Aoû 2013 - 17:54

remplacez le style du formulaire par celui ci , j'ai juste rajouté "form" aux balises pour dire au CSS de ne réagir que dans le formulaire :

Code:: <style type="text/css"> form hr{ color:transparent!important; margin-right:50px; margin-left:50px; border:1px dotted #333 } form a:active,form a:visited,form a:link{ color:red; text-decoration:none } form a:hover{ color:darkred; text-decoration:underline } form{ text-shadow:5px 5px 5px #000; background:transparent; font-family:Arial; font-size:10px } form i{ color:red; font-weight:700; font-size:9px } form p{ margin:3px; color:#b5b5b5; font-weight:700 } form fieldset{ border-radius:5px; box-shadow:5px 5px 5px #000; border:1px solid red; background-image:url(http://img90.xooimage.com/files/b/d/8/fondcoincoinfgc-3c291c8.png); background-color:transparent; margin:0 } form legend{ font-family:Arial, Arial Black, Georgia, Times New Roman, Times, serif; color:red; margin-left:50px; font-size:16px; font-weight:700 } form input,form textarea,form select{ border-radius:5px; box-shadow:3px 3px 3px #000; border:1px solid red; margin-left:5px; font-family:Arial, Arial Black, Georgia, Times New Roman, Times, serif; color:#b5b5b5; background-image:url(); background-color:#202020 } form input:focus,form textarea:focus,form select:focus{ border-radius:5px; box-shadow:3px 3px 3px #000; background-image:url(); background-color:#404040 } form input[type=checkbox], form input[type=radio]{ box-shadow:none!important; background-color:transparent!important; background-image:url(//2img.net/i/fa/empty.gif)!important; border-style:none!important } form label,form input{ margin-left:5px; color:#b5b5b5; font-weight:700 } </style>

par Self Jeu 1 Aoû 2013 - 18:12

Humm, ceci à fonctionner pour les lien mais le selecteur fait encore des siennes.

Merci pour les lien Smile

.

par Scoubifitz Jeu 1 Aoû 2013 - 18:33

pourriez vous expliquer ce qui ne fonctionne pas ?

édit : j'ai compris ! ^^ c'est le sélecteur endessous qui prend le CSS du formulaire ...

vous pouvez le supprimer , puisque vous avez mis un style direct au sélecteur de l'age :

remplacez :

Code:: form input,form textarea,form select{ border-radius:5px; box-shadow:3px 3px 3px #000; border:1px solid red; margin-left:5px; font-family:Arial, Arial Black, Georgia, Times New Roman, Times, serif; color:#b5b5b5; background-image:url(); background-color:#202020 } form input:focus,form textarea:focus,form select:focus{ border-radius:5px; box-shadow:3px 3px 3px #000; background-image:url(); background-color:#404040 }

par :

Code:: form input,form textarea{ border-radius:5px; box-shadow:3px 3px 3px #000; border:1px solid red; margin-left:5px; font-family:Arial, Arial Black, Georgia, Times New Roman, Times, serif; color:#b5b5b5; background-color:#202020 } form input:focus,form textarea:focus{ background-color:#404040 }

par Self Jeu 1 Aoû 2013 - 19:43

Bonjour.

Une partie à fonctionner, cependant il prend toujours en compte cette partie:

Code:: form fieldset{ border-radius:5px; box-shadow:5px 5px 5px #000; border:1px solid red; background-image:url(http://img90.xooimage.com/files/b/d/8/fondcoincoinfgc-3c291c8.png); background-color:transparent; margin:0 }

Et de ce faite il reste l'ombre et le contour rouge :/.

par Scoubifitz Jeu 1 Aoû 2013 - 19:51

j'en oublie toujours que les balises form sont utilisées ailleurs sur le forum ...

reprérez ceci et rajoutez la class :

<form class="form" method="post" action="/post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this);" target="_parent">

... et mettez un point devant chaque "form" dans le CSS
( .form .... )

par Self Jeu 1 Aoû 2013 - 20:04

Tout est magnifique grâce à toi, merci beaucoup de ton aide Yes

.

Bonne soirée Smile

.

[chargement/formulaire] Le forumline prend le CSS du formulaire

[chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire

Re: [chargement/formulaire] Le forumline prend le CSS du formulaire