Adoption de la Parent Tab

<p>Bonsoir ! </p><p>Niko, votre admin bien-aimé va vous faire une proposition ! </p><p>Comme je l'ai marqué dans le titre, ce fil est pour parler de la Parent Tab. </p><p>Alors tout d'abord, pour les incultes, la Parent Tab, qu'est ce que c'est? Et bah... C'est un truc comme ça : </p>

Quand on tape :


{{Parent Tab 

|backcolor=black

|altbackcolor=turquoise

|textcolor=turquoise

|alttextcolor=black

|bordercolor=black

|activeborder=turquoise

|borderradius=6

|height=2.2

|maxwidth=20

|tab1=Introduction

|tab2=Personnalité et Relations

|tab3=Aptitudes et Compétences

|tab4=Histoire

|tab5=Développement du Personnage

|tab6=Autres

}}

On obtient :

<p>
</p> <div style="font-weight:bold; font-size:100%; text-align:center; margin-bottom:0px; clear:both;"> <div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Introduction</span></td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Personnalité et Relations</span> </td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Aptitudes et Compétences</span> </td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Histoire</span> </td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Développement du Personnage</span> </td></tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Autres</span> </td></tr></table></div>
</div> <p>
Donc, venons en au vif du sujet. Je propose d'instaurer cette Parent Tab, dans les grosses pages, comme celles des personnages principaux, comme celle d'Erza Scarlett (et des autres aussi hein ^^), mais également dans celle de l'Arc du Grand Tournoi de la Magie également. </p><p>Pour les pages des personnages, on peut s'inspirer des pages d'OPE (qui utilisent un modèle à peu près comme l'exemple présenté ci-dessus) mais je pense pas que faire comme eux soit une bonne idée. En effet, la partie la plus importante dans les pages de personnages sont les sections "Histoire". C'est donc plutôt sur ces sections qu'il faut se concentrer. Je proposerai plutôt un découpage comme ceci : </p><p>
</p> <div style="font-weight:bold; font-size:100%; text-align:center; margin-bottom:0px; clear:both;"> <div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Introduction</span></td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Histoire (X784)</span> </td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Histoire (X791)</span> </td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Aptitudes et Compétences</span> </td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Informations Diverses</span> </td></tr></table></div>
</div> <p>
Où l'on mettrait dans l'introduction l'apparence ainsi que la personnalité du personnage. Découper l'Histoire en deux parties ferait déjà plus équilibré, facilitant la navigation, mais si c'est encore trop, on peut évidemment penser à un autre découpage (un découpage pour chaque arc c'est à éviter, trop d'onglets tuent l'onglet, surtout qu'ils sont limités à 9), donc si vous avez des idées, proposez les, ceci n'est qu'un exemple. Bon ensuite pour les Aptitudes et Compétences, on y mettrait les capacités des persos, et dans les information diverses, le reste, comme les combats, les stats, les citations, les détails supplémentaires etc... </p><p>En ce qui concerne les autres grosses pages, comme celle de l'Arc du Grand Tournoi de la Magie, j'aurais pensé à un découpage comme ceci : </p><p>
</p> <div style="font-weight:bold; font-size:100%; text-align:center; margin-bottom:0px; clear:both;"> <div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Introduction & Divers</span></td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Avant le Tournoi</span> </td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Préliminaires</span> </td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">1er Jour</span> </td> </tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">2e Jour</span> </td></tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">3e Jour</span> </td></tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">4e Jour</span> </td></tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">5e Jour</span> </td></tr></table></div><div style="min-width:5.0em; max-width:20em; float:left; border:1.5px solid black; -moz-border-radius-topright: 6px; -moz-border-radius-topleft: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; padding: .0em 0.5em; height:2.2em; margin-bottom:10px; background-color:turquoise;"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;"><span style="color:black;">Post-Tournoi</span> </td></tr></table></div>
</div> <p>
Donc voilà, dites moi ce que vous en pensez, bien sûr les couleurs citées ne sont qu'un exemple, on pourra en mettre d'autre plus en rapport avec les pages. </p><p>Et surtout, si vous avez d'autres idées pour le découpage des pages, proposez les ! Si d'autres questions posez les j'y répondrai et si des propositions pertinentes à ce propos voient le jour, je les ajouterai ici-même. </p><p>Niko. </p><p>EDIT : </p><p>Un autre modèle est également susceptible d'être adopé : celui de l'onglet. Il s'agit exactement (enfin presque, il y a quelques différences techniques tout de même) du même système, c'est juste l'apparence qui change. Je vous laisse choisir ;) </p> <table style="margin: 0 auto;"><tr><td><div style="font-weight:bold; text-align:center; margin-bottom:0px;"> <div style="min-width: 5.0em; float: left; border:0.5px solid {{{color1}}}; background-color:{{{color2}}}; color:{{{color3}}}; -moz-border-radius:1ex; border-radius:1ex;; padding:5px; padding-bottom:7px;; font-variant: small-caps"> <table style="height: 100%; width: 100%;"><tr><td style="vertical-align:center;">Introduction</td></tr></table></div><div style="min-width: 5.0em; float: left; border:0.5px solid {{{color1}}}; background-color:{{{color2}}}; color:{{{color3}}}; -moz-border-radius:1ex; border-radius:1ex;; padding:5px; padding-bottom:7px;; font-variant: small-caps"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;">Histoire (X784) </td> </tr></table></div><div style="min-width: 5.0em; float: left; border:0.5px solid {{{color1}}}; background-color:{{{color2}}}; color:{{{color3}}}; -moz-border-radius:1ex; border-radius:1ex;; padding:5px; padding-bottom:7px;; font-variant: small-caps"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;">Histoire (X791) </td> </tr></table></div><div style="min-width: 5.0em; float: left; border:0.5px solid {{{color1}}}; background-color:{{{color2}}}; color:{{{color3}}}; -moz-border-radius:1ex; border-radius:1ex;; padding:5px; padding-bottom:7px;; font-variant: small-caps"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;">Aptitudes et Compétences </td> </tr></table></div> <div style="min-width: 5.0em; float: left; border:0.5px solid {{{color1}}}; background-color:{{{color2}}}; color:{{{color3}}}; -moz-border-radius:1ex; border-radius:1ex;; padding:5px; padding-bottom:7px;; font-variant: small-caps"> <table style="height:100%;width:100%;"><tr><td style="vertical-align:center;">Informations Diverses </td> </tr></table></div> <div style="clear:both;"></div> </div> </td></tr></table><p>
</p><p>Donc, nous allons procéder à un petit vote : </p> <div class="ajax-poll" id="ajax-poll-E096BD11F74F7AD7B003AD4B21AB087B"><div class="header">Quel modèle souhaitez vous voir adopter? : </div><div id="wpPollStatusE096BD11F74F7AD7B003AD4B21AB087B" class="center"> </div><form action="#" method="post" id="axPollE096BD11F74F7AD7B003AD4B21AB087B"><input type="hidden" name="wpPollId" value="E096BD11F74F7AD7B003AD4B21AB087B"><div id="ajax-poll-area"><div class="pollAnswer" id="pollAnswer2"><div class="pollAnswerName">La Parent Tab </div><div class="pollAnswerVotes" onmouseover='span=this.getElementsByTagName("span")[0];tmpPollVar=span.innerHTML;span.innerHTML=span.title;span.title="";' onmouseout='span=this.getElementsByTagName("span")[0];span.title=span.innerHTML;span.innerHTML=tmpPollVar;'><span id="wpPollVoteE096BD11F74F7AD7B003AD4B21AB087B-2" title="67.86% de tous les votes">19</span><div class="wpPollBarE096BD11F74F7AD7B003AD4B21AB087B" id="wpPollBarE096BD11F74F7AD7B003AD4B21AB087B-2" style="width: 67.86%; border:0;"> </div></div></div><div class="pollAnswer" id="pollAnswer3"><div class="pollAnswerName">L'Onglet </div><div class="pollAnswerVotes" onmouseover='span=this.getElementsByTagName("span")[0];tmpPollVar=span.innerHTML;span.innerHTML=span.title;span.title="";' onmouseout='span=this.getElementsByTagName("span")[0];span.title=span.innerHTML;span.innerHTML=tmpPollVar;'><span id="wpPollVoteE096BD11F74F7AD7B003AD4B21AB087B-3" title="25% de tous les votes">7</span><div class="wpPollBarE096BD11F74F7AD7B003AD4B21AB087B" id="wpPollBarE096BD11F74F7AD7B003AD4B21AB087B-3" style="width: 25%; border:0;"> </div></div></div><div class="pollAnswer" id="pollAnswer4"><div class="pollAnswerName">Aucun des deux </div><div class="pollAnswerVotes" onmouseover='span=this.getElementsByTagName("span")[0];tmpPollVar=span.innerHTML;span.innerHTML=span.title;span.title="";' onmouseout='span=this.getElementsByTagName("span")[0];span.title=span.innerHTML;span.innerHTML=tmpPollVar;'><span id="wpPollVoteE096BD11F74F7AD7B003AD4B21AB087B-4" title="7.14% de tous les votes">2</span><div class="wpPollBarE096BD11F74F7AD7B003AD4B21AB087B" id="wpPollBarE096BD11F74F7AD7B003AD4B21AB087B-4" style="width: 7.14%; border:0;"> </div></div></div><div class="pollAnswer" id="pollAnswer5"><div class="pollAnswerName">Je ne souhaite pas m'exprimer </div><div class="pollAnswerVotes" onmouseover='span=this.getElementsByTagName("span")[0];tmpPollVar=span.innerHTML;span.innerHTML=span.title;span.title="";' onmouseout='span=this.getElementsByTagName("span")[0];span.title=span.innerHTML;span.innerHTML=tmpPollVar;'><span id="wpPollVoteE096BD11F74F7AD7B003AD4B21AB087B-5" title="0">0</span><div class="wpPollBarE096BD11F74F7AD7B003AD4B21AB087B" id="wpPollBarE096BD11F74F7AD7B003AD4B21AB087B-5" style="width: 0%;"> </div></div></div>
<div>Ce sondage a été créé le novembre 2, 2014 17:45 et <span class="total" id="wpPollTotalE096BD11F74F7AD7B003AD4B21AB087B">28</span> personnes ont déjà voté. </div></div>Le sondage est désormais terminé. Comparez les résultats. </form></div>