Modification codage rp

Première fois que je m'aventure ici ~ Comme je suis nul en codage mise à part pour de toute petite modification, je viens ici déposer ma supplique! ~ Parce que vous avez tous de beaux codes de rp, avec des gifs et tout xD Le mien est assez basique et il me plait mais j'aimerais pouvoir y intégrer un gif à la place d'une image ^^


◊ Nom du personnage ー Caïn Stonegold
◊ Type de commande ー Codage RP
◊ Taille souhaitée ー //
◊ Images à utiliser ー //
◊ Détails ー Si quelqu'un s'y connait assez pour y jeter un oeil, il s'agirait juste de changer la section de l'image pour pouvoir y incorporer un gif, ou bien déplacer l'endroit ou l'image/gif apparait pour le mettre en dessous, je sais pas si je suis clair, j'espère ! '.'
Merci d'avance !
Ci dessous la base de mon codage :

codage:

Yop ! Bon, je suis pas dingue en codage, mais ça m'a semblé dans mes cordes. Donc je m'y suis penché. En soit, le cadre entre image et gif est traité pareil sur le codage, donc tu peux inverser l'un ou l'autre assez facilement. Donc je vais tester quelques trucs.

Ici tu as l'exemple de ton code, où j'ai rien touché, uniquement remplacé l'image par un gif. Pour remplacer par un gif il faut juste faire attention que ça soit en .gif , ou .gifv (honnêtement, je sais pas le différence). Tu as cet exemple. Par contre, tu remarques que cela n'est pas centré. Le bord de l'image (ou gif) doit donc être callé sur une ligne invisible. Ici tu as un gif de 268 pixel de largueur.

Titre

Feat. Citation, Phrase ou autres

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Codage modifié par moi~ pour NOTD

Ici j'ai volontairement mis une gif trop gros (540 par 400) en pensant que ça déformerait tout. Mais surprise : ça apparait et c'est redimensionné. Donc le code est fait pour et tout puisse y aller. Petit point bidouillage : je vais quand même voir si je peux améliorer le centrage en bidouillant les chiffres plus bas.

Titre

Feat. Citation, Phrase ou autres

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Codage modifié par moi~ pour NOTD

Ok, j'ai trouvé. C'est un peu du bidouillage, mais ça passe. En gros, il n'y a pas de taille en pixel allouée à la place de l'image ou du gif. En revanche, il y a un cadre codé pour la zone feat et citation. De base ce cadre à 300 pixel de large pour 150 de hauteur. De base, tu n'a aucun intérêt à changer le hauteur (qui il me semble augmente automatiquement si tu met une très longue citation). Par contre, en jouant sur la largeur, surprise : le gif augmente automatiquement. Comme si dessous (où j'ai changé la largeur de 300 pour la passer à 200).

Titre

Feat. Citation, Phrase ou autres

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Codage modifié par moi~ pour NOTD

Pour ce faire, et tu peut t'en occuper au loisir en fonction du gif que tu veux mettre, tu dois te rendre sur la division juste avant le feat ici :

Code:

<div style="width: 300px; height: 150px; background-color : transparant; font-family: 'Modern Antiqua', cursive; font-size: 14px; color: #000000; padding: 15px; text-align: center;">

