50 euros la fiche !

On arrête de transpirer

Pour les Nanites qui veulent faire un livre de bord aussi beau que Marie-Jozef... ou pour les gros doués qui ont l'âme charitable, on ouvre ce sujet de livre service  Postez vos codes à partager à la suite de ce message avec une petite prévisualisation et le code à copier-coller.

Bien évidemment, ça serait cool si vous respectiez le boulot des créateurs. N'enlevez pas leur copyright s'il y en a un et n'utilisez pas les codes offerts autre part sans autorisation !

Afin d'éviter une vague de messages (espère toujours, Sip), postez seulement si vous avez des codes à partager.

Pour les Nanites qui ont envie de dire merci, on a le p'tit bouton des +1 cookie !
Cookies garantis

Infos annexes

Trop beau Sip :7.c/:

J'ai commis ceci pour ma part, avec l'aide de Kida quand je savais pas comment m'y prendre (hello triangle...), n'hésitez pas à personnaliser, ajouter, mettre aux couleurs d'un autre NM en utilisant les images gracieusement fournies par Sip en début de topic...
D'ailleurs en vrai l'image est rectangulaire et mesure 800x250px, pas la peine d'en faire un triangle sur un logiciel de retouche d'image ! \O/

Avis aux suivants : je pense pas qu'on puisse faire plus large que 800px sans déformer le forum... attention donc si vous voulez pas reprendre toutes vos dimensions @_@

Ah, et merci à vous de laisser le petit copyright même si vous changez plein de trucs, j'y ai passé mon aprèm, ma soirée et quelques heures la semaine dernière, donc j'aimerais bien que ce petit nom reste visible, merci

Code:

<div style="width: 0; height: 0; margin: auto; border: 0 solid transparent; border-left: 810px solid #dedcdd; border-bottom-width: 250px; margin-bottom: -48px; background-image: url('https://i58.servimg.com/u/f58/18/39/18/54/northa11.jpg')">
<div style="width: 500px; -ms-transform: rotate(343deg); -webkit-transform: rotate(343deg); transform: rotate(343deg); margin-left: -750px; margin-top: 112px;"><a href="LIENVERSLAPRESENTATION"><img src="https://i58.servimg.com/u/f58/18/39/18/54/iekate10.png" alt="image"></a></div></div>
<div style= "width: 800px; text-align: center; margin-left: auto; margin-right: auto; margin-top: -15px;"><img src="https://i58.servimg.com/u/f58/18/39/18/54/co_chi10.png" alt="image"></div><div style= "width: 800px; height: auto; margin: auto; margin-top: -11px; padding: 5px; border-top: solid 3px #743434; background-color: #4b4545;">
<div style= "width: 200px; height: auto; padding: 2px; margin: auto; background-color: #383232;"><div style= "font-family: 'Architects Daughter'; font-variant: small-caps; font-size: 20px; text-align: center; color: #f3c055">Topics</div></div>
<div style= "width: 245px; height: 200px; display: inline-block; text-align: justify; margin: 5px; padding: 5px; background-color: #dedcdd"><div style= "font-family: 'Architects Daughter'; font-weight: bold; font-variant: small-caps; text-align: center; color: #743434;">Titre de la section</div><div style="height: 170px; margin: auto; margin-top: 5px; overflow: auto; font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div></div><div style= "width: 250px; height: 200px; display: inline-block; text-align: justify; margin: 5px; padding: 5px; background-color: #dedcdd"><div style= "font-family: 'Architects Daughter'; font-weight: bold; font-variant: small-caps; text-align: center; color: #743434;">Titre de la section</div><div style="height: 170px; margin: auto; margin-top: 5px; overflow: auto; font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div></div><div style= "width: 245px; height: 200px; display: inline-block; text-align: justify; margin: 5px; padding: 5px; background-color: #dedcdd"><div style= "font-family: 'Architects Daughter'; font-weight: bold; font-variant: small-caps; text-align: center; color: #743434;">Titre de la section</div><div style="height: 170px; margin: auto; margin-top: 5px; overflow: auto; font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div></div>

<div style= "width: 200px; height: auto; padding: 2px; margin: auto; background-color: #383232;"><div style= "font-family: 'Architects Daughter'; font-variant: small-caps; font-size: 20px; text-align: center; color: #f3c055">Liens</div></div>
<table><tr><td><div style= "height: 80px; width: 80px; margin-left: 3px; background-image: url(https://i58.servimg.com/u/f58/18/39/18/54/northa12.jpg); border: 2px solid #743434;"> </div></td> <td><div style="height: 71px; width: 690px; text-align: justify; padding: 5px; margin: 5px; overflow: auto; background-color: #dedcdd;"><span style="font-variant: small-caps; font-family: 'Architects Daughter' !important; font-weight: bold;"><a href="PRESENTATIONDUPERSONNAGE">Nom du personnage - Relation</a></span>
<span style= "font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div></td></tr></table>
<table><tr><td><div style= "height: 80px; width: 80px; margin-left: 3px; background-image: url(https://i58.servimg.com/u/f58/18/39/18/54/northa12.jpg); border: 2px solid #743434;"> </div></td> <td><div style="height: 71px; width: 690px; text-align: justify; padding: 5px; margin: 5px; overflow: auto; background-color: #dedcdd;"><span style="font-variant: small-caps; font-family: 'Architects Daughter' !important; font-weight: bold;"><a href="PRESENTATIONDUPERSONNAGE">Nom du personnage - Relation</a></span>
<span style= "font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div></td></tr></table>
<table><tr><td><div style= "height: 80px; width: 80px; margin-left: 3px; background-image: url(https://i58.servimg.com/u/f58/18/39/18/54/northa12.jpg); border: 2px solid #743434;"> </div></td> <td><div style="height: 71px; width: 690px; text-align: justify; padding: 5px; margin: 5px; overflow: auto; background-color: #dedcdd;"><span style="font-variant: small-caps; font-family: 'Architects Daughter' !important; font-weight: bold;"><a href="PRESENTATIONDUPERSONNAGE">Nom du personnage - Relation</a></span>
<span style= "font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div></td></tr></table><div style= "font-size: 10px; text-align: right; color: #f3c055;"> Jasmée</div></div>

Vos codages sont superbes, j'adore

