Tous les contributeurs
Luffy300
Gol D Shanks
Mr. Katana
Monkey D Chopper
Aceofspade28
Franky003
• 4/17/2015

Modèles et Codes

Yo !

Bon étant donné que l'on doit faire une page de présentation, je vais vous montrer la mienne et sa constitution (elle paraîtra compliquée pour certains mais vous allez voir si on s'y connaît un minimum c'est faisable^^):

Donc ma page de présentation est la suivante:


1661481441billet_.png
1661481441billet_.png
♛ The King of Money ♛

Présentation
Un homme sans argent est un corps sans âme, un mort ambulant.

— Axel Oxenstiern

Le Businessman que je suis te souhaite la Bienvenue
2044097784Homme_Riche_Swag.jpg
Je gère l'Argent et la Comptabilité de l'équipage. Si vous voulez emprunter ou dépenser de l'argent appartenant à l'équipage, il te faudra demander à la personne que je suis.

Si tu as besoin d'aide pour quoique ce soit sur ce Wiki (modèles, wikitext...), je t'aiderai... en contrepartie d'un peu d'argent

(伝説のルフィ300の乗組員) L’Équipage du Légendaire Luffy300

Donc on va commencer par détailler le modèle du premier "rectangle" du haut, celui ci:

♛ The King of Money ♛

Le code que j'ai construit/fait et mis dans le mode source de la page est le suivant:

{| style="float:center; width:100%; height:150px; background-image:linear-gradient(to bottom, Silver, Black); border: 7px solid grey; border-radius:30px; border-style:dashed; texte-align:center; font-weight:normal; color:Black;"
|-
| <center><span style="font-family:Cataneo BT;font-size: 3.8em; color:Black;text-shadow: 0px 1px 0.4px Black, 1px 0px 1px White, -1px -1px 1px Black, 2px 2px 6px White,-2px -2px 4px Black;">♛ The King of Money ♛</span></center>
|}

Je vais maintenant vous détailler ce code:

{| style="float:center;

Cette partie de code n'a pas tellement d'importance, elle sert juste à détailler la position de votre rectange (le float:center pour une position centrale, float:right pour une position à droite et float:left pour une position à gauche)/

width:100%; height:150px;

Cette partie est importante car elle permet de donner les dimensions de votre rectange. width pour la longueur et height pour la haute.

background-image:linear-gradient(to bottom, Silver, Black);

C'est pour la couleur du fond. Vous pouvez tout simplement mettre background:lenomdelacouleur. Le -image:linear-gradient(to bottom, Silver, Black); permet un effet de couleur dégradé.

border: 7px solid grey;

Pour l’épaisseur du "trait" de contour du rectangle.

border-radius:30px; border-style:dashed;

Le border-radius c'est pour les arrondis (plus le nombre de px est important plus l'arrondi est important). Le border-style:dashed c'est pour les pointillées.

texte-align:center; font-weight:normal; color:Black

Le text-align:center est pour le texte en position centre. Si vous le changer pour left, il sera à gauche et à droite avec right. Le font-weight:normal c'est pour le mettre en gras. Le color:Black c'est pour la couleur des pointillées.

Ensuite pour la deuxième partie du code:

|-
| <center><span style="font-family:Cataneo BT;font-size: 3.8em; color:Black;text-shadow: 0px 1px 0.4px Black, 1px 0px 1px White, -1px -1px 1px Black, 2px 2px 6px White,-2px -2px 4px Black;">♛ The King of Money ♛</span></center>
font-family:Cataneo BT;font-size: 3.8em; color:Black;

Le font-family:Cataneo BT c'est le style de l'écriture du texte. Le font-size c'est pour la taille de votre texte (les unités ici sont différentes, en effet il y a le px existant mais le em marche aussi comme ici). Enfin color:Black c'est pour la couleur du texte.

text-shadow: 0px 1px 0.4px Black, 1px 0px 1px White, -1px -1px 1px Black, 2px 2px 6px White,-2px -2px 4px Black;"