Tout au début tu vois le 300 px ? C'est ici. Sur l'exemple plus haut il est remplacé par 200, mais tu peut tester un peu tout entre 150 et 350, voir même 400, en fonction du gif que tu met (s'il est en paysage, en portrait, plutôt carré etc). Comme ici je sais pas précisément quel gif tu veux je saurais pas mettre la bonne valeur pour toi. Mais si tu y arrives pas et que tu veux que je te mette un gif précis, en adaptant la largeur du cadre de façon à peu prêt harmonieuse, dis le moi.


Bon cette étape vient d'une motivation toute con : tenter de modifier la marge pour avoir un gif moins "décalé" du carré mauve du titre notamment. J'ai pas trouvé, du coup j'ai pris le problème à l'envers et étendu de carré pour qu'il aille jusqu'au coté. Comme ça y a moins cette sensation de "marge pas régulière" comme plus haut. C'est si tu veux. Cette fois, comme j'ai changé un truc fixe je te met juste ça en balise code pour que tu puisse récupérer ça si tu le veux.

Titre

Feat. Citation, Phrase ou autres

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Codage modifié par moi~ pour NOTD

Et ici puisque tu avais parlé de gif à la fin, j'avais pas trop comprit comment ajouter ça. Mais en proposition (tant que j'y suis), j'ai inclus un codage au milieu du texte qui ajoute une image, ou un gif. Tu peux toi même choisir si c'est à droite ou à gauche avec ce qui suit "align=" (rempalce left par right si tu le veut à droite en gros). Et tu peux choisir la largeur de l'image en pixels en modifiant le chiffre qui suit width= (ici 175). Je sais pas trop si c'est ce que tu voulais, mais comme tu parlais de ça je l'ai ajouté. Attention cependant à ce qu'il y ait assez de texte dessus et en dessous pour que ça fasse pas tassé.
Sans ma modification plus haut :

Titre

Feat. Citation, Phrase ou autres

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Codage modifié par moi~ pour NOTD

Code:

<center><div style="width: 500px; height: auto; background-color :#EAECEE; border-bottom: 4px solid purple; border-top: 4px solid purple"></br><div style="width: 450px; height: auto; background-color : purple; font-family: 'Modern Antiqua', cursive; font-size: 28px; color: black;">Titre</div></br><table><tr><td><div style="width: 300px; height: 150px; background-color : transparant; font-family: 'Modern Antiqua', cursive; font-size: 14px; color: #000000; padding: 15px; text-align: center;">Feat.</br></br> [color=#9900ff][b]Citation, Phrase ou autres[/b][/color]</div></td><td><img src="https://i.pinimg.com/originals/12/af/5a/12af5afbd898629c24092ec6d54ba465.gif"</td>
</tr></table></br><table><tr><td><div style="width: 450px; height: auto; background-color : palegrey; font-family: georgia; font-size: 12px; color: #000000; text-align: justify; padding: 15px;">

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<img src="https://i.pinimg.com/originals/39/79/c9/3979c97e5915222574447406923e0d4c.gif" align="left" width="175" hspace="5" vspace="5"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</div></td></tr></table></br>Codage modifié par moi~ pour NOTD</div></center>

Avec ma modification plus haut :

Titre

Feat. Citation, Phrase ou autres

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Codage modifié par moi~ pour NOTD

Code:

<center><div style="width: 500px; height: auto; background-color :#EAECEE; border-bottom: 4px solid purple; border-top: 4px solid purple"></br><div style="width: 500px; height: auto; background-color : purple; font-family: 'Modern Antiqua', cursive; font-size: 28px; color: black;">Titre</div></br><table><tr><td><div style="width: 300px; height: 150px; background-color : transparant; font-family: 'Modern Antiqua', cursive; font-size: 14px; color: #000000; padding: 15px; text-align: center;">Feat.</br></br> [color=#9900ff][b]Citation, Phrase ou autres[/b][/color]</div></td><td><img src="https://i.pinimg.com/originals/12/af/5a/12af5afbd898629c24092ec6d54ba465.gif"</td>
</tr></table></br><table><tr><td><div style="width: 450px; height: auto; background-color : palegrey; font-family: georgia; font-size: 12px; color: #000000; text-align: justify; padding: 15px;">

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<img src="https://i.pinimg.com/originals/39/79/c9/3979c97e5915222574447406923e0d4c.gif" align="left" width="175" hspace="5" vspace="5"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</div></td></tr></table></br>Codage modifié par moi~ pour NOTD</div></center>

Bien sûr à ces deux propositions s'applique toujours mes explications sur le carré codé pour le feat et le citation.


Voilà, en espérant avoir aider avec mes petites compétences

Bon, après quelques petites précisions par discord, me revoilà. J'ai trois propositions (avec en vrai 2, mais les 2 dernière qui change le format du gif).

Voilà la première. J'ai eux quelques soucis sur elle, d'où mon choix de mettre un gif au dessus, et un en dessous. Tout simple, si je met un format en hauteur et en largeur, ça déforme à 100% le gif. Si je met en largeur mais pas en hauteur, je me retrouve avec 2 gif cote à cote qui font pas la même taille, et ça fait moche. Si je met en hauteur mais pas en largeur, ça déborde très vite, trop vite, d'une ligne et ça casse tout. Donc j'ai trouvé ça en solution, avec un a droite et l'autre à gauche pour éviter de déséquilibrer tout. Tu remarqueras le défaut de ça, c'est que si tu prends un en format portrait, et un en format paysage, tu as un gif bien plus grand que l'autre. Mais sinon, si ça te déranges pas, plus besoin de se soucier de la taille du gif. Tout se fait automatiquement (si j'ai pas merdé ><).

Code:

[center]<div style="width: 500px; height: auto; background-color :#EAECEE; border-bottom: 4px solid MediumOrchid; border-top: 4px solid MediumOrchid"></br><div style="width: 450px; height: auto; background-color : DarkViolet; font-family: 'Modern Antiqua', cursive; font-size: 28px; color: black;">Titre</div></br><table><tr><td>[/center]
<div style="width: 450px; height: auto; background-color : transparant;"><img src="https://i.pinimg.com/originals/53/3a/0d/533a0d7cc26a237dde7910eb4da29c13.gif"style="width:220px;height:auto;border: solid 5px Goldenrod; box-shadow: 0px 0px 2px #E8E6E7"/></div>
[center]<div style="width: 450px; height: auto; background-color : transparant; font-family: 'Modern Antiqua', cursive; font-size: 14px; color: #000000; padding: 15px; text-align: center;">Feat.</br></br> [color=MediumVioletRed][b]Citation, Phrase ou autres [/b][/color]</div>[/center]
<div style="width: 450px; height: auto; background-color : transparant; text-align: right;">          <img src="http://s2.favim.com/orig/140809/1d-best-song-ever-directioner-eyes-Favim.com-1982022.gif"style="width:220px;height:auto;border: solid 5px Goldenrod; box-shadow: 0px 0px 2px #E8E6E7"/></div>
[center]</td><td></td></table></br><table><tr><td><div style="width: 450px; height: auto; background-color : palegrey; font-family: georgia; font-size: 12px; color: #000000; text-align: justify; padding: 15px;">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</div></td></tr></table></br>[size=10]Codage modifié par moi ~ retouché par Aim sur base d'un codage de Libella de Graphiorum ~ pour NOTD[/size]</div>[/center]

Ensuite, j'ai cherché du pimp. Et je l'ai trouvé dans le code de Sasa (Alaska, Erin and co). Ici, tu as une gif qui est placé en background d'une zone, et donc qui est plus propre, avec un jolie effet dorée. En revanche, y a un souci de taille. Si le gif ne rentre pas par exemple en hauteur comparé à la largueur qu'il a, il va se répéter. De même s'il ne rentre pas en largueur comparé à la hauteur qu'il a. Aussi, il faut gruger, et prier pour que ça passe. Je t'ai donc fait 2 versions : une qui devrait passer avec la majorité des gif en paysage, et une qui colle avec les gif assez carré et/ou portrait. Mais en fonction de ce que tu met, ça peut coller de façon pas belle et coupée. Aussi, juste avant les deux images, tu as deux chiffres avec px après. Le premier est la largeur, et le second la hauteur. Si tu le souhaites et pour un rp, tu peux modifier ces chiffres. Je conseil cependant de garder les mêmes formats pour les deux images sur un seul et même post.


Format paysage :

Code:

[center]<div style="width: 500px; height: auto; background-color :#EAECEE; border-bottom: 4px solid MediumOrchid; border-top: 4px solid MediumOrchid"></br><div style="width: 450px; height: auto; background-color : DarkViolet; font-family: 'Modern Antiqua', cursive; font-size: 28px; color: black;">Titre</div></br><table><tr><td>[/center]
<td style="padding:3px;border-radius: 30px;border: 0px dashed Gold"><div style="border-radius: 30px;padding:5px;width:210px;height:90px;background:url('https://64.media.tumblr.com/e6659d7eb005300ea06ec246f71832ba/0a66a09ddcdca1eb-a3/s500x750/9a4b0188cce87f5f2f5a0b29a76bb2666d0f92d8.gif');background-size:100%;box-shadow: 0px 0px 40px Goldenrod inset"></div></td><td style="padding:3px;border-radius: 30px;border: 0px dashed Gold"><div style="border-radius: 30px;padding:5px;width:210px;height:90px;background:url('http://s2.favim.com/orig/140809/1d-best-song-ever-directioner-eyes-Favim.com-1982022.gif');background-size:100%;box-shadow: 0px 0px 40px Goldenrod inset"></div></td></div>
[center]<div style="width: 450px; height: auto; background-color : transparant; font-family: 'Modern Antiqua', cursive; font-size: 14px; color: #000000; padding: 15px; text-align: center;">Feat.</br></br> [color=MediumVioletRed][b]Citation, Phrase ou autres [/b][/color]</div>
<div style="width: 450px; height: auto; background-color : transparant; text-align: right;">   </td><td></td></table></br><table><tr><td><div style="width: 450px; height: auto; background-color : palegrey; font-family: georgia; font-size: 12px; color: #000000; text-align: justify; padding: 15px;">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</div></td></tr></table></br>[size=10]Codage modifié par moi ~ retouché par Aim sur base d'un codage de Sasa ~ pour NOTD[/size]</div>[/center]

Format carré/portait :

Code:

[center]<div style="width: 500px; height: auto; background-color :#EAECEE; border-bottom: 4px solid MediumOrchid; border-top: 4px solid MediumOrchid"></br><div style="width: 450px; height: auto; background-color : DarkViolet; font-family: 'Modern Antiqua', cursive; font-size: 28px; color: black;">Titre</div></br><table><tr><td>[/center]
<td style="padding:3px;border-radius: 30px;border: 0px dashed Gold"><div style="border-radius: 30px;padding:5px;width:220px;height:160px;background:url('https://i.pinimg.com/originals/53/3a/0d/533a0d7cc26a237dde7910eb4da29c13.gif');background-size:100%;box-shadow: 0px 0px 40px Goldenrod inset"></div></td><td style="padding:3px;border-radius: 30px;border: 0px dashed Gold"><div style="border-radius: 30px;padding:5px;width:220px;height:160px;background:url('https://media1.tenor.com/images/349c018fa430fbcbab221909eff77525/tenor.gif?itemid=17995563');background-size:100%;box-shadow: 0px 0px 40px Goldenrod inset"></div></td></div>
[center]<div style="width: 450px; height: auto; background-color : transparant; font-family: 'Modern Antiqua', cursive; font-size: 14px; color: #000000; padding: 15px; text-align: center;">Feat.</br></br> [color=MediumVioletRed][b]Citation, Phrase ou autres [/b][/color]</div>
<div style="width: 450px; height: auto; background-color : transparant; text-align: right;">   </td><td></td></table></br><table><tr><td><div style="width: 450px; height: auto; background-color : palegrey; font-family: georgia; font-size: 12px; color: #000000; text-align: justify; padding: 15px;">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</div></td></tr></table></br>[size=10]Codage modifié par moi ~ retouché par Aim sur base d'un codage de Sasa ~ pour NOTD[/size]</div>[/center]

Voilà, si tu arrives pas à modifier les chiffres, n'hésites pas à me le dire par discord. Je peux m'en occuper. De même, tu as vu que j'ai tenté un petit nuancier de couleurs différent (notamment pour faire le pont du violet au gold de façon plus fluide). S'il ne te plait pas dit le moi. Je peux encore repasser avec les couleurs d'origine du code. De même si tu as la moindre micro modification, dit le moi que je m'en occupe ! (je fais aussi le service après vente %D).
Voilà, en espérant avoir bien répondu à ta demandes cette fois      .