FANDOM


Hihi, a que coucou tout le monde :3 Alors je vais aborder un sujet populaire... Le codage et les modèles! Dans ce billet de blog, vous verrez comment construire une infobox, créer des parents tabs, des boîtes à textes et tout le tralala. Bon, je ne suis ni prof ni rien, je vais faire de mon mieux pour être claire et si vous avez une question ou une demande, je ferais tout mon possible pour vous répondre et vous aider. La pro du codage du wiki, c'est l'admin JealyJ. Il ne faut pas se mentir, elle est pas Mepiste pour rien :') Mais bon, yé vé faire mon sensei pour cette fois :')

Signification

Prenons un exemple simple. Si je veux faire un rond par exemple je devrais taper ce code :

{| style="width:200px; height:200px; background:red; border-radius:100px;"
|-
|
|}

Ceux qui nouqs donnera un rond rouge comme ceci :

Le mot "width" correspond à la "largeur". Plus on met un chiffre élevé et plus le modèle sera large. Inversement plus le nombre est petit, plus le modèle sera "mince".

Le mot "height" correspond à "hauteur". C'est la même chose que "widht" concernant les différentes tailles.

Pour faire un cercle, il faut que la largeur et la hauteur soit égaux. Pour obtenir le modèle ci-dessus, il faut déjà commencer par taper:

 {| style="width:200px; "height:200px;

Comme vous le voyez, les nombres sont pareils. Mais ce n'est pas fini! Pour coloré le cercle, il nous faut le code "background". Grâce à lui, il suffit de mettre le nom de la couleur désirée à sa suite. Ce qui nous donne en tout pour le moment :

 {| style="width:10px; height:200px; background:red;

Si je veux un rond rouge, je mets "red". Bon vous le savez tous (enfin j'espère hein :')) Un cercle a des bords arrondis. (Non jure...) Pour obtenir un cercle il faut donc un dernier code qui arrondira les contours jusqu'à nous donner un cercle : "border-radius". Mettez ensuite le nombre "100px" pour obtenir un cercle. Je précise que "px" est l'unité de mesure du codage. Donc, finissons notre modèle!

 {| style="width:10px; height:200px; background:red; border-radius:100px

C'est fini! Non? Ah bon? Mais oui, le modèle n'est pas fermé! Voici ce que vous devez rajouter pour finir le modèle :

 {| style="width:200px; height:200px; background:red; border-radius:100px;"
|-
|
|}

Pourquoi je vous ai fais une paranthèse sur ça? Eh bien parce qu'avant de se lancer dans la création de modèle plus complexe, il vous faut déjà maîtriser les bases. Maintenant, passons au niveau supérieur! :)

Différentes balises utiles

Balises

Je vais vous montrer différentes balises utiles en général. En gros les principales, les plus importantes. Je rappelle que cette partie est vraiment pour les débutants dans le codage, les autres circulez y a rien à voir mdr :')

  • Pour grossir son texte il vous faut mettre cette balise :
    <big>
    Sachant qu'une balise s'ouvre et se ferme, voici ce que vous devrez mettre : 
    <big>{{{vousmettezvotretexte}}}</big>
    et vous mettez cette balise autant de fois que vous voulez grossir votre texte. Exemple si je tape :
    <big><big><big>Blablaaa</big></big></big>
    ça donnera : Blablaaa
  • Pour rapetisser votre texte, vous faites exactement la même chose avec la balise :
    <small>
    Donc vous mettez :
    <small><small><small>Voilà voilà</small></small></small>
    ce qui vous donnera : Voilà voilà
  • Pour centrer votre texte, utilisé la balise :
    <center>
    Comme ceci :
    <center>Doncmettezvotretexte</center>
    ce qui vous donnera :
    Doncmettezvotretexte

Coloriage!

  • Colooooriage! :3 Nan nan j'vous arrête tout de suite, on va continuer le codage x) Comment colorer son texte pour que votre paragraphe y soit swaggy poney? Hihi, alors tout d'abord je vous donne le code a tapé avant de détailler :
<font color= palevioletred>C'est trop swaggy le poney heingu?</font>
Alors
<font color>
c'est pour la couleur de votre texte. Donc dans ce cas présent c'est "palevioletred". Et... C'est tout. Vous avez juste besoin de la balise
<font>
pour colorer votre texte. C'est trop swaggy le poney heingu?
  • MOI J'VEUX TOUT PTN J'SUIS ACCRO. Oklm, je réponds à la demande :p
Eh bien rien de plus simple. Vous commandez une formule big codage? Ok j'vous mets même un supplément boisson pour centrer :
<center>
<big><font color= palevioletred>Swaggy le poney!</font></big></center>
Vous rajoutez juste la balise
<center>
et la balise
<big>
ipuis c'est tout bon! :3

Swaggy le poney!

Boîte à texte

Alors je commence par les boîtes à texte, car se sont les plus "simples" à réaliser. Voici le modèle que vous devez utiliser :

<center>
<div style="width:450px; border:2px solid black; background:blue; font-size:20px; border-radius:2em 2em 2em 2em;">
<p style="color:black;text-shadow:5px 5px 5px blue; text-align:center;">'''{{{titre}}}'''</p>
</div>
</center>

Ce qui vous donnera :

{{{titre}}}

Vous voyez marqué le code
<div>
. Ne vous inquiétez pas ça ne change rien à ce que vous avez appris plus haut. C'est juste un modèle avec des balises différentes. Vous reconnaissez les codes "width", "background", "border-radius". Mais voilà, il y en a des nouveaux!

"color" correspond à la couleur de votre texte. "text-align" à la position du texte : à gauche, à droite, en haut, en bas, centré, etc... Bien sûre à la place de {{{titre}}} vous mettez le texte de votre boîte à texte. Vous pouvez vous contenter de ces codes. Mais vous verrez aussi "text-shadow". Ce code vous permez de faire une sorte de "reflet" flou derrière votre texte. Vous pouvez regardez le résultat sur le modèle ci-dessus, c'est le "truc" blanc derrière le titre x) Vu que c'est un "bonus", quelque chose que vous n'êtes pas obligé de faire, je ne vais pas m'attarder dessus. A la place de white vous mettez la couleur de votre choix et cette couleur deviendra un nuage flou derrière le titre.

J'ai aussi rajouté les balises
<center>
(je rappelle qu'une balise s'ouvre
<center>
et se ferme
</center>
) Elles servent à placer le modèle au centre de la page et non à droite ou à gauche.

Et vous avez votre boîte à texte! :)

Parent Tab

Pour créer une Parent Tab, voici le modèle à utiliser :

{{Parent Tab
| backcolor     = black
| altbackcolor  = black
| textcolor     = Black
| alttextcolor  = black
| bordercolor   = blue
| activeborder  = blue
| borderradius  = 6
| font-size     = 
| height        = 2.2
| minwidth      = 
| maxwidth      = 
| tab1 =<span style="color: blue;">''Premier titre de section''</span>
| tab2 =Second titre|titre2 =<span style="color: blue;">''second titre''</span> 
| tab3 =troisième titre|titre3 =<span style="color: blue;">''troisième titre''</span>

}}

Ce qui vous donnera :

Alors ce n'est pas la même présentation que les autres modèles, je dois vous avouer que je ne sais pas comment fonctionne les autres, mais moi c'est comme ça donc bon je vais vous apprendre avec ce système ^^.

  • Backcolor: couleur de la boîte
  • Altbackcolor: couleur de la boîte sélectionnée
  • Textcolor: couleur du texte
  • Alttextcolor: couleur du texte sélectionné
  • Bodercolor: couleur contours
  • Border-radius: Bords variant du arrondis au pointu

Bon pour "height" vous connaissez et le reste n'est pas utile pour le moment. :)

Ensuite vous avez des lignes "tab1", "tab2" et "tab3". Cela correspond aux différentes sections de votre Parent Tab. Vous mettez la couleur de la boîte après "color", le titre entre les et c'est tout bon! N'oubliez pas de refermer avec les crochets et votre Tab est prête! :3

Infobox

Voilà le modèle d'une infobox :

{| class="infobox" cellpadding="2" cellspacing="0" style="width:20em;font-size: 100%; border-radius:0em 0em 5em 5em;"  border="0" 
|-
! colspan="2" style="background-color:orange; color:white; border-radius:0em 0em 5em 5em;" | 
'''<big>{{{nom}}}</big>'''
|-
|align="center" colspan="2" | {{{image}}}
{|cellspacing="1" cellpadding="0" border="0" width="100%"
|valign="top" width="50%" style="background:white;color:orange;border-radius:5em 5em 0em 0em;" |'''<center>Prénom</center>'''
|valign="top" width="50%"  style="width:15em;" |{{{prénom}}}
|-
|valign="top" width="50%" style="background:white;color:orange;border-radius:5em 5em 0em 0em;" |'''<center>Alias</center>'''
|valign="top" width="50%"  style="width:15em;" |{{{alias}}}
|-
|valign="top" width="50%" style="background:white;color:orange;border-radius:5em 5em 0em 0em;" |'''<center>Age</center>'''
|valign="top" width="50%"  style="width:15em;" |{{{âge}}}
|}
{|cellspacing="1" cellpadding="0" border="0" width="100%"
|valign="top" width="50%" style="background:white;color:orange;border-radius:5em 5em 0em 0em;" |'''<center>Prénom</center>'''
|valign="top" width="50%"  style="width:15em;" |{{{prénom}}}
|}
{|class=" mw-collapsible mw-collapsed" style="width: 20em"
!style="font-size: 100%; background:orange; color:white;border-radius:0em 0em 4em 4em; text-align: center" colspan="2" |'''Informations'''
|-
| style="background:white;border-radius:5em 5em 0em 0em;color:orange" text-align="left" |'''Anniversaire'''
| style=width:15em;" |{{{anniv}}}
|-
|style="background:white;border-radius:5em 5em 0em 0em;color:orange"|'''Lieu de Naissance'''
| style=width:15em;" |{{{Lieu de naissance}}}
|-
|style="background:white;border-radius:5em 5em 0em 0em;color:orange"|'''Occupation'''
| style=width:15em;" |{{{occupation}}}
|-
| style="background:white;border-radius:5em 5em 0em 0em;color:orange" text-align="left" |'''Rôle sur le wiki'''
| style=width:15em;" |{{{rôle sur le wiki}}}
|}
|}

Ce qui nous donne :

{{{nom}}}

{{{image}}}
Prénom
{{{prénom}}}
Alias
{{{alias}}}
Age
{{{âge}}}
Prénom
{{{prénom}}}
Informations
Anniversaire {{{anniv}}}
Lieu de Naissance {{{Lieu de naissance}}}
Occupation {{{occupation}}}
Rôle sur le wiki {{{rôle sur le wiki}}}

Pour commencer tout en haut occupez vous juste de "height", de "front-size" et de "border-radius". Pour "border-radius" vous voyez 0px 0px 5px 5px. Chaque nombre correspond à un des quatre côtés de l'infobox. Autrement dit si un côté est à 0px, il sera carré tandis que celui de 5px sera arrondi.

Ensuite vous avez cette ligne en dessous :
style="background-color:orange; color:white; border-radius:0em 0em 5em 5em;" | 
'''<big>{{{nom}}}</big>'''
vous savez normalement tout compléter. Les balises
<big
servent à grossir le titre.

Puis viennent les deux premières sections :

La première :

{|cellspacing="1" cellpadding="0" border="0" width="100%"
|valign="top" width="50%" style="background:white;color:orange;border-radius:5em 5em 0em 0em;" |'''<center>Prénom</center>'''
|valign="top" width="50%"  style="width:15em;" |{{{prénom}}}

Vous n'avez qu'à changer la couleur de la boite "background", les contours "border-radius" et le titre. Vous faites la même chose avec la seconde section. Puis viennent les titres "ouvrants" autrement dit des sections qui en ouvrent d'autres :

{| class="infobox" cellpadding="2" cellspacing="0" style="width:20em;font-size: 100%; border-radius:0em 0em 5em 5em;"  border="0" 
|-
! colspan="2" style="background-color:orange; color:white; border-radius:0em 0em 5em 5em;" | 
'''<big>{{{nom}}}</big>'''
|-
|align="center" colspan="2" | {{{image}}}
{|cellspacing="1" cellpadding="0" border="0" width="100%"
|valign="top" width="50%" style="background:white;color:orange;border-radius:5em 5em 0em 0em;" |'''<center>Prénom</center>'''
|valign="top" width="50%"  style="width:15em;" |{{{prénom}}}
|-
|valign="top" width="50%" style="background:white;color:orange;border-radius:5em 5em 0em 0em;" |'''<center>Alias</center>'''
|valign="top" width="50%"  style="width:15em;" |{{{alias}}}
|-
|valign="top" width="50%" style="background:white;color:orange;border-radius:5em 5em 0em 0em;" |'''<center>Age</center>'''
|valign="top" width="50%"  style="width:15em;" |{{{âge}}}
|}
{|cellspacing="1" cellpadding="0" border="0" width="100%"
|valign="top" width="50%" style="background:white;color:orange;border-radius:5em 5em 0em 0em;" |'''<center>Prénom</center>'''
|valign="top" width="50%"  style="width:15em;" |{{{prénom}}}
|}
{|class=" mw-collapsible mw-collapsed" style="width: 20em"
!style="font-size: 100%; background:orange; color:white;border-radius:0em 0em 4em 4em; text-align: center" colspan="2" |'''Informations'''
|-
| style="background:white;border-radius:5em 5em 0em 0em;color:orange" text-align="left" |'''Anniversaire'''
| style=width:15em;" |{{{anniv}}}
|-
|style="background:white;border-radius:5em 5em 0em 0em;color:orange"|'''Lieu de Naissance'''
| style=width:15em;" |{{{Lieu de naissance}}}
|-
|style="background:white;border-radius:5em 5em 0em 0em;color:orange"|'''Occupation'''
| style=width:15em;" |{{{occupation}}}
|-
| style="background:white;border-radius:5em 5em 0em 0em;color:orange" text-align="left" |'''Rôle sur le wiki'''
| style=width:15em;" |{{{rôle sur le wiki}}}
|}
|}

A chaque fois il vous faudra changer le titre, la couleur, l'épaisseur des bords, l'emplacement du texte et... C'est tout bon! :) Vous faites la même chose pour la deuxième section "ouvrante".

Je ne sais pas si c'est très clair, surtout pour l'infobox. Si vous avez des questions se sera en commentaire et personnellement je vous conseille de commencer par des formes simples et de suivre le protocole. Sur ceux bisous bisous tout le mondeuuu <3 :)

Interférence d'un bloqueur de publicité détectée !


Wikia est un site gratuit qui compte sur les revenus de la publicité. L'expérience des lecteurs utilisant des bloqueurs de publicité est différente

Wikia n'est pas accessible si vous avez fait d'autres modifications. Supprimez les règles personnalisées de votre bloqueur de publicité, et la page se chargera comme prévu.

Sur le réseau FANDOM

Wiki au hasard