J'ai codé une fiche pour mon livre de bord en tentant de rester dans le style actuel du forum. Du coup, si jamais il vous plait, je le rends dispo en libre-service! J'ai tenté de coder au mieux pour que l'édition soit simple, mais n'hésitez pas à m'envoyer un MP si vous éprouves un problème à arranger quoi que ce soit à votre gout. D'ailleurs, ne vous gênez pas pour modifier le tout comme bon vous semble (juste laisser le petit copyright à la fin, please^^).

PETIT GUIDE POUR LA PERSONNALISATION

• LES IMAGES ▬ Le format des images sont les suivants : 258x413 px pour la grande image de présentation et 400x60 px pour les petites images entre les sections de RP.
• ENCADRÉS ▬ La couleur des encadrés des trois images est modifiable en remplaçant le #3F617A par le code de couleur de votre choix dans ces balises (pour obtenir le code HTML de votre couleur, vous pouvez utiliser ce site) :

Code:

<img class ="imgprofil" style="border:4px solid #3F617A" src="URL DE L'IMAGE" alt="image"/>

• COULEUR DES BOITES ▬ La couleur des boites est personnalisable via le CSS, soit dans la première partie du code. Chaque boite a un code unique (".boxi" pour le statut role play, ".boxii" pour les news, ".boxnormaux" pour les RPs normaux, ".boxflash" pour les RPs flash, ".boxfaille" pour les RPs de la faille, ".boxboys" pour les liens masculins et ".boxgirls"). Trouvez d'abord la partie du code qui correspond à la boite que vous souhaitez personnaliser, puis remplacez le code HTML de la couleur de cette balise (pour obtenir le code HTML de votre couleur, vous pouvez utiliser ce site) :

Code:

background-color:#882122;

• LES TITRES ▬ Malheureusement, les polices d'écriture propres aux Nano Mondes du forum ne sont pas disponible sur google font, ce qui veut dire que les titres sont en fait des images qui doivent être faites à la main. Pour le titre même du Nano Monde, vous pouvez utilisez celles fournies par Siparti dans le premier message de ce sujet (un gros merci d'ailleurs ). Si votre personnage n'est pas d'Alpha Perdu et que vous ne savez pas comment créer des images pour remplacer celles des titres existants, vous pouvez m'envoyer un MP, il me fera plaisir de vous donner un coup de main^^

Bref, enjoy! J'espère qu'il vous plaira

Code:

