Grâce au travail de Leslie Taman (mohnchild) qui a maqueté le projet et les talents de Blair Blackwell (garudynes) qui a codé le tout, nous vous proposons une fiche de lien en quatre parties qui est modifiable. Bien entendu, vous êtes libre d'utiliser votre propre fiche de lien, mais nous offrons celle-ci peut ceux qui le voudrait ! Nous vous invitons à prendre connaissance des posts suivant celui-ci avant de lire les explications. Ne soyez pas effrayé, nous vous avons inscrit en masjuscule lorsque du texte est à modifier. N'hésitez pas à venir nous voir sur le discord si vous avez des questions ou des pépins ! Petit ajout: obligatoire que le titre de votre sujet commence par votre pseudo (classement par ordre alphabétique)

explications partie 1

La couleur par défaut de la fiche est #bd8d48, mais vous pouvez la modifier en changeant la donnée après " --accent: ".

Vous pouvez recadrer des images dans les bons formats pour être certains de leur positionnement dans la fiche. Si vous mettez le lien d'une image, celle-ci sera redimentionnée, mais sa qualité pourrait être gâcher du même coup. Vous pouvez utiliser le site photopea afin de recadrer vos images. Pour l'en-tête, le format est de 560*170. Pour les icônes, le format est de 100*100.

Si vous voulez que votre texte ait la couleur d'accent, comme dans la citation «Je suis un clown, et toi?», vous devez inscrire

Code:

<span></span>

Le texte qui sera entre les deux balises sera de la couleur d'accent.

Si vous avez fait un moodboard, vous pouvez mettre le lien URL (de sa page pinterest par exemple) où il est inscrit URL MOODBOARD. Si vous avez une playlist associée à votre personnage, vous pouvez mettre le lien URL (de sa playlist spotify par exemple) où il est inscrit URL PLAYLIST.

Dans le cas où vous ne voulez pas utiliser cette fonction, il suffit d'effacer la partie de code suivante:

Code:

<a href="URL MOODBOARD">moodboard</a>

Code:

<a href="URL PLAYLIST">playlist</a>

explications partie 2

Si vous avez changer la couleur d'accent pour la partie 1, vous devez la recopier dans ce deuxième post en changeant la donnée après " --accent: ".

Si vous mettez le lien d'une image, celle-ci sera redimentionnée, mais sa qualité pourrait être gâcher du même coup. Si votre image est de forme carrée, vous aurez un meilleur résultat. Sinon, le format est de 134*134. Pour l'image dans le rond en haut, vous devez copier-coller votre lien URL à la place de URL-ICONE-EN-TÊTE. Pour l'image dans le rond en bas, copier-coller votre URL à la place de URL-ICONE-EN-BAS

Si vous voulez que votre texte est la couleur d'accent, comme dans la citation «Je suis un clown, et toi?», vous devez inscrire

Code:

<span></span>

Le texte qui sera entre les deux balises sera de la couleur d'accent.

Nous vous proposons deux façons de présenter vos liens.
La première est celle de Naseem Laham où vous pouvez mettre une côte au personnage avec un titre de relation puis un texte descriptif de la relation.

Code:

<div class="hard"><img src="URL IMAGE PERSONNE"/><h1>NOM DE LA PERSONNE</h1><h2>★★★★★ - TITRE DU LIEN</h2><div class="hard-bg"></div><div class="hard-bg-te">TEXTE DESCRIPTIF</div><i class="cp cp-book-o"></i></div>

La deuxième façon est celle de Althea Graves où il y a seulement une côte et un titre de relation.

Code:

<div class="lazy"><img src="URL IMAGE PERSONNE"/><h1>TITRE DE LA PERSONNE</h1><h2>★★☆☆☆ - titre du lien</h2><i class="cp cp-book-o"></i></div>

Choissisez la méthode que vous préférez et copier-coller dans la balise suivante:  < div class="rl-mid" > COPIER ICI < /div >.

En arrière-plan des relations, vous pouvez voir qu'il y a des constellations ou une forme de livre en arrière-plan. Ceci est personnalisable. Nous vous invitons à aller sur la page de cappuccicons (www). Il y a là une grande banque d'icônes que vous pouvez utiliser et personnaliser chaque relation. Il vous suffit de copier-coller le nom de l'icône (par exemple, acorn qui est la première sur le site), dans la balise < i class="cp cp-book-o ">, je vais remplacer la partie en bleue par le nom de l'icône que je veux. Dans notre exemple, cela donnerait < i class="cp cp-acorn">

explications partie 3

Si vous avez changer la couleur d'accent pour la partie 1, vous devez la recopier dans ce deuxième post en changeant la donnée après " --accent: ".

Si vous voulez que votre texte est la couleur d'accent, comme dans la citation «Je suis une span et toi t'es quoi?», vous devez inscrire

Code:

<span></span>

Si vous mettez le lien d'une image, celle-ci sera redimentionnée, mais sa qualité pourrait être gâcher du même coup. Si votre image est de forme carrée, vous aurez un meilleur résultat. Sinon, le format est de 134*134. Copier-coller l'URL de votre image dans URL ICONE

