Comment faire sa fiche ? [Etapes 1 et 2 en ligne !]

Bonjour à tous, comme vous le savez surement, je suis en train de faire ma fiche de topics. Malheureusement, au début, j'ai vraiment pataugé dans la semoule, maintenant, ça va mieux, même s'il y a toujours un souci avec cette foutue barre bleue que j'arrive pas à enlever =D Je me suis aussi aperçue qu'il était difficile de rajouter des trucs, d'éditer son message, une fois tout cela fait, on s'y retrouve pas et tout. C'est pour ça qu'aujourd'hui, je vous prépare LE tutoriel de la mort qui tue. Une étape par message, on y va doucement quand même !
Le tout sera fait avec des codes déjà prêts pour vous, plus qu'à suivre les instructions et à modifier comme bon vous semblera !

Je précise qu'à l'heure actuelle, ce n'est pas terminé ! Mais voici ce qui est en cours d'écriture :

Etape 1 : Le tout début, avec Nom Prenom, et les images. Intéressante cette première étape, car sur le code qui se trouve dans exemple de fiche, on ne nous propose que 2 images, j'ai trouvé le moyen d'en mettre une troisième, et d'ajuster tout ensuite, attention, c'est pas de la rigolade xD

Etape 2 : La partie "Topics en cours". En effet, le code qui se trouve dans "Exemple de fiche" ne nous permet de ne faire qu'un seul "encadré de RP", enfin bon, je me comprends. Le moyen d'en rajouter sans se mélanger les pinceaux s'y trouvera ! Et oui, faut pas copier coller le code du dessus bêtement, ya des choses à changer, des codes à supprimer, sinon, les barres bleues envahissent votre sujet, j'en suis la pauvre petite témoin, mais à ce jour, il n'en reste plus qu'une, toutes les autres, pfiou, à plus !

Etape 3 : La partie "Topics terminés"
Un peu comme au dessus