<style> .box {display: block; margin: auto; width: 736px;} .imgprofil {display: block; margin: auto; width: 258px;} .boxi {background-color:#882122; width:240px; margin:auto; margin-top:-25px; padding:10px; font-size:14px; color:#fff;} .boxii {background-color:#383232; width:240px; margin:auto; margin-top:-35px; padding:10px; font-size:14px; color:#fff} .boxnormaux {background-color:#9B9999; width:388px; height:160px; overflow: auto; margin:auto; margin-left:35px; padding:10px; font-size:14px; color:#fff} .boxflash {background-color:#716F6F; width:388px; height:160px; overflow: auto; margin:auto; margin-left:35px; padding:10px; font-size:14px; color:#fff} .boxfaille {background-color:#9B9999; width:388px; height:160px; overflow: auto; margin:auto; margin-left:35px; padding:10px; font-size:14px; color:#fff} .boxboys {background-color:#383232; width:325px; height:200px; overflow: auto; margin:auto; padding:10px; font-size:14px; color:#fff} .boxgirls {background-color:#383232; width:335px; height:200px; overflow: auto; margin:auto; padding:10px; font-size:14px; color:#fff} </style>
<div class="box"><table><tr><td><img class="imgprofil" src="https://www.zupimages.net/up/17/22/xnke.png" alt="image-test" />
<img class ="imgprofil" style="border:4px solid #3F617A" src="https://www.zupimages.net/up/17/22/icw6.jpg" alt="image" />
<img style="margin-bottom:20px; margin-left:10px;" src="https://www.zupimages.net/up/17/22/b6jw.png" alt="image" />

<div class="boxi"><center>[img(15px,15px)]https://www.zupimages.net/up/17/22/asiu.png[/img] [b]STATUT ROLE PLAY[/b]</center>
[b]○[/b] libre/[strike]indisponible[/strike]
[b]○[/b] [url=https://www.nano-roleplay.com/][color=#ffffff]fiche de présentation[/color][/url]
[b]○[/b] aucune demandes de rp
[b]○[/b] aucune petite annonce</div>

<div class="boxii"><center>[img(15px,15px)]https://www.zupimages.net/up/17/22/kh51.png[/img] [b]NEWS & MISES À JOUR[/b]</center>
[b]○ 30/05/2017 ▬[/b] mise à jour des rps
[b]○ 30/05/2017 ▬[/b] mise à jour des liens
[b]○ 30/05/2017 ▬[/b] création du ldb</div></td>

<td>
<br><img style="margin-left:40px" src="https://www.zupimages.net/up/17/22/wtp8.png" alt="image"/><br>
<div class="boxnormaux"><center>[img(15px,15px)]https://www.zupimages.net/up/17/22/rk6x.png[/img] [b]RPS NORMAUX & EXPRESS[/b]</center>
[b]○ TITRE ▬[/b] [i]Partenaire[/i]
description
[b]○ TITRE ▬[/b] [i]Partenaire[/i]
description
[b]○ TITRE ▬[/b] [i]Partenaire[/i]
description</div>
<img style="border:4px solid #3F617A;margin-left:35px" src="https://www.zupimages.net/up/17/22/vjw2.jpg" alt="image"/><br>
<div class="boxflash"><center>[img(15px,15px)]https://www.zupimages.net/up/17/22/rk6x.png[/img] [b]RPS FLASHBACK[/b]</center>
[b]○ TITRE ▬[/b] [i]Partenaire[/i]
description
[b]○ TITRE ▬[/b] [i]Partenaire[/i]
description
[b]○ TITRE ▬[/b] [i]Partenaire[/i]
description
</div>
<img style="border:4px solid #3F617A;margin-left:35px" src="https://www.zupimages.net/up/17/22/wd2x.jpg" alt="image"/><br>
<div class="boxfaille"><center>[img(15px,15px)]https://www.zupimages.net/up/17/22/rk6x.png[/img] [b]RPS FAILLE[/b]</center>
[b]○ TITRE ▬[/b] [i]Partenaire[/i]
description
[b]○ TITRE ▬[/b] [i]Partenaire[/i]
description
[b]○ TITRE ▬[/b] [i]Partenaire[/i]
description</div>
</td></tr></table>

[center][img]https://www.zupimages.net/up/17/22/x7yg.png[/img][/center]
<table><tr><td> <div class="boxboys"><center>[img(15px,15px)]https://www.zupimages.net/up/17/22/tjr6.png[/img] [b]LADS & GENTLEMENS[/b]</center>
[b]○ PRÉNOM & NOM ▬[/b] description du lien
[b]○ PRÉNOM & NOM ▬[/b] description du lien
[b]○ PRÉNOM & NOM ▬[/b] description du lien
</div> </td>

<td> <div class="boxgirls"><center>[img(15px,15px)]https://www.zupimages.net/up/17/22/o4xi.png[/img] [b]LASS & LADIES[/b]</center>
[b]○ PRÉNOM & NOM ▬[/b] description du lien
[b]○ PRÉNOM & NOM ▬[/b] description du lien
[b]○ PRÉNOM & NOM ▬[/b] description du lien</div> </td></tr></table>

[center][url=https://www.nano-roleplay.com/u998][color=#ffffff](c) aki' for nano role play[/color][/url][/center]
</div>

Hello tout le monde !

En collaboration avec Sip (quelle zolie maquette) et Nano (parce qu'elle est géniale), voici devant vos yeux ébahis un livre de bord officiel pour ce design de NRP :3 !

Code:

<div class="ldb"><div class="ldb_bann"><img src="https://i28.servimg.com/u/f28/11/99/97/10/exempl11.jpg" alt="bann 1005*365" class="ldb_bann_img"/><div class="ldb_description_perso scrollbar scrollbg-grey">
<div class="ldb_nom_perso">Nom du perso</div>
<a href="#"><span class="color-light">Lien vers sa fiche</span></a>
<span class="bold">Statut en RP :</span>
- Rp Normal : Libre
- Rp Flashback : Libre
- Rp Express : Libre</div></div>
<div class="ldb_flex"><div class="ldb_rp_item scrollbar scrollbg-grey"><div class="post-thead ldb_maj">Rp normaux</div>
<div class="ldb_rp_content"><span class="bold ldb_rp_subtitle"><span class="underline">Nom du RP</span><span class="italic"> (Statut du RP) </span>/ Joueurs : </span>Description rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RP

<span class="bold ldb_rp_subtitle"><span class="underline">Nom du RP</span><span class="italic"> (Statut du RP) </span>/ Joueurs : </span>Description rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RP</div></div>
<div class="ldb_rp_item scrollbar scrollbg-grey"><div class="post-thead ldb_maj">Rp flashback</div>
<div class="ldb_rp_content"><span class="bold ldb_rp_subtitle"><span class="underline">Nom du RP</span><span class="italic"> (Statut du RP) </span>/ Joueurs : </span>Description rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RP

<span class="bold ldb_rp_subtitle"><span class="underline">Nom du RP</span><span class="italic"> (Statut du RP) </span>/ Joueurs : </span>Description rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RP</div></div></div>

<div class="ldb_rp_item ldb_large scrollbar scrollbg-grey"><div class="post-thead ldb_maj">Rp faille & Autres</div>
<div class="ldb_rp_content"><span class="bold ldb_rp_subtitle"><span class="underline">Nom du RP</span><span class="italic"> (Statut du RP) </span>/ Joueurs : </span>Description rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RP

<span class="bold ldb_rp_subtitle"><span class="underline">Nom du RP</span><span class="italic"> (Statut du RP) </span>/ Joueurs : </span>Description rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RPDescription rapide du RP</div></div>

<div class="ldb_relations_title" style="background: linear-gradient(135deg, #a963a9 55%, #161614 55%);">Relations & Connaissances</div>

<div class="ldb_flex"><div class="ldb_relation_item"><img src="https://raw.githubusercontent.com/Skalleface/images-hosting/master/NRP/V9/ldb_ex2.jpg" alt="relation 100*150"/><div class="ldb_relation_content scrollbar scrollbg-grey"><h5 class="ldb_nom_relation">Nom du perso</h5>
<span class="ldb_type_relation bold" style="background-color : #a963a9;">Type de relation</span>
Description de la relation. Description de la relation. Description de la relation. Description de la relation. Description de la relation. Description de la relation.</div></div>
<div class="ldb_relation_item"><img src="https://raw.githubusercontent.com/Skalleface/images-hosting/master/NRP/V9/ldb_ex2.jpg" alt="relation 100*150"/><div class="ldb_relation_content scrollbar scrollbg-grey"><h5 class="ldb_nom_relation">Nom du perso</h5>
<span class="ldb_type_relation bold" style="background-color : #a963a9;">Type de relation</span>
Description de la relation. Description de la relation. Description de la relation. Description de la relation. Description de la relation. Description de la relation.</div></div></div></div>

Mais c'est pas les bonnes couleurs !

Tutafé ! Les couleurs actuelles sont celles du pico monde, et je sais bien que vous, joyeuses nanites, vous n'avez pas que des picos persos. Je vous ai compris ! Il y a donc moyen de personnaliser un peu tout ce ptit monde et je vais vous expliquer comment pas plus tard que tout de suite !

Les scrollbars

Actuellement les scrollbars sont neutres, toutes grises. C'est nul. (Bon c'est surtout neutre pour tous ceux qui n'auraient pas envie de les personnaliser.) Pour changer ça, il suffit que vous alliez chercher (avec un petit ctrl+f par exemple), toutes les fois où est écrit dans le code : "scrollbg-grey" et de le remplacer par "scrollbg-lenanomondedevotrechoix" ! Bon je vous vois venir, il ne faut pas VRAIMENT écrire "lenanomondedevotrechoix" mais bien ... le nano monde de votre choix. Voici très exactement les différentes scrollbar que vous pouvez utiliser :

• scrollbg-pico : picomonde


• scrollgbg-adp : aventures du passé


• scrollbg-zombie : zombieland


• scrollbg-chim : chimères


• scrollbg-xmen : x-men


• scrollbg-faille : faille


• scrollbg-main : votre couleur sélectionnée comme principale

Et vouala !

Les relations

Pour changer la ptite picocouleur du titre "Relations" et des "types de relation", ce n'est pas beaucoup plus compliqué ! Déjà, il vous faut sélectionner la couleur que vous voulez (le code couleur très exactement). Une petite aide, voici les différents codes couleurs des différents mondes :

• picomonde : #a963a9


• aventures du passé : #00a652


• zombieland : #ee1c25


• chimères : #e9bd28


• x-men : #f36523


• faille : #23a9b5

Une fois la bonne couleur choisie, il faut la remplacer à deux endroits. Ici:

Code:

<div class="ldb_relations_title" style="background: linear-gradient(135deg, >>>>>LA #a963a9 LA<<<<<< 55%, #161614 55%);">Relations & Connaissances</div>

et ici (pour chaque relation que vous ajoutez):

Code:

<span class="ldb_type_relation bold" style="background-color : >>>>>LA #a963a9 LA<<<<<<;">Type de relation</span>

(n'hésitez pas à utiliser un petit ctrl+F pour vous éviter de chercher les passages concernés pendant des heures).

Et TOUDOUM c'est tout changé !

Ajouter une relation

Si jamais vous êtes un peu perdu.e.s, voici le code à copier coller qui correspond à un bloc de relation :

Code:

<div class="ldb_relation_item"><img src="https://raw.githubusercontent.com/Skalleface/images-hosting/master/NRP/V9/ldb_ex2.jpg" alt="relation 100*150"/><div class="ldb_relation_content scrollbar scrollbg-grey"><h5 class="ldb_nom_relation">Nom du perso</h5>
<span class="ldb_type_relation bold" style="background-color : #a963a9;">Type de relation</span>
Description de la relation. Description de la relation. Description de la relation. Description de la relation. Description de la relation. Description de la relation.</div></div>

/!\ A ajouter avant le dernier

Code:

</div>

Quelle horreur, du code

Oui oui je sais, actuellement ce petit design vous demande de farfouiller un peu dans le code pour changer les couleurs, ajouter une nouvelle relation ... Vous n'en avez peut être pas envie, ou peur de faire des bêtises (ça se comprend). Soyez patients, il est possible que peut être, un jour prochain viendra ou éventuellement les choses vous seront facilitées, par ... qui sait ... un générateur. Peut être. (Traduction : me harcelez pas si vous êtes intéressés par le projet, ça risquerait juste de me ralentir xD)

Pour la postérité, je laisse le code de mon livre de bord (modifié depuis celui d'Aki). Même dimension d'image que pour le sien.

Code:

<style> .box {display: block; margin: auto; width: 736px;} .imgprofil {display: block; margin: auto; width: 258px;} .boxi {background-color:#444343; width:258px; margin:auto; margin-top:-25px; padding:10px; font-size:14px; color:#fff;} .boxrp {background-color:#9B9999; width:408px; height:167px; overflow: auto; margin:auto; margin-left:35px; padding:10px; font-size:14px; color:#fff} .boxpj {background-color:#9B9999; width:353px; height:200px; overflow: auto; margin:auto; padding:10px; font-size:14px; color:#fff} .boxpnj {background-color:#9B9999; width:708px; height:200px; overflow: auto; margin:auto; padding:10px; font-size:14px; color:#fff} </style><span class="NOM DU PERSO" id="NOM DU PERSO"></span><div class="box"><table><tr><td><h3 class="post-title color-zombie">NOM DU NANOMONDE</h3>
<img class ="imgprofil" alt="avatar" style="border:4px solid #ee1c25" src="LIEN IMAGE 1" />
<h4 class="post-block-ink-title color-zombie">Dina Johansen</h4>

<div class="boxi"><center>[b]ÉTAT DU PERSONNAGE[/b]</center>○ [url=https://www.nano-roleplay.com/t3046-luna-qui-lunatique#ina][color=#ffffff]Fiche de présentation[/color][/url]
○ [url=https://www.nano-roleplay.com/t1714-demandes-pour-zombieland][color=#ffffff]Demandes de rp[/color][/url]
○ pas de petite annonce

<center>[b]NOUVEAUTÉS SUR LE PERSO[/b]</center>○ Truc 1
○ Truc 2
○ Truc 3</div></td>

<td><br><h4 class="post-block-ink-title color-zombie">Sa survie</h4><br><div class="boxrp"><center>[b]RP FAILLE[/b]</center>[url=https://www.nano-roleplay.com]Titre[/url]
> Partenaire (PJ) [i]en cours[/i]
Résumé.</div>
<img style="border:4px solid #ee1c25;margin-left:35px"alt="bandeau1"  src="LIEN IMAGE 2" /><br>
<div class="boxrp"><center>[b]RP NORMAUX[/b]</center>[url=https://www.nano-roleplay.com]Titre[/url]
> Partenaire (PJ) [i]en cours[/i]
Résumé.</div>
<img style="border:4px solid #ee1c25;margin-left:35px"alt="bandeau2"  src="LIEN IMAGE 3" /><br>
<div class="boxrp"><center>[b]RP FAILLE[/b]</center>[url=https://www.nano-roleplay.com]Titre[/url]
> Partenaire (PJ) [i]en cours[/i]
Résumé.</div></tr></table>


<h4 class="post-block-ink-title color-zombie">Ses rencontres et ses relations</h4><table><tr><td><div class="boxpj"><center>[b]SURVIVANTES[/b]</center>[url=https://www.nano-roleplay.com/LIEN PRESENTATION]NOM PJ[/url], description.
</div> </td>

<td> <div class="boxpj"><center>[b]SURVIVANTS[/b]</center>[url=https://www.nano-roleplay.com/LIEN PRESENTATION]NOM PJ[/url], description.</div> </td></tr></table>

[center][url=https://www.nano-roleplay.com/u998](c) aki' for nano role play[/url][/center]
</div>

Miak !

Je vous laisse aussi le code de mon livre de bord que je pense changer prochainement donc avant de tout perdre, voilà. (Et Sip, tu peux le modifier pour les marges auto, j'ai pas pigé cette partie.)

Code:


[center]<link href='http://fonts.googleapis.com/css?family=Satisfy|Stint+Ultra+Condensed' rel='stylesheet' type='text/css'><style type="text/css">.imname { position: center; width:100%; height : 70px; margin-top:10px; } .lapinvert { position: center; width:60% !important;} .imgets { width:100%; height: 300px; margin-top: 60px; } .imgets img { border-radius:150px 150px 150px 150px; } .imgetaboveI { position: center; z-index: 2; width: 300px; height: 300px; opacity:1.0; border:1px solid #B5B5B5; border-radius:150px 150px 150px 150px; padding:0px; } .imgetbelowI { position: center;z-index: 1;width: 300px; height: 300px; margin-top: -300px;opacity: 1.0;border:1px solid #B5B5B5;border-radius:150px 150px 150px 150px;padding:0px; } .imgetaboveI img, .imgetbelowI img {width: a; height: 300px; } .imgetaboveI, .imgetbelowI, .textethid { position:relative;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;transition: all 1s ease-in-out; } .imgets:hover .imgetaboveI { transform:rotate(-360deg); -ms-transform:rotate(-360deg); -webkit-transform:rotate(-360deg);opacity: 0; } .imgets:hover .textethid { opacity: 1;visibility: visible;} </style>
       <table class="lapinvert" border="0" width="70%" align="center" style="background-color:#F4F4F4;color:#9D9D9D;width=70%; text-shadow:none;border-radius:5px; margin-top:-45px; padding:30px 20px 30px 20px;">[/center]
   <tr height="50"><td style="border-bottom: #E3E3E3 3px dotted;padding-bottom:10px;" align="center"><div class="imname" align="center"><img alt src="https://i.ibb.co/M2Kn6db/Caneton-Nom-Perso.jpg" align="center"></div><div class="imgets" align="center" style="/* code en-tête perso */">
<div class="imgetaboveI"><img alt src="https://i.ibb.co/smJ0bhJ/Caneton-Avatar1.jpg"></div><div class="imgetbelowI"><img alt src="https://i.ibb.co/xsjFDS9/Caneton-Avatar2.jpg"></div><div style="margin-left:150px;"></div></div></td>
   </tr></table>

<div style= "width: 800px; text-align: center; margin-left: auto; margin-right: auto; margin-top: -15px;"><img alt src="https://i.ibb.co/Fb8v9YJ/Caneton-NM.jpg"></div><div style= "width: 800px; height: auto; margin: auto; margin-top: -11px; padding: 5px; border-top: solid 10px #cc6633; background-color: #171615;">
<div style= "width: 350px; height: auto; display: inline-block; text-align: justify; margin: 5px; padding: 5px; background-color: #171615; border:2px solid #F4F4F4"><div style= "font-family: 'Rockwell'; text-align: center; color: #F4F4F4;">NORMAL : libre</div></div><div style= "width: 350px; height: auto; display: inline-block; text-align: justify; margin: 5px; padding: 5px; background-color: #171615; border:2px solid #F4F4F4"><div style= "font-family: 'Rockwell'; text-align: center; color: #F4F4F4;">FLASHBACK : libre</div></div>
<div style= "font-family: 'Rockwell'; text-align: center; font-size: 14px; font-variant: small-caps; color: #cc6633;">[b]CANETON CANETON CANETON [/b]| caneton caneton caneton</div>
<div style= "font-family: 'Rockwell'; font-variant: small-caps; text-align: center; font-size:28px;">[color=#F4F4F4]Lien de la Fiche de Présentation[/color]</div>

<div style= "width: 625px; height: auto; padding: 2px; margin: auto; background-color: #ff9900;"><div style= "font-family: 'Rockwell'; font-variant: small-caps; font-size: 20px; text-align: center; color: #F4F4F4">[b]RP Normaux[/b]</div></div>
<table><tr><td><div style= "height: 150px; width: 120px; margin-right: 10px; margin-left: 30px; background-image: url(https://i.ibb.co/c6V5t7k/Caneton-Vignette.jpg); border: 2px solid #171715;"></div></td><td><div style="height: 150px; width: auto; text-align: justify; padding: 5px; margin-right: 30px; overflow: auto; background-color: #F4F4F4;"><span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom du RP + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">Personnage partenaire (Nanite)</span>
<span style= "font-size:12px;">Description du RP. [b]Statut.[/b]</span>

<span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom du RP + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">Personnage partenaire (Nanite)</span>
<span style= "font-size:12px;">Description du RP. [b]Statut.[/b]</span>

<span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom du RP + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">Personnage partenaire (Nanite)</span>
<span style= "font-size:12px;">Description du RP. Il ne faut pas hésiter à parler beaucoup pour que la marge automatique se fasse correctement. Aussi... [i]"L'origine du terme canard n'est pas connue, une orthographe connue du XIIIe siècle donne quanart. Il est probable que ce terme dérive d'une onomatopée, comme caqueter. Ce terme est aussi générique ; les espèces appelées « canard » peuvent être plus spécifiquement appelées pilet, sarcelle, tadorne… Pour désigner son cri, on dit que le canard cancane et l'onomatopée « coin-coin » est utilisée pour décrire ses vocalisations. Le canard femelle adulte est la cane ; le jeune canard, le caneton ; le canard sauvage de l'année, ne maîtrisant pas encore son vol, le halbran." (Wikipédia)[/i] [b]Statut.[/b]</span>

</div></td></tr></table>


<div style= "width: 625px; height: auto; padding: 2px; margin: auto; background-color: #ff9900;"><div style= "font-family: 'Rockwell'; font-variant: small-caps; font-size: 20px; text-align: center; color: #F4F4F4">[b]RP Flashback[/b]</div></div>
<table><tr><td><div style="height: 150px; width: auto; text-align: justify; padding: 5px; margin-left: 30px; overflow: auto; background-color: #F4F4F4;"><span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom du RP + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">Personnage partenaire (Nanite)</span><span style= "font-size:12px;">   [b]Année | X ans[/b]
Description du RP. [b]Statut.[/b]</span>

<span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom du RP + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">Personnage partenaire (Nanite)</span><span style= "font-size:12px;">   [b]Année | X ans[/b]
Description du RP. [b]Statut.[/b]</span>

<span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom du RP + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">Personnage partenaire (Nanite)</span><span style= "font-size:12px;">   [b]Année | X ans[/b]
Description du RP. Il ne faut pas hésiter à parler beaucoup pour que la marge automatique se fasse correctement. Aussi... [i]"Le colvert est le canard le moins farouche. Il s'acclimate facilement à la vie urbaine et craint peu l'homme. Il se reproduit fréquemment avec d'autres espèces (Canard noir qui habite l'Amérique, Canard pilet qui habite l'Europe ou son congénère le canard domestique), ce qui peut poser des problèmes de pollution génétique au sein des populations sauvages (et domestiques). Il est très grégaire en dehors des périodes de reproduction, et les femelles sont très fidèles aux mêmes territoires où elles retournent tous les ans." (Wikipédia)[/i] [b]Statut.[/b]</span>

</div></td><td><div style= "height: 150px; width: 120px; margin-right: 30px; margin-left: 10px; background-image: url(https://i.ibb.co/c6V5t7k/Caneton-Vignette.jpg); border: 2px solid #171715;"></div></td></tr></table>


<div style= "width: 625px; height: auto; padding: 2px; margin: auto; background-color: #ff9900;"><div style= "font-family: 'Rockwell'; font-variant: small-caps; font-size: 20px; text-align: center; color: #F4F4F4">[b]Dans la Faille[/b]</div></div>
<table><tr><td><div style= "height: 150px; width: 120px; margin-right: 10px; margin-left: 30px; background-image: url(https://i.ibb.co/c6V5t7k/Caneton-Vignette.jpg); border: 2px solid #171715;"></div></td><td><div style="height: 150px; width: auto; text-align: justify; padding: 5px; margin-right: 30px; overflow: auto; background-color: #F4F4F4;">
<span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom du RP + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">Personnage partenaire (Nanite)</span>
<span style= "font-size:12px;">Description du RP. [b]Statut.[/b]</span>

<span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom du RP + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">Personnage partenaire (Nanite)</span>
<span style= "font-size:12px;">Description du RP. [b]Statut.[/b]</span>

<span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom du RP + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">Personnage partenaire (Nanite)</span>
<span style= "font-size:12px;">Description du RP. Il ne faut pas hésiter à parler beaucoup pour que la marge automatique se fasse correctement. Aussi... [i]"Le mâle des populations sauvages est aisément reconnaissable, pendant la période nuptiale, par sa tête d'un vert brillant (d'où son nom). Le reste du plumage est gris-brun à blanc, avec un miroir alaire bleu-violet ; le bec est jaune. Après la période nuptiale, à l'approche de l'été, il mue et prend son plumage éclipse (de couleur beige semblable à celui des juvéniles et des femelles) et perd ses rémiges. Il vit alors dans les roseaux et les hautes herbes. Un à deux mois plus tard environ, le mâle reprend son plumage nuptial." (Wikipédia)[/i] [b]Statut.[/b]</span>

</div></td></tr></table>


<div style= "width: 625px; height: auto; padding: 2px; margin: auto; background-color: #ff9900;"><div style= "font-family: 'Rockwell'; font-variant: small-caps; font-size: 20px; text-align: center; color: #F4F4F4">[b]Interforum[/b]</div></div>
<table><tr><td><div style="height: 150px; width: auto; text-align: justify; padding: 5px; margin-left: 30px; overflow: auto; background-color: #F4F4F4;"><span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom de l'épreuve + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">[i]Forum organisateur[/i] | Partenaire éventuel</span>
<span style= "font-size:12px;">Description du RP / texte.</span>

<span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom de l'épreuve + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">[i]Forum organisateur[/i] | Partenaire éventuel</span>
<span style= "font-size:12px;">Description du RP / texte.</span>

<span style="font-variant: small-caps; font-family: 'Rockwell' !important; font-weight: bold; font-size: 16px; ">[color=#cc6633]Nom de l'épreuve + lien direct[/color]</span>
<span style= "font-family: 'Rockwell'; text-align: center; font-size:13px;">[i]Forum organisateur[/i] | Partenaire éventuel</span>
<span style= "font-size:12px;">Description du RP / texte. Il ne faut pas hésiter à parler beaucoup pour que la marge automatique se fasse correctement. Aussi...[i] "La femelle a le bec brun et le plumage plus terne (beige tacheté de brun). Celui-ci ressemble à celui du canard noir bien que généralement de teinte plus claire. Le bec du mâle est jaunâtre ou verdâtre, plus ou moins taché de noir, et ses pattes sont rouge-orangé. Mâle, femelle et juvénile disposent d'un miroir iridescent bleu-violet bordé de barres blanches sur les ailes. La tête des canetons est plus orangée et il a une calotte, le dos, une barre sur l'œil et la face dorsale des ailes brun foncé, le poitrail blanc. Les races domestiques peuvent être complètement blanches, noires, vertes comme le Cayuga, ou d'apparence assez semblable à la population sauvage comme les Campbells. Les canetons domestiques sont le plus souvent complètement jaunes." (Wikipédia)[/i]</span>

</div></td><td><div style= "height: 150px; width: 120px; margin-right: 30px; margin-left: 10px; background-image: url(https://i.ibb.co/c6V5t7k/Caneton-Vignette.jpg); border: 2px solid #171715;"></div></td></tr></table>

<img class ="imgprofil" style="border:2px solid #171715" alt src="https://i.ibb.co/K71pVj5/Caneton-Illustration.jpg" /><style> .avainfos { width: 128px; height: 200px; overflow: hidden; } .ficheava { width: 200px; height: 320px; border : 2px solid #171615; } .lieninfos { width: 120px; height: 194px; background: #F4F4F4; margin-top: 6px; transition: all 1s; border-radius: 5px; } .avainfos:hover>.lieninfos { margin-top: -315px; } .lienpseudo { font-family: 'Rockwell'; font-variant: small-caps; font-size: 12px; text-align: center; margin-top: 6px; } .lienature { font-size: 10px; font-family: 'Rockwell'; } .liendesc { width: 110px; height: 180px; margin-top: 6px; overflow: auto; text-align: center; font-size: 12px; line-height:12px; } </style>


<div style= "width: 625px; height: auto; padding: 2px; margin: auto; background-color: #cc6633;"><div style= "font-family: 'Rockwell'; font-variant: small-caps; font-size: 20px; text-align: center; color: #F4F4F4">[b]Ses Rencontres[/b]</div></div>
<table><td><center><div class="avainfos"><div class="ficheava" div style="background: url('https://i.ibb.co/WDrWghr/Caneton-Perso.png');"></div><div class="lieninfos"><div class="lienature">Nature du lien</div><div class="lienpseudo">Nom du perso + lien fiche</div><div class="liendesc">[b]X ans |[/b] Description du lien entre les personnages.</div></div></div></center></td><td><center><div class="avainfos"><div class="ficheava" div style="background: url('https://i.ibb.co/WDrWghr/Caneton-Perso.png');"></div><div class="lieninfos"><div class="lienature">Nature du lien</div><div class="lienpseudo">Nom du perso + lien fiche</div><div class="liendesc">[b]X ans |[/b] Description du lien entre les personnages.</div></div></div></center></td><td><center><div class="avainfos"><div class="ficheava" div style="background: url('https://i.ibb.co/WDrWghr/Caneton-Perso.png');"></div><div class="lieninfos"><div class="lienature">Nature du lien</div><div class="lienpseudo">Nom du perso + lien fiche</div><div class="liendesc">[b]X ans |[/b] Description du lien entre les personnages.</div></div></div></center></td></table>

<div style= "width: 625px; height: auto; padding: 2px; margin: auto; background-color: #cc6633;"><div style= "font-family: 'Rockwell'; font-variant: small-caps; font-size: 20px; text-align: center; color: #F4F4F4">[b]Personnages liés[/b]</div></div>
<table><td><center><div class="avainfos"><div class="ficheava" div style="background: url('https://i.ibb.co/WDrWghr/Caneton-Perso.png');"></div><div class="lieninfos"><div class="lienature">Nature du lien</div><div class="lienpseudo">Nom du perso + lien fiche</div><div class="liendesc">[b]X ans |[/b] Description du lien entre les personnages.</div></div></div></center></td><td><center><div class="avainfos"><div class="ficheava" div style="background: url('https://i.ibb.co/WDrWghr/Caneton-Perso.png');"></div><div class="lieninfos"><div class="lienature">Nature du lien</div><div class="lienpseudo">Nom du perso + lien fiche</div><div class="liendesc">[b]X ans |[/b] Description du lien entre les personnages.</div></div></div></center></td></table>


<div style= "font-size: 10px; text-align: right; color: #CFCFCF;">[b]Personnage :[/b] [i]"Titre de l'oeuvre"[/i] [color=#cfcfcf]Artiste + lien de l'oeuvre[/color] - [i]"Titre de l'oeuvre"[/i] [color=#cfcfcf]Artiste + lien de l'oeuvre[/color] - [i]"Titre de l'oeuvre"[/i] [color=#cfcfcf]Artiste + lien de l'oeuvre[/color]
[i]"Titre de l'oeuvre"[/i] [color=#cfcfcf]Artiste + lien de l'oeuvre[/color] | [b]Personnage lié :[/b] [i]"Titre de l'oeuvre"[/i] [color=#cfcfcf]Artiste + lien de l'oeuvre[/color] | [b]Personnage lié :[/b] [i]"Titre de l'oeuvre"[/i] [color=#cfcfcf]Artiste + lien de l'oeuvre[/color]
[b]:copyright:️ Jasmée - Lizzou - Wtfpdubber - Night Sky - Stanéria[/b]</div></div></div>

Nouveau livre de bord en accès libre.
Astuce : utiliser la fonction rechercher&remplacer pour changer les couleurs.

Aaron de Pietri

X-Men
Fiche de présentation - Disponibilité en rp

Nouveautes sur Aaron ○ Il est imprévisible. ○ Il sait faire du parkour mais quand a-t-il appris ?! ○ C’est un fan de manchots, pas de « pingouins » !	Vieilles coupures ○ Le resac des infos en 2009 avec Ambre (Ciroma) RP en cours Aaron raconte des anecdotes à sa fille sur la plage de Coney Island jusqu’à ce qu’une fillette se joigne à la conversation. ○ Le royaume du papier en 2011 avec Anthem (Vrankiel) Aaron décide d’interviewer une libraire et c’est ainsi qu’il rencontre Anthem Sadwood, cookievore.
	Actualites ○ Attrape-moi si tu peux ! avec Maverick (Vrankiel) Aaron était tranquillement en train de s’occuper de ses maquettes quand un hurluberlu est passé devant sa fenêtre, au troisième étage… Le journaliste rattrape le jeune homme en usant de ses talents de parkour (lui aussi).
	Science-fiction ○ Té ki toa ? avec Vilho (Stanéria) & Ryot (Siparti) RP en cours Le jeune Aaron de treize ans se lance sur un chat Internet sans savoir sur qui il est tombé : un survivant de l’apocalypse et un demi-alien d’une autre galaxie. ○ Le décompte avec plein de participants Aaron se voit offrir un stylo-plume dans un étrange théâtre, que va-t-il faire avec ce cadeau ?

Relations professionnels Anthem Sadwood, rat de librairie qui a une dent contre Amazone et qui semble cacher un triste secret.

Relations dans la rue Maverick Clint, âme généreuse et aventurière, presque un héros. Il donne de l’argent aux enfants malades des hôpitaux et arrête les voleurs de sac.

(c) Pazou & Lunatique for nano role play

Code:

<span class="perso" id="perso"><div class="post-block-2 scrollbar" style="height:90px; text-align:center; background-color:#f36523"><div id="aaron" class="post-block-ink-title color-light">Nom complet</div>[b][color=white]Nano. Monde[/color][/b]
[url=lien-présentation#perso]Fiche de présentation[/url]</div><table style="width: 97%; margin:auto"><tr><td rowspan="3" style="width:21%"><img class ="imgprofil" alt="avatar" style="border:4px solid #f36523" src="https://nsm09.casimages.com/img/2020/05/08//20050812513424029816785082.jpg" />
<div class="post-block-ink-title" style="color:#f36523">Nouveautes sur Aaron</div><div class="post-block-2 color-light scrollbar" style="height:180px; background-color:#f36523; font-size: 13px">○ nouvelle info 1
○ nouvelle info 2
○ nouvelle info 3</div></div></td><td style="width:79%"><div class="post-block-ink-title" style="color:#f36523">RP flashback</div><div class="post-block-2 scrollbar" style="height:158px; background-color:#e0e0e0">○ [u][url=lien-RP]Titre-TP[/url] en *date* avec Perso (Joueur) RP en cours[/u]
Description.
○ [url=lien-RP]Titre-RP[/url] en 2011 avec Perso (Joueur)
Description.</div></td></tr>
<tr><td style="width:79%"><div class="post-block-ink-title" style="color:#f36523">RP normal (et express)</div><div class="post-block-2 scrollbar" style="height:158px; background-color:#e0e0e0">○ [url=lien-RP]Titre-RP[/url] avec Perso (Joueur)
Description.</div></td></tr>
<tr><td style="width:79%"><div class="post-block-ink-title" style="color:#f36523">RP faille</div><div class="post-block-2 scrollbar" style="height:158px; background-color:#e0e0e0">○ [u][url=lien-RP]Titre-RP[/url] avec perso (Joueur) RP en cours[/u]
description</div></td></tr></table>
<table style="width: 97%; margin:auto"><tr><td style="width:50%"><div class="post-block-ink-title" style="color:#f36523">Catégorie relation 1</div><div class="post-block-2 scrollbar" style="height:200px; background-color:#e0e0e0; font-size: 13px"><img src="lien-avatar-PJ" alt="imgperso" style="float:left; margin:5px 10px 0 0; border: 5px solid white" />[url=lien-présentation]NomPJ[/url], description.</div></td><td style="width:50%"><div class="post-block-ink-title" style="color:#f36523">Catégorie relation 2</div><div class="post-block-2 scrollbar" style="height:200px; background-color:#e0e0e0; font-size: 13px"><img src="lien-avatar-PJ" alt="imgperso" style="float:left; margin:5px 10px 0 0; border: 5px solid white" />[url=lien-présentation]NomPJ[/url], description.</div></td></tr></table>
[center](c) Pazou & Lunatique for nano role play
[/center]

Coucou,

Déjà merci de poster tous vos LdB en libre service, c'est super inspirant ! Ca me donne envie de reprendre les miens sur la base de la version officielle de la nouvelle version x)

Mais du coup je me demandais : à quel point on peut bidouiller le code ? Est-ce que c'est limité à changer les couleurs comme a expliqué Eililith ou on peut aller plus loin ?

Merci

Je pense que tu seras pas la première à bidouiller (Alyaa l'a fait aussi), mais attention avec les modifs parce que la plupart est dans le CSS du forum. Et évidemment, ne casse pas la page. Réparer son propre code c'est déjà chiant, mais réparer celui de quelqu'un d'autre c'est un cauchemar XD

Y'a pas pour rien marqué ça :

On supprimera sans avertissement les codes qui cassent le forum !

Merci pour le retour Sip !

Du coup j'ai bidouillé pendant mes réunions de la journées (). Il se pourrait que j'ai un chouïa cassé le forum à un certain moment mais je l'ai réparé juste après

J'avais jamais pris le temps de regarder mais ils sont chouettes vos livres de bord    ! C'est cool de les voir mixer avec les codes du forum pour la mise en page en plus :)

J'ai remarqué un truc courant pour les valeurs des font-size, vous utilisez beaucoup du px. C'est plus parlant mais je conseillerai toutefois de passer au rem (faut le voir comme un % (noté de 0 à 1 donc 0.8rem vaut 80%) de la valeur racine qui est elle, en px, et qui est souvent de 14 ou 16px, ça dépend de vos réglages de navigateur).

C'était la minute nanocode. A bientôt pour le prochain épisode.

Hello !

Désolée j'ai pris un peu le temps mais je remets là ma version du LdB officiel pour qui veut. Je n'ai fait que changer des couleurs et la disposition, donc je rend tout le mérite aux créateurs de la version originale !
Pour ceux qui veulent, j'ai une version google docs où j'ai mis en gras les emplacements des choses à modifier et qui est donc plus facile à utiliser quand on connait pas bien le code. Hésitez-pas à me demander en MP ou sur discord :)

Aperçu:

Code:

<div class="ldb"><div class="ldb_bann" id="Perso"><img src="https://raw.githubusercontent.com/Skalleface/images-hosting/master/NRP/V9/ldb_ex1.jpg" alt="bann 830*300" class="ldb_bann_img"/><div class="ldb_description_perso scrollbar scrollbg-grey">
<div class="ldb_nom_perso">Nom du perso</div>
[center]>[url=https://www.nano-roleplay.com/]fiche de présentation[/url]<[/center]

<span class="bold">Rapide description du perso</span>
</div></div>
<div class="ldb_flex"><div class="ldb_relation_item color-light" style="background-color:#850606"><div class="ldb_relation_content scrollbar scrollbg-grey"><h5 class="ldb_nom_relation"></h5>
<span class="ldb_type_relation bold bg-light" style="color : #850606">Libre/Occupé en Normal</span>
[url=https://www.nano-roleplay.com/][b][size=16]Titre du RP[/size][/b][/url] // [i]Partenaire (Joueur)[/i]
Description du RP.
</div></div>
<div class="ldb_relation_item color-light" style="background-color:#850606"><div class="ldb_relation_content scrollbar scrollbg-grey"><h5 class="ldb_nom_relation"></h5>
<span class="ldb_type_relation bold bg-light" style="color : #850606">Libre/Occupé en Flashback</span>
[url=https://www.nano-roleplay.com/][b][size=16]Titre du RP[/size][/b][/url] // [i]Partenaire (Joueur)[/i]
Description du RP.
</div></div></div>
<div class="ldb_relations_title" style="background: linear-gradient(135deg, #850606 25%, #161614 25%);">RPs passes & futurs</div>
<div class="ldb_flex"><div class="ldb_rp_item scrollbar scrollbg-grey" style="width:65%"><div class="post-thead ldb_maj">Passé [size=10](ordre chronologique)[/size]</div>
<div class="ldb_rp_content  bg-light">
[url=https://www.nano-roleplay.com/][b][size=16]Titre du RP[/size][/b][/url] // [i]Partenaire (Joueur)[/i] // Date
Description du RP.

[url=https://www.nano-roleplay.com/][b][size=16]Titre du RP[/size][/b][/url] // [i]Partenaire (Joueur)[/i] // Date
Description du RP.

[url=https://www.nano-roleplay.com/][b][size=16]Titre du RP[/size][/b][/url] // [i]Partenaire (Joueur)[/i] // Date
Description du RP.
</div></div>
<div class="ldb_rp_item scrollbar scrollbg-grey" style="width:30%"><div class="post-thead ldb_maj">Futur</div>
<div class="ldb_rp_content">[b]Normal :[/b]
- idée
- idée
- idée

[b]Flashback :[/b]
- idée
- idée

</div></div></div>

<div class="ldb_relations_title" style="background: linear-gradient(135deg, #850606 55%, #161614 55%);">Relations & Connaissances</div>
<div class="ldb_flex"><div class="ldb_relation_item"><img src="https://raw.githubusercontent.com/Skalleface/images-hosting/master/NRP/V9/ldb_ex2.jpg" alt="relation 100*150"/><div class="ldb_relation_content scrollbar scrollbg-grey"><h5 class="ldb_nom_relation">Nom de la relation</h5>
<span class="ldb_type_relation bold" style="background-color : #850606">Type de lien</span>
Description du lien.</div></div></div></div>