CODE RP

Bonjour à tous, afin de faciliter l'embellissement de vos rps, voici des codes très simple et efficaces à utiliser

---------------------

TUTORIEL 1 Base du code + dimension d'un bloc rp

Les premières lignes de votre codes doit toujours contenir les balises < div style=" CODE1;CODE2;" > VOTRE RP < / div > (Il faut retirer les espaces entre < et Div pour que ça fonctionne), les codes doivent toujours être séparé d'un ";"

Ca donne ceci:

Code:

<div style=" CODE1;CODE2;"> VOTRE RP</div>

1. La largeur de votre rp

Pour jouer sur la largeur de votre rp, il faut ajouter la balise "width:XXXpx;"
Dans l'exemple ci-dessous, je l'ai mis à 600 px.

Vous pouvez aussi ajouter, un "margin" et "padding" le margin sera la distance entre votre rp et le bord de votre rp et le padding, la distance min. entre le bord de votre rp et le bord du post

Exemple :

Code:

<div style="width:600px; text-align:left;  margin:5px; padding:10px; text-align:justify;">

[color=#ffffff][b]Dolphicarius Zauler •[/b] [/color][color=#ff7ac8]Qui parmi vous a toujours fait de son mieux pour arriver au sommet malgré le fait qu’à chaque fois, le destin s’est retourné contre lui. Toutes ces fois où, alors qu’il était sur le point de réussir, le destin ou n’importe quel autre connard l’ont humilié, ne l'ont pas mis en valeur, lui ont manqué de respect ! Qui parmi vous a vécu pareil tourment ?  [/color]

[size=10]Quelques élèves lèvent timidement la main alors que les autres se moquent d'eux. [/size]

</div>

Comme vous avez pu le voir avec ce bout de code, j'ai fait exactement la même chose avec une image.

Autre exemple avec une taille plus petite :

Code:

<div style="width:450px; text-align:left;  margin:5px; padding:10px; text-align:justify;">

[color=#ffffff][b]Dolphicarius Zauler •[/b] [/color][color=#ff7ac8]Qui parmi vous a toujours fait de son mieux pour arriver au sommet malgré le fait qu’à chaque fois, le destin s’est retourné contre lui. Toutes ces fois où, alors qu’il était sur le point de réussir, le destin ou n’importe quel autre connard l’ont humilié, ne l'ont pas mis en valeur, lui ont manqué de respect ! Qui parmi vous a vécu pareil tourment ?  [/color]

[size=10]Quelques élèves lèvent timidement la main alors que les autres se moquent d'eux. [/size]

</div>

----------------------------

Tutoriel 2 : Ajoutez des images

Code:

<img src="https://zupimages.net/up/20/40/ox4s.jpg" style="border-style: double; border-width:4px; border-color:#D9A338; padding:0px; width:450px; " />

Pour ajouter une image, il vous suffit d'utiliser le code suivant :

Code:

<img src="LIEN IMAGE" style="border-style: double; border-width:4px; border-color:#D9A338; padding:0px; width:450px; " />

Comme vous le voyez, dans la balise width, j'ai choisis la taille. J'ai juste ajouté d'autres fonctionnalités comme la bordure que vous pouvez bien sur ajouter à votre code rp plus haut.

La balise "border-style" permet de dire le style de contour, je vous conseil de choisir entre solid et double, les autres sont trop superflus.

La balise "border width" agit sur l'épaisseur de la bordure.

La balise "boderder-color:" agit sur la couleur de celle-ci.

Autre exemples :

Code:

<img src="https://zupimages.net/up/20/40/ox4s.jpg" style="border-style: solid; border-width:10px; border-color:#efefef; padding:0px; width:350px; " />

EXEMPLE AVEC BORDURE AU RP + IMAGE :

Code:

<div style="border-style:solid; border-width:1px; border-color:#333333;width:600px; text-align:left;margin:15px; padding:15px; text-align:justify;">

[color=#ffffff][b]Dolphicarius Zauler •[/b] [/color][color=#ff7ac8]Qui parmi vous a toujours fait de son mieux pour arriver au sommet malgré le fait qu’à chaque fois, le destin s’est retourné contre lui. Toutes ces fois où, alors qu’il était sur le point de réussir, le destin ou n’importe quel autre connard l’ont humilié, ne l'ont pas mis en valeur, lui ont manqué de respect ! Qui parmi vous a vécu pareil tourment ?  [/color]

[size=10]Quelques élèves lèvent timidement la main alors que les autres se moquent d'eux.[/size]

<center><img src="https://zupimages.net/up/20/40/ox4s.jpg" style="border-style: solid; border-width:10px; border-color:#efefef; padding:0px; width:450px; " /> </center>

</div>

----------
Tutoriel 3, rajouter un background-color

Pour rajouter une couleur dans vos background comme dans les rps de Kairi Sane ou Io, vous pouvez ajouter dans votre div, le texte suivant : background-color:COULEUR;.

Exemple :

Code:

<div style="border-style:solid; border-width:1px; border-color:#efefef; background-color:#5e5e5e ; width:600px; text-align:left;margin:15px; padding:15px; text-align:justify;">

[color=#ffffff][b]Dolphicarius Zauler •[/b] [/color][color=#ff7ac8]Qui parmi vous a toujours fait de son mieux pour arriver au sommet malgré le fait qu’à chaque fois, le destin s’est retourné contre lui. Toutes ces fois où, alors qu’il était sur le point de réussir, le destin ou n’importe quel autre connard l’ont humilié, ne l'ont pas mis en valeur, lui ont manqué de respect ! Qui parmi vous a vécu pareil tourment ?  [/color]

[size=10]Quelques élèves lèvent timidement la main alors que les autres se moquent d'eux.[/size]

<center><img src="https://zupimages.net/up/20/40/ox4s.jpg" style="border-style: solid; border-width:10px; border-color:#efefef; padding:0px; width:450px; " /> </center>

</div>

Voici un exemple de code des images qui se recadre automatiquement :

Code:

<center><img src="URL IMG" style="border-style: solid; border-width:7px; border-color:#ffffff;padding:1px; width:450px; height:250px; object-fit: cover "/></center>

Cela donne ceci :