Modèle de présentation

PNJ Messages : 631

Fiche de présentation

Maintenant que vous avez attentivement (tousse) lu toutes les annexes vous êtes prêts pour remplir la fiche de présentation. Un modèle vous est donné dans le message suivant, vous n'avez qu'à le remplir.

! Ne postez pas de fiches vides. On sait à quoi ressemble notre modèle, merci. !
(donc remplissez au moins l'avatar, tous les champs de la fiche id + alice, la partie "derrière l'écran" et mettez quelques tirets dans la partie "about"...)

Vous trouverez à la fin de ce sujet un message explicatif pour ceux qui ne s'en sortiraient pas avec le code et ne comprendraient pas comment le remplir.

Création de son propre code

Vous pouvez, si vous le désirez, créer votre propre fiche de présentation. Cependant pour des raisons pratiques certaines règles devront être respectées.

Toutes les informations demandées dans le modèle doivent être clairement indiquées et reprises de préférence dans le même ordre.

Si vous utilisez des overflow veillez à ce que le texte soit lisible peu importe le type de scrollbar (que le fait de scroll ne nous fasse pas sauter une ligne). Souvent, le problème vient du fait que la div avec laquelle est associée l'overflow est trop étroite.

Le bulletin scolaire doit être repris sous forme de barres de progression.

Vérifiez que votre code ne déforme/ne modifie pas des éléments de la page.

Pas de modification de curseur.

Si vous modifiez l'apparence de la scrollbar, elle ne doit être modifiée que sur votre code, pas sur la page entière.

Veillez à ce que tout soit lisible.

Nous ne validerons aucune fiche qui ne respecte pas ces règles.

Informations supplémentaires

Classe : Référez-vous au sujet du règlement concernant la vie à l'académie. ! Il ne s'agit pas de votre groupe. !

Alice et Description : Soyez simples et concis. La description d'un alice doit tenir sur une ligne. N'ajoutez aucune contraintes, limites, durée, conditions, ceci dépendra du potentiel de votre personnage, pas du potentiel de l'alice. N'oubliez pas de vérifier la disponibilité de votre alice dans la liste.

Groupe : Si vous ne savez pas, laissez le champ vide. Vous ne choisissez pas la classe dangereuse, ce sera au regard du staff à la validation.

Forme de l'alice : Référez-vous au sujet concernant les alices.

Maîtrise de l'Alice : Restez cohérents, certains alices sont plus difficiles à maîtriser que d'autres, certains l'utilisent consciemment depuis plus longtemps que d'autres, etc. Respectez votre personnage, vous n'attirerez aucune gloire à être invincible.

Discipline : Réunit le respect des règles et de l'autorité (et donc des professeurs), l'assiduité et le sens du devoir.

Détermination : [21:34:17] Arielle Taylor-Lambert : détermination c quoi [21:35:41] @ Elyas S. Crawley : détermination c'est flemme ou pas flemme [21:36:55] @ Elyas S. Crawley : est-ce que t'es naruto ton nindo c'est de jamais abandonner [21:38:44] Morphée D. Blackson : sur une echelle d'Arielle à Elyas, vous êtes plutôt ....

Résultats scolaires : Encore une fois soyez cohérents, il est rare (voire impossible) d'avoir 10. Imaginez ça comme votre moyenne sur 20 mais divisée par 2.

Implication dans la vie de l'Académie : Définissez si votre personnage est volontaire et ouvert, si il se donne pour sa classe, prend des initiatives, ...

About : La partie caractère juste à gauche sert à accueillir votre plume, la partie à droite sert uniquement pour des adjectifs et/ou une liste d'anecdotes, rumeurs, détails intéressants (ou non).

Histoire : Nous ne tenons pas particulièrement à lire 45 pages Word de la douce enfance de vos parents. Ceci étant dit, il n'y a malgré tout aucune limite de mots ni dans un sens ni dans l'autre (ayez pitié). Vous pouvez faire une liste ou un récit, ou les deux. Veillez à bien préciser la manière dont il a été recruté et emmené à l'académie.

PNJ Messages : 631

Nom du personnage

Prénom ici
Nom ici
Âge ici
Origine ici
Classe ici
Orientation sexuelle ici

Âge d'entrée à l'Académie ici
Opinion sur l'Académie ici

Alice Nom explicite et en français
Description Courte et concise, doit tenir sur une ligne. Les détails en spoiler.
Groupe ici
Forme de l'alice ici

Nom de l'avatar
Source

Bulletin scolaire

Maîtrise de l'Alice
8/10

Discipline
7/10

Détermination
2/10

Résultats scolaires
4/10

Implication dans la vie de l'Académie
6/10

Total breakdown

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra iaculis semper. Nullam dapibus ultricies justo vel vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie libero quis euismod aliquam. Sed bibendum porta vestibulum. Aenean luctus tortor rutrum mattis placerat. Nam ullamcorper rutrum quam eu commodo. Vestibulum nisl mauris, posuere et feugiat a, aliquam vitae felis.

Duis suscipit dui justo, sit amet porta turpis semper ut. Aliquam erat volutpat. Suspendisse ac mattis metus, a semper orci. Morbi vitae ipsum arcu. Ut euismod eu est quis aliquet. Fusce eget dui purus. Quisque a ante augue. Nam ut tellus felis. Nulla venenatis libero mi, vitae tincidunt ex sagittis sed. In lacus tellus, accumsan a neque id, molestie tempus nisi. Vivamus imperdiet eros tellus, nec suscipit augue vulputate ac.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra iaculis semper. Nullam dapibus ultricies justo vel vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie libero quis euismod aliquam. Sed bibendum porta vestibulum. Aenean luctus tortor rutrum mattis placerat. Nam ullamcorper rutrum quam eu commodo. Vestibulum nisl mauris, posuere et feugiat a, aliquam vitae felis.

Duis suscipit dui justo, sit amet porta turpis semper ut. Aliquam erat volutpat. Suspendisse ac mattis metus, a semper orci. Morbi vitae ipsum arcu. Ut euismod eu est quis aliquet. Fusce eget dui purus. Quisque a ante augue. Nam ut tellus felis. Nulla venenatis libero mi, vitae tincidunt ex sagittis sed. In lacus tellus, accumsan a neque id, molestie tempus nisi. Vivamus imperdiet eros tellus, nec suscipit augue vulputate ac

About

liste d'adjectifs, anecdotes, chaussettes roses ou chaussettes jaunes, coton-tiges ou poisson

La vie est un long fleuve tranquille

Duis suscipit dui justo, sit amet porta turpis semper ut. Aliquam erat volutpat. Suspendisse ac mattis metus, a semper orci. Morbi vitae ipsum arcu. Ut euismod eu est quis aliquet. Fusce eget dui purus. Quisque a ante augue. Nam ut tellus felis. Nulla venenatis libero mi, vitae tincidunt ex sagittis sed. In lacus tellus, accumsan a neque id, molestie tempus nisi. Vivamus imperdiet eros tellus, nec suscipit augue vulputate ac.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra iaculis semper. Nullam dapibus ultricies justo vel vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie libero quis euismod aliquam. Sed bibendum porta vestibulum. Aenean luctus tortor rutrum mattis placerat. Nam ullamcorper rutrum quam eu commodo. Vestibulum nisl mauris, posuere et feugiat a, aliquam vitae felis.

Duis suscipit dui justo, sit amet porta turpis semper ut. Aliquam erat volutpat. Suspendisse ac mattis metus, a semper orci. Morbi vitae ipsum arcu. Ut euismod eu est quis aliquet. Fusce eget dui purus. Quisque a ante augue. Nam ut tellus felis. Nulla venenatis libero mi, vitae tincidunt ex sagittis sed. In lacus tellus, accumsan a neque id, molestie tempus nisi. Vivamus imperdiet eros tellus, nec suscipit augue vulputate acDuis suscipit dui justo, sit amet porta turpis semper ut. Aliquam erat volutpat. Suspendisse ac mattis metus, a semper orci. Morbi vitae ipsum arcu. Ut euismod eu est quis aliquet. Fusce eget dui purus. Quisque a ante augue. Nam ut tellus felis. Nulla venenatis libero mi, vitae tincidunt ex sagittis sed. In lacus tellus, accumsan a neque id, molestie tempus nisi. Vivamus imperdiet eros tellus, nec suscipit augue vulputate ac.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra iaculis semper. Nullam dapibus ultricies justo vel vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie libero quis euismod aliquam. Sed bibendum porta vestibulum. Aenean luctus tortor rutrum mattis placerat. Nam ullamcorper rutrum quam eu commodo. Vestibulum nisl mauris, posuere et feugiat a, aliquam vitae felis.

Duis suscipit dui justo, sit amet porta turpis semper ut. Aliquam erat volutpat. Suspendisse ac mattis metus, a semper orci. Morbi vitae ipsum arcu. Ut euismod eu est quis aliquet. Fusce eget dui purus. Quisque a ante augue. Nam ut tellus felis. Nulla venenatis libero mi, vitae tincidunt ex sagittis sed. In lacus tellus, accumsan a neque id, molestie tempus nisi. Vivamus imperdiet eros tellus, nec suscipit augue vulputate ac

Derrière l'écran

Bonjour je m'appelle Charlinettedu35 j'aime les cornettos
Les chats c trop mignon >w<""""""

Code:: <center><table width="500px" cellspacing="0" cellpadding="0"><tr><td colspan="2"><div class="pz-head"><div class="pz-headcadre">Nom du personnage</div></div></td></tr><tr><td><div class="pz-blocinfos"><div class="pz-infoverflow"><b>Prénom</b> ici
<b>Nom</b> ici
<b>Âge</b> ici
<b>Origine</b> ici
<b>Classe</b> ici
<b>Orientation sexuelle</b> ici

<b>Âge d'entrée à l'Académie</b> ici
<b>Opinion sur l'Académie</b> ici</div>
<div class="pz-aliceverflow"><b>Alice</b> Nom explicite et en français
<b>Description</b> Courte et concise, doit tenir sur une ligne. Les détails en spoiler.
<b>Groupe</b> ici
<b>Forme de l'alice</b> ici</div></div></td><td width="200px"><img src="URL_AVATAR" class="pz-avatar"/><div class="pz-feat"><div class="pz-featcadre"><b>Nom de l'avatar</b><br />Source</div></div></td></tr><tr><td colspan="2"><div class="pz-bulletin"><div class="pz-butitre">Bulletin scolaire</div>
<table width="480px"><tr><td><img src="URL_ICON1" class="pz-icon"/></td><td><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><b>Maîtrise de l'Alice</b></td></tr><tr width="350px"><td class="pz-a" width="80%" valign="bottom" align="right">8/10</td><td class="pz-barre"></td></tr></table><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><br /><b>Discipline</b></td></tr><tr width="350px"><td class="pz-a" width="70%" valign="bottom" align="right">7/10</td><td class="pz-barre"></td></tr></table><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><br /><b>Détermination</b></td></tr><tr width="350px"><td class="pz-a" width="20%" valign="bottom" align="right">2/10</td><td class="pz-barre"></td></tr></table><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><br /><b>Résultats scolaires</b></td></tr><tr width="350px"><td class="pz-a" width="40%" valign="bottom" align="right">4/10</td><td class="pz-barre"></td></tr></table><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><br /><b>Implication dans la vie de l'Académie</b></td></tr><tr width="350px"><td class="pz-a" width="60%" valign="bottom" align="right">6/10</td><td class="pz-barre"></td></tr></table></td></tr></table><br /><br /></td></tr><tr><td colspan="2"><div class="pz-head"><div class="pz-headcadre" style="font-size:13px; padding:10px 0px 10px 0px;">Total breakdown</div></div><div class="pz-bloctexte"><table width="100%"><tr><td><div class="pz-blocmental">écrire le caractère ici</div></td><td width="160px" valign="top"><div class="pz-facts" style="height:250px;"><span class="pz-sstitre">About</span><div class="pz-factsvv">écrire les adjectifs, les anecdotes, etc. ici</div></div></td></tr></table></div><div class="pz-head"><div class="pz-headcadre" style="font-size:13px; padding:10px 0px 10px 0px;">La vie est un long fleuve tranquille</div></div><div class="pz-bloctexte"><div class="pz-blocmental">écrire l'histoire ici</div></div></td></tr><tr><td colspan="2"><div class="pz-bulletin" id="pz-player"><div class="pz-butitre">Derrière l'écran</div>
<img src="URL_ICON2" class="pz-iconi" align="left"/> écrire la partie "derrière l'écran" ici</div></td></tr></table></center>
<style>.pz-head{background-color: #d3c6fe; text-shadow: 1px 1px 0 #9e8ae0; color:#fff;} .pz-headcadre{border-color:#9e8ae0;}.pz-feat{background-color:#bbfde3; color:#7cdab6;} .pz-featcadre{border-color:#7cdab6;} .pz-a{background-color:#bbfde3; color:#7cdab6;}</style>

FICHE POUR LE PERSONNEL UNIQUEMENT :

Code:: <center><table width="500px" cellspacing="0" cellpadding="0"><tr><td colspan="2"><div class="pz-head"><div class="pz-headcadre">Nom du personnage</div></div></td></tr><tr><td><div class="pz-blocinfos"><div class="pz-infoverflow"><b>Prénom</b> ici
<b>Nom</b> ici
<b>Âge</b> ici
<b>Origine</b> ici
<b>Poste occupé</b> ici
<b>Depuis</b> x ans
<b>Orientation sexuelle</b> ici

<b>Âge d'entrée à l'Académie (enfant)</b> ici
<b>Opinion sur l'Académie</b> ici</div>
<div class="pz-aliceverflow"><b>Alice</b> Nom explicite et en français
<b>Description</b> Courte et concise, doit tenir sur une ligne. Les détails en spoiler.
<b>Groupe</b> ici
<b>Forme de l'alice</b> ici</div></div></td><td width="200px"><img src="URL_AVATAR" class="pz-avatar"/><div class="pz-feat"><div class="pz-featcadre"><b>Nom de l'avatar</b><br />Source</div></div></td></tr><tr><td colspan="2"><div class="pz-bulletin"><div class="pz-butitre">Bulletin scolaire</div>
<table width="480px"><tr><td><img src="URL_ICON1" class="pz-icon"/></td><td><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><b>Maîtrise de l'Alice</b></td></tr><tr width="350px"><td class="pz-a" width="80%" valign="bottom" align="right">8/10</td><td class="pz-barre"></td></tr></table><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><br /><b>Autorité</b></td></tr><tr width="350px"><td class="pz-a" width="70%" valign="bottom" align="right">7/10</td><td class="pz-barre"></td></tr></table><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><br /><b>Pédagogie</b></td></tr><tr width="350px"><td class="pz-a" width="20%" valign="bottom" align="right">2/10</td><td class="pz-barre"></td></tr></table><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><br /><b>Disponibilité</b></td></tr><tr width="350px"><td class="pz-a" width="40%" valign="bottom" align="right">4/10</td><td class="pz-barre"></td></tr></table><table cellspacing="0" cellpadding="0" width="280px"><tr><td colspan="2"><br /><b>Implication dans la vie de l'Académie</b></td></tr><tr width="350px"><td class="pz-a" width="60%" valign="bottom" align="right">6/10</td><td class="pz-barre"></td></tr></table></td></tr></table><br /><br /></td></tr><tr><td colspan="2"><div class="pz-head"><div class="pz-headcadre" style="font-size:13px; padding:10px 0px 10px 0px;">Total breakdown</div></div><div class="pz-bloctexte"><table width="100%"><tr><td><div class="pz-blocmental">écrire le caractère ici</div></td><td width="160px" valign="top"><div class="pz-facts" style="height:250px;"><span class="pz-sstitre">About</span><div class="pz-factsvv">écrire les adjectifs, les anecdotes, etc. ici</div></div></td></tr></table></div><div class="pz-head"><div class="pz-headcadre" style="font-size:13px; padding:10px 0px 10px 0px;">La vie est un long fleuve tranquille</div></div><div class="pz-bloctexte"><div class="pz-blocmental">écrire l'histoire ici</div></div></td></tr><tr><td colspan="2"><div class="pz-bulletin" id="pz-player"><div class="pz-butitre">Derrière l'écran</div>
<img src="URL_ICON2" class="pz-iconi" align="left"/> écrire la partie "derrière l'écran" ici</div></td></tr></table></center>
<style>.pz-head{background-color: #d3c6fe; text-shadow: 1px 1px 0 #9e8ae0; color:#fff;} .pz-headcadre{border-color:#9e8ae0;}.pz-feat{background-color:#bbfde3; color:#7cdab6;} .pz-featcadre{border-color:#7cdab6;} .pz-a{background-color:#bbfde3; color:#7cdab6;}</style>

PNJ Messages : 631

C'est quoi ça

Vous n'êtes pas très doués avec les codes ? Pas de panique on va vous aider ! N'hésitez pas à utiliser Ctrl+F pour rechercher un élément dans le code (plutôt que de le chercher manuellement avec vos petits yeux abîmés).

Installer les images

L'avatar est de 200px de largeur sur 320px de hauteur. Ce qu'il faut remplacer dans le code par l'adresse de votre image ressemble à ceci : (veillez à ne rien supprimer d'autre autour)

Code:: URL_AVATAR

L'icon à gauche du bulletin est un carré de 150px. Il sera redimensionné automatiquement si il est plus grand (ou plus petit mais ça le rendra flou). Ce qu'il faut remplacer dans le code par l'adresse de votre image ressemble à ceci :

Code:: URL_ICON1

L'icon de la partie "Derrière l'écran" est un carré de 70px. Pareil que l'icon du bulletin, sauf que ce qu'il faut remplacer ressemble à ceci :

Code:: URL_ICON2

Barres de progression du bulletin

C'est ici que ça se complique un peu mais rassurez-vous, rien de grave. Prenons que nous voulons ajuster la Maîtrise de l'Alice à 4/10. Trouvez dans le code où il est écrit "Maîtrise de l'Alice" et avancez dans le code jusqu'à tomber sur ceci (le nombre peut être différent, il faut juste que ce soit le premier sur lequel vous soyez tombé après le titre de ce que vous voulez changer) :

Code:: width="80%"

Puisque nous voulons "4/10" modifiez le nombre pour "40%". Avancez encore dans la ligne pour trouver le premier score sur lequel vous tombez et changez le pour 4/10. Ainsi ma ligne devrait ressembler à ça :

Code:: <tr><td colspan="2"><b>Maîtrise de l'Alice</b></td></tr><tr width="350px"><td class="pz-a" width="40%" valign="bottom" align="right">4/10</td><td class="pz-barre"></td></tr>

Pour mettre 0 à une des barres remplacez toute cette partie :

Code:: <td class="pz-a" width="40%" valign="bottom" align="right">4/10</td>

par ceci :

Code:: <td class="pz-a" width="10%" valign="bottom" align="right" style="color:black; background-color:white;">0/10</td>

Personnaliser les couleurs

A la fin du code se trouvent des balises de style qui vous permettront de bidouiller un peu les couleurs si vous le désirez. Pour de plus amples personnalisations vous devrez vous débrouiller (ou abandonner l'idée si vous n'êtes pas fortiches).

Code:: .pz-head{background-color:#f5676a; text-shadow:1px 1px 0px #c32f32; color:#ffffff;} .pz-headcadre{border-color:#ffffff;}

Modifie la couleur des en-têtes.

Code:: .pz-feat{background-color:#fcf382; color:#141414;} .pz-featcadre{border-color:#e1d216;}

Modifie la couleur du cadre sous l'avatar (avec le nom de l'avatar).

Code:: .pz-a{background-color:#67aaf5; color:#fff;}

Modifie la couleur (bleue) des barres de progression.

Mon code est tout cassé > : (

Envoyez un message privé à Elyas S. Crawley en expliquant votre problème.

» Modèle de Relationship
» Modèle de portable
» And I could cry "Power" || Présentation de Nina Feng Sheng