Vous avez 5 façons de présenter votre chronologie. Vous pouvez voir toutes les options sur l'exemple plus bas. Choissez celle que vous voulez (vous pouvez même prendre une version pour commencer et une autre ensuite, mélangez comme vous voulez!). Copier le code ci-bas correspondant et coller le dans la balise: < div class="chrono" > COPIER ICI< /div >

Avec l'année, le mois et une description du RP.

Code:

<div class="chrono-con"><div class="chrono-texte"><span>NOM DU RP</span><a href="URL DU RP">www</a><br>RÉSUMÉ DU RP</div><div class="date">ANNÉE<br><span>MOIS</span></div></div>

Avec l'année et une description du RP.

Code:

<div class="chrono-con"><div class="chrono-texte"><span>TITRE DU RP -</span><a href="URL DU RP">www</a><br>DESCRIPTION DU RP</div><div class="date">ANNÉE</div></div>

Avec le mois et une description du RP

Code:

<div class="chrono-con"><div class="chrono-texte"><span>TITRE DU RP -</span><a href="URL DU RP">www</a><br>DESCRIPTION DU RP</div><div class="date"><span>MOIS</span></div></div>

Sans date et avec une description du RP

Code:

<div class="chrono-con"><div class="chrono-texte"><span>TITRE DU RP - </span><a href="URL DU RP">www</a><br>DESCRIPTION DU RP</div></div>

Avec l'année et le mois, sans description.

Code:

<div class="chrono-con"><div class="chrono-texte"><span>TITRE DU RP - </span><a href="URL DU RP">www</a></div><div class="date">ANNÉE<br><span>MOIS</span></div></div>

Avec l'année, sans description

Code:

<div class="chrono-con"><div class="chrono-texte"><span>TITRE DU RP - </span><a href="URL DU RP">www</a></div><div class="date">ANNÉE</div></div>

Avec le mois, sans description.

Code:

<div class="chrono-con"><div class="chrono-texte"><span>TITRE DU RP - </span><a href="URL DU RP">www</a></div><div class="date"><span>MOIS</span></div></div>

code partie 1

Code:

<link href="https://dl.dropboxusercontent.com/s/mwgl3hcm7pi6q3h/lnrs.css" rel="stylesheet" type="text/css">
<link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"/> <style type="text/css"> :root{--accent: #bd8d48;} .rs-header{background-image:url('--URL-IMAGE-EN-TÊTE 560*170--');</style><div class="rs-header"><div class="rs-header-con"></div><div class="rs-header-con-t"><h1>PRÉNOM + NOM</h1>
<h2>CITATION</h2></div><div class="rs-header-info"><span class="titre">age</span><span>RÉPONSE</span><span class="titre">orientation</span><span>RÉPONSE</span><span class="titre">genre</span><span>RÉPONSE</span><span class="titre">statut civil</span><span>RÉPONSE</span><span class="titre">occupation</span><span>RÉPONSE</span> </div></div><div class="rs-mid"><div class="rs-mid-ico"><img src="URL ICONE DU HAUT"/><img src="URL ICONE DU BAS" style="margin-top: -0px;"/></div><h1>resumé du personnage</h1><div class="rs-mid-con"><div class="rs-mid-text">TEXTE</div></div><div class="rs-mid-bou"><a href="URL MOODBOARD">moodboard</a><a href="URL PLAYLIST">playlist</a></div></div><div class="rs-footer"><h1>sommaire</h1><a href="https://lux-novae.forumactif.com/t79-modele-de-fiche-de-liens#159">relations.01</a><a href="https://lux-novae.forumactif.com/t79-modele-de-fiche-de-liens#160">chronologie.02</a></div>

code partie 2

Code:

<link href="https://dl.dropboxusercontent.com/s/mwgl3hcm7pi6q3h/lnrs.css" rel="stylesheet" type="text/css">
<link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"/> <style type="text/css"> :root{--accent: #bd8d48;}</style><div class="rl-head"><div class="rl-head-ic"><img src="URL-ICONE-EN-TÊTE"/></div><h1>relations</h1><h2>citation</h2></div><div class="rl-sec"><h1>TITRE</h1><h2>SOUS-TITRE</h2></div><div class="rl-mid"></div><div class="rl-sec" style="margin-top: -17px;"><h1>TITRE</h1><h2>SOUS-TITRE</h2></div><div class="rl-footer"><div class="rl-footer-ic"><img src="URL-ICONE-EN-BAS"/></div><div class="rl-box"><div class="rl-box-te"><h1>01.idée de lien</h1> description du lien <h1>02. 2e idée de lien</h1>description du lien</div></div></div>

code partie 3

Code:

<link href="https://dl.dropboxusercontent.com/s/mwgl3hcm7pi6q3h/lnrs.css" rel="stylesheet" type="text/css">
<link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"/> <style type="text/css"> :root{--accent: #bd8d48;};</style><div class="chrono-head"><div class="chrono-head-ic"><img src="URL ICONE"/></div><h1>chronologie</h1><h2>CITATION</h2></div><div class="chrono-mid"><div class="chrono-sec"><h1>TITRE</h1><h2>SOUST-TITRE</h2></div><div class="chrono"></div></div>