Etape 4 : "Topics en attente" (sachant que je ne sais pas ce que c'est du coup, je peux rien vous préparer pour le moment xD

Partie 5 : Récapitulatif de vos questions, et des réponses les plus appropriées. Pour toutes questions, les poser minimum après la fin de l'étape 2, pas entre l'étape 1 et l'étape 2, ce serait sympa, merci

Etape 1 : L'encadré de début, la présentation de votre personnage

Nous allons tout d'abord voir comment faire avec 2 petites images, comme sur l'exemple de fiche. Pour ceux qui en veulent une troisième, suivez d'abord cette partie, la suite plus bas.

1. Pour commencer, créez un sujet (c'est préférable), et donnez lui un titre, bref, ça, c'est basique, avec le nom de votre perso, pour qu'on sache qui c'est ^-^

2. Copier coller ce code :

Code:

<center><FONT style="font-style:italic;color:Teal;letter-spacing:-2px; text-shadow: #282828 1px 1px 2px;"face=arial size=7 >NOM + PRENOM</FONT>
<div style="color:black;font-size:12px;font-family:Georgia; credit-site-css: mycandids.tk; background-color: White; width: 320px;-moz-border-radius:60px;padding-bottom:5px;"> « PETITE PHRASE »
<table><tr><td><div style="border: 5px solid Teal; padding: 10px; width: 80px; height: 80px; -moz-border-radius: 100px;background-image: url('AVATAR 100*100');"></div></td><td><div style="border: 5px solid Teal; padding: 10px; width: 80px; height: 80px; -moz-border-radius: 100px;background-image: url('AVATAR 100*100');"></div></td></tr></table></div><div style="font-size:10px;padding-right:15px;">CELEBRITE</div></center>

3. Puis, très important, cliquez juste devant le premier center, au tout début de votre message si vous voulez, et faites 2 fois Entrée, sinon, votre nom sera tout coupé en haut.

4. A la place de NOM + PRENOM, mettez le nom de votre personnage (exemple : Aramis), à la place de PETITE PHRASE, mettez la phrase de votre personnage, exemple : N'oublie jamais qui tu es (pour Aramis). Si vous n'en avez pas, supprimez « PETITE PHRASE » et les guillemets aussi. Ensuite, cherchez CELEBRITE, et mettez le nom de la célébrité dont vous avez "l'apparence". Si vous êtes un cheval, et que vous n'en avez pas, supprimez (en entier) :
CELEBRITE

5. Voilà, cliquez sur prévisualiser pour vérifier si pour le moment, tout va bien. Dans mon cas, j'ai ça (pour Aramis, donc sans célébrité) :

Spoiler:

Vous aussi ? Parfait. Sinon, vous vous êtes loupé. Si ça ne vous met pas ça, supprimez tout, et recommencez les 5 premières étapes, et prévisualisez encore. Si ça ne fonctionne toujours pas, faites une capture d'écran, et postez la ici, qu'on vous aide à regler ça.

Maintenant, vous devez être pressé de changer ces petites images blanches ! Voilà la suite :

6. Déjà, c'est mieux d'en avoir de ces petites images ! Pour les créer, prenez une des images qui représente votre cheval (exemple, votre avatar, votre signature), et ouvrez la dans Photofiltre, ou autre logiciel de graphisme. Ensuite, faites une selection de 100*100 pixels n'importe où, et dès que c'est fait, déplacer votre petit carré sur la zone que vous voulez en tant que p'tite image carrée. Dès que vous avez quelque chose (exemple : ses yeux, ses oreilles, ses cheveux, ses sabots, etc ...), faites copier, puis coller sur un nouveau fichier blanc de 100*100 pixels. Vous avez votre première image ! Faites pareil pour la seconde, et faites en plus si affinités ! Mais il en faut minimum 2 !

7. Revenons à notre codage. D'abord, cliquez là : pour enregistrer votre première image. Le truc va vous donner 3 lien différent, prenez le dernier, et copier le. Puis, coller le à la place d'un des 'AVATAR 100*100' (/!\ : il faut laisser les parenthèses autour, et bien supprimer les appostrophes autour de AVATAR 100*100, compris ?)
Ensuite, enregistrez votre seconde image. Trouvez le deuxième 'AVATAR 100*100', et répétez l'opération.

8. Voilà le résultat pour Aramis :

Spoiler:

Et voilà, terminé pour ceux qui ont 2 images !

Pour ceux qui veulent ajouter une troisième image (en exlusivité !) :
9. Vous devez d'abord copier ce code :

Code:

<td><div style="border: 5px solid Teal; padding: 10px; width: 80px; height: 80px; -moz-border-radius: 100px;background-image: url(IMAGE EN 100*100);"></div></td>

Et vous le collez pile à cet endroit là (barre rouge) :

Spoiler:

Et après, il vous suffit de mettre l'URL de votre dernière image à la place de IMAGE EN 100*100.

10. Etape très importante ! Si vous prévisualisez, vous vous apercevrez que les images débordent du rectangle blanc. Il faut juste modifier la largeur de ce fond blanc. Pour ceci, regardez dans les premières lignes de votre codage, et cherchez cette partie :

Code:

<div style="color:black;font-size:12px;font-family:Georgia; credit-site-css: mycandids.tk; background-color: White; width: 320px;-moz-border-radius:60px;padding-bottom:5px;">

Vous voyez le 320px ? C'est ça qui nous embête ! Remplacez le tout simplement par 400 si vous avez 3 images, mais gardez bien le px à coté ! du coup, vous avez ça :

Code:

<div style="color:black;font-size:12px;font-family:Georgia; credit-site-css: mycandids.tk; background-color: White; width: 400px;-moz-border-radius:60px;padding-bottom:5px;">

11. Si vous prévisualisez, vous vous apercevrez que tout est rentré dans l'ordre, voilà ce que ça me donne pour Aramis :

Spoiler:

J'espère que cette première étape vous aura servi !

PS : N'oubliez pas d'enregistrer votre code, pour ne pas tout perdre. Cliquez sur envoyer, en précisant que c'est en cours par exemple, ainsi, vous pourrez reprendre plus tard

Etape 2 : La partie topics en cours

Surement la partie la plus difficile xD Oui, simple à faire, mais après, il y a quelque soucis à cause de la barre bleue ... Allez, si vous suivez, il n'y a pas de raisons que ça ne fonctionne pas ^-^
N'oubliez pas de prévisualiser de temps à autre, voir si ça vous donne bien ce que vous voulez

1. Après la première étape, pour la présentation de votre personnage, vous devez sauter quelques lignes (4/5 lignes sautées suffisent amplement), et coller ce code en dessous :

Code:

<DIV style="TEXT-ALIGN: center" align=center><SPAN style="FONT-GEORGIA: Palatino Linotype"><FONT face=Georgia size=7>[color=White]<blockquote>
Topics
[color=Teal][i]En cours[/i][/color][/color]</FONT></SPAN></DIV>

Première chose faite.

2. Appuyez 2 fois sur entrée, pour laisser une ligne vide entre les deux, et collez ceci :

Code:

<center><fieldset style="border: 3px solid Teal; width: 379px;"><br><div style="width: 379px; color: #282828; font-size: 11px; line-height: 15px; text-align: justify;"><legend><font face="trebuchet ms"><font color="white">[size=18][url=LIEN]TITRE[/url][/size]</font></span></font></legend><div align="justify"><div style="margin-top: -15px;"><span style="font-size: 12px;"><table CELLSPACING="10"><tr><td><div style="background-color: white; padding: 3px; width: 100px; display: inline-block;">[img]http://i289.photobucket.com/albums/ll233/Hay-Gurl/avatars/i15.png[/img]
</div>[color=white][center]NOM[/center][/color] </td><td><div style="height:106px;overflow:auto; padding: 5px;">[size=12][i][color=#40352E][font=Times New Roman]QUE SE PASSE-T-IL?
[/font][/color][/i][/size]</div></td></tr></table></div></div></center>

3. Il faut maintenant le modifier. A la place de LIEN, mettez le lien du sujet de RP, et mettez le titre du sujet à la place de TITRE. Ensuite, supprimez moi ce QUE SE PASSE-T-IL? et mettez justement ce qui s'y passe dans ce sujet, de quoi vous parlez, si vous vous entendez bien etc ..., et mettez le nom de l'autre personnage à la place de NOM. Et dernière chose, pour les chanceux =) Si vous avez une image 100*100 de la personne avec qui vous faites ce RP (qu'il a fait et qu'il a normalement mis sur sa fiche de RP, et oui, ça sert à ça les p'tites images carrées de l'étape 1 !), copiez l'URL de cette p'tite image carrée, et collez là à la place de https://2img.net/h/i289.photobucket.com/albums/ll233/Hay-Gurl/avatars/i15.png qui est l'image par défaut, celle des deux chevaux. Si l'autre personne n'a pas de cette sorte d'images, ben tant pis, laissez l'image par défaut, et vous changerez quand il en aura une =) Ou alors, faites lui une demande par message, après, ça ne me regarde pas xD

4. Si vous avez d'autre RP en cours, pas avec la même personne donc, c'est un autre code qu'il faut avoir ! Oui, le premier suit le modèle juste au dessus, mais pour en rajouter, j'ai du enlever certaines parties du code d'origine ! Le carré bleu si vous voulez. Bref, c'est la même chose pour ce qu'il faut changer, à par que le code est celui-ci (un peu plus court) :

Code:

<center><br><div style="width: 379px; color: #282828; font-size: 11px; line-height: 15px; text-align: justify;"><font face="trebuchet ms"><font color="white">[size=18][url=LIEN]TITRE[/url][/size]</font></span></font></legend><div align="justify"><div style="margin-top: -15px;"><span style="font-size: 12px;"><table CELLSPACING="10"><tr><td><div style="background-color: white; padding: 3px; width: 100px; display: inline-block;">[img]http://i289.photobucket.com/albums/ll233/Hay-Gurl/avatars/i15.png[/img]
</div>[color=white][center]NOM[/center][/color] </td><td><div style="height:106px;overflow:auto; padding: 5px;">[size=12][i][color=#40352E][font=Times New Roman]QUE SE PASSE-T-IL?[/font][/color][/i][/size]</div></td></tr></table></div></div></center>

Voilà, et faites le autant de fois qu'il le faut !
Après, vous avez normalement le même souci que moi si vous avez plusieurs RP en cours, cette satanée barre bleue. Sachez que je cherche, encore et toujours, mais que j'éditerais et préviendrais quand je trouverais ! Ah, et si vous avez quelques trucs à modifier sur mes codes, ou une incompréhension, n'hésitez pas à poster !

» Que va-t-on me faire ?
» Notre fiche
» Exemple de Fiche
» Exemple de Fiche
» Faire un Fondu [Tutophilre]