Ce code c'est pour rajouter un effet d'ombre au texte (vous pouvez changer les couleurs pour avoir un effet d'ombre avec couleur différent).

Et enfin la fin (là où il y a le texte) ba vous modifier pour mettre votre texte.


Pour la deuxième partie:

Présentation
Un homme sans argent est un corps sans âme, un mort ambulant.

— Axel Oxenstiern

Le Businessman que je suis te souhaite la Bienvenue
2044097784Homme_Riche_Swag.jpg
Je gère l'Argent et la Comptabilité de l'équipage. Si vous voulez emprunter ou dépenser de l'argent appartenant à l'équipage, il te faudra demander à la personne que je suis.

Si tu as besoin d'aide pour quoique ce soit sur ce Wiki (modèles, wikitext...), je t'aiderai... en contrepartie d'un peu d'argent

(伝説のルフィ300の乗組員) L’Équipage du Légendaire Luffy300

Ce qui donne en code:

{| style=" border:5px solid grey; border-radius:10px 10px;background:transparent; width:100%;"
|- 
! style="height:37px; border-radius:10px 10px; background-image: linear-gradient(Silver, Black); color:Black; font-size:22px;text-shadow: 0px 1px 0.4px Black, 1px 0px 1px White, -1px -1px 1px Black, 2px 2px 6px White,-2px -2px 4px Black;"|<u>Présentation</u>
|-
|{{citation
|texte= ''Un homme sans argent est un corps sans âme, un mort ambulant.''
|nom= Axel Oxenstiern 
}}

<div style="font-family:corbel"><center><big>Le '''Businessman''' que je suis te souhaite la Bienvenue</big></center>
<center>http://sournoishack.com/uploads/2044097784Homme_Riche_Swag.jpg</center>
<center>Je gère l'Argent et la Comptabilité de l'équipage. Si vous voulez emprunter ou dépenser de l'argent appartenant à l'équipage, il te faudra demander à la personne que je suis.</center><br />
<center>Si tu as besoin d'aide pour quoique ce soit sur ce Wiki (modèles, wikitext...), je t'aiderai... en contrepartie d'un peu d'argent</center><br />
{{NaviBusinessman}}</div>
|}

Nous avons:

{| style=" border:5px solid grey; border-radius:10px 10px;background:transparent; width:100%;"

Le border:5px solid pour l'épaisseur, et le "grey" juste à côté c'est pour la couleur du solide. Le border-radius: 10px 10px c'est pour les coins mais du haut (si vous mettez deux valeurs seulement ça arrondira que les coins du haut du "trait" d'épaisseur, si vous en rajoutez deux autres ça fera les arrondis du trait d'en bas). Le background:transparent pour le fond de l'intérieur (qui comme son nom l'indique sera transparent ici). Et le width pour la longueur (vous pouvez mettre "auto" ça marche aussi ça s'ajustera automatiquement).

height:37px; border-radius:10px 10px; background-image: linear-gradient(Silver, Black); color:Black; font-size:22px;text-shadow: 0px 1px 0.4px Black, 1px 0px 1px White, -1px -1px 1px Black, 2px 2px 6px White,-2px -2px 4px Black;"|<u>Présentation</u>

Et là donc nous avons:

  • le height pour la hauteur
  • Les border-radius toujours (mais cette fois ci que pour le "rectangle" où le texte "Présentation" est présent).
  • Le background qui a le même effet que le rectangle que j'ai montré plus haut, pareil pour le color:Black
  • Le font-size là aussi gère la taille de l'écriture du titre "Présentation"
  • Le text-shadow... Là aussi même principe.

Et après vous avez le titre (attention important de mettre le "|" pour que le texte apparaisse).
Dès que vous aurez mis votre texte à l'intérieur refermez le modèle (commencé par le "style...") par la balise </div> (très important sinon votre modèle déconne).

N'oubliez surtout pas de "refermer" votre code. Ici le modèle est commencé par un "{|". Il faut le refermer avec un "|}" pour pouvoir mettre du texte après en dehors de votre modèle, sinon si vous omettez de mettre ce "|}" le texte que vous mettrez après sera dans le modèle.


Il est vrai que ce langage informatique est très compliqué à comprendre au début. Moi même j'ai bien galéré mais en apprenant par moi même (en C/C des modèles et en les modifiant), on fait beaucoup d'erreurs au début mais on commence à comprendre au fur et à mesure (on commence à reconnaître les balises, les codes...). C'est en forgeant que l'on devient forgeron comme dit le dicton.

Bref ne vous découragez pas si vous n'y arrivez quand même pas trop au début c'est normal tout le monde y est passé, moi le premier !

Vous pouvez toujours aussi trouver de bons tutos sur internet concernant cela ils sont généralement bien expliqués.

Voilà voilà si vous avez des questions n'hésitez pas (que ce soit pour les modèles, l'informatique du Wikia en général...).

0 30
  • Voter
  • Répondre
Luffy300
Gol D Shanks
Mr. Katana
Monkey D Chopper
Aceofspade28
Franky003
0
• 4/23/2015

Je vais essayer de le faire sur ma page ^^' ! Merci papa ;)

0
• 4/24/2015

Dsl mais est-ce que tu peux juste me/nous dire(s) comment on fait pour avoir tous les petits "signe" qu'on mets entre les nom (ex: <signe> The King of Money </signe> ) ? Tu comprend ? ^^

0
• 4/24/2015

Les petits signes eu comment dans les signatures (genre la mienne avec l'espèce de cercle entre le Zoro et le Chin ?).

Et non la balise <signe> n'existe pas XD mais t'inquiète^^

0
• 4/24/2015

Oui je le sais bien, mais c'était juste un exemple xDDD

Non je veux dire, les trucs pour toi, qu'ils y a entre "King of Money", les espèces de couronnes ^^ ! Tu  vois ? ^^'

0
• 4/24/2015

A oui ça c'est des symboles que tu trouves sur internet du tapes symboles couronne ou un truc comme ça c'est juste une mini image que tu peux copier coller tout simplement^^

0
• 4/24/2015

Ha ok merci ^^ ! x)

0
• 5/8/2015

20 ans plus tard é_è Belles explication Chin, GG (y). Bref, si quelqu'un a du mal a faire sa page de présentation, qu'il n'hésite pas à me demander pour que je lui apporter un coup de main :p

Écrire une réponse…