AccueilAccueil  SiteSite  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Codes pour fiche de relations: LIBRE-SERVICE

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar

Cassidi Natale [Othello]

Membre- pactisant
 Membre- pactisant


MESSAGES : 144
AGE : 27

MessageSujet: Codes pour fiche de relations: LIBRE-SERVICE   Mer 25 Mai - 10:20

Pour ceux qui ont la flemme de passer une éternité sur le code de leur fiche de relations,
Ou pour ceux qui peinent à coder ou sont rebutés par la tâche :


Voici, ci-dessous, des fiches de relations codées par mes soins, toutes prêtes, en libre-service. Elles sont donc à utiliser à volonté. J’ai fait en sorte de simplifier les codes au possibles, et de les laisser neutres autant que faire se pouvait, histoire de ne rien compliquer. Si vous les utilisez, vous pouvez donc en faire ce que vous voulez ; libre à vous de modifier le code, les couleurs, les polices, les tailles, etc, si cela vous chante. Ce serait même mieux, au vu de l’apparence actuellement très simplette des codes. J’ajoute que ceux-ci sont sans prétention.



Pour plus de précisions :
(Si seules les fiches en libre-service vous intéressent,
pas de souci, passez ce post.)

Je joins à ceci un petit tutoriel/index de vulgarisation des principales fonctions utilisées dans les codes ci-dessous, afin que ceux d’entre vous qui ne comprendraient pas un petit quelque chose puissent s’y retrouver :

• Déjà, un code, c’est pas bien compliqué. Ce ne sont jamais que des boîtes dans des boîtes dans des boîtes dans des boîtes. Ces boîtes sont représentées par des balises qui les délimitent. Parmi elles, on trouve les balises suivantes :
Code:
<div></div>, <span></span>, <legend></legend>, <p></p>, <fieldset></fieldset>, <table></table>, <td></td>, <tr></tr>, <img></img>, <blockquote></blockquote> …
Rien de bien sorcier. Si vous n’avez jamais vraiment pratiqué le codage, n’allez pas trop jouer avec, ou faites des tests si besoin. Retenez juste qu’une « boîte » est délimitée par deux balises ; une au début, une à la fin. Si vous en effacez une par erreur, ça risque de ne pas marcher, alors attention à tout ça. Si, en trafiquant votre fiche, vous tombez sur un bug, pensez à vérifier que vos balises de début et de fin sont bien couplées.

• Balises pour délimiter les boîboîtes = squelette de votre code, donc. Et entre les balises, votre texte – c'est-à-dire la chair autour du squelette. Les champs de texte à remplir sont nommés dans les codes en libre-service ; jusque-là, pas de problème, a priori. Donc, vous avez, pour un couple de balises div :
Code:
<div>Votre texte random.</div>

• Une fois que vous avez le squelette et la chair, reste à habiller tout ça. Pour cela, il faut ajouter certains attributs aux balises ; leur donner un style. Pour cela, il faut signaler dans votre balise de début de boîte que vous allez modifier le texte, les couleurs, le background, etc, de ce qui s’y trouvera. D’où, par exemple, pour un couple de balises div :
Code:
<div style="">Votre texte random.</div>

Reste maintenant à déterminer quel style vous voulez donner à votre boîte et tout ce qui s’y trouve. Voici les attributs de style utilisés dans les fiches ci-dessous, que vous devrez entrer entre les " et " :

font-family : Choix de la police. Entrez les noms de ces dernières, comme : Arial, Times New Roman, Georgia, Courier New

font-size : Taille de la police. Donnez une taille en pixels, ce sera plus simple. Exemple de valeurs : 12px, 18px, etc … Donc, chiffre+px.

color : Couleur de la police. Pour ça, vous avez le choix : la méthode RGB, le code hexadécimal, ou tout bêtement le nom de la couleur lui-même. On passera sur la méthode RGB, c’est chiant, c’est compliqué, pis on s’en sert pas sur les fora. Les noms des couleurs, vous en connaissez déjà pas mal, tels que red, darkred, olive, etc ; mais ce lien en liste beaucoup plus. (Très pratique si manque d’inspiration.) Concernant le code hexadécimal, il se présente sous la forme suivante : #FF6347. Vous pouvez obtenir les codes couleurs dans un champ sous les outils sur Photofiltre, dans la palette de couleurs sur Photoshop (idem pour Gimp), mais vous pouvez aussi télécharger le logiciel « La boîte à couleurs », très léger, très simple d’utilisation. Mais entre nous, si vous avez la flemme, les noms de couleurs devraient suffire.

text-align : Choix d’ajustement du texte. C’est comme sur Word : center pour le centrer, right pour l’axer sur la droite, left pour la gauche, et justify pour le justifier. Je crois avoir choisi justify pour la plupart des champs de texte un peu longs dans les codes ci-dessous, c’est toujours plus agréable à lire.

line-height : Hauteur de ligne, littéralement. Ou plutôt, ça parle de la hauteur de l’espace entre vos lignes de texte. Il me semble que sur le forum, par défaut, il est de 16 ou 17px. Mais vous pouvez toujours l’augmenter pour éloigner vos lignes les unes des autres, ou les rapprocher, au contraire (par exemple, dans les codes ci-dessous, je l’ai utilisé pour que les lignes ne semblent pas trop éloignées les unes des autres lorsque la police utilisée est petite). A tester.

letter-spacing : Relatif à l’espace entre les lettres. Par défaut, il est d’un pixel. Mais augmenter cet espace peut être agréable visuellement, par exemple dans un gros titre. Les valeurs sont à entrer sous la forme chiffre+px.

text-transform : Relatif aux transformations appliquées au texte. Plusieurs possibilités de valeurs à entrer :
-uppercase : Tout en majuscules.
-lowercase : Tout en minuscules.
-capitalize : Pour faire en sorte que chaque première lettre soit une capitale).
PS : en utilisant text-variant avec la valeur small-caps, vous pouvez tout mettre en petites majuscules … Mais bon, en combinant text-transform avec la valeur uppercase et en jouant sur la taille du texte, vous aurez le même effet. C’était un détail.

padding : Padding, pas pudding. De l’anglais « to pad », qui signifie « rembourrer », « capitonner ». Qui dit rembourrage dit épaisseur. Le padding, c’est un peu ça ; c’est créer un champ libre autour d’un texte, d’une image, etc, eux-mêmes dans une boîte. Ainsi :

(Le cadre noir étant le contour de la boîte, la zone grisée étant le texte, par exemple.)
Voilà pour l’illustration. Pour ce qui est des valeurs à entrer derrière un padding, elles sont, comme la taille du texte, sous la forme chiffre+px. Exemple : 15px.
Petit plus : vous pouvez choisir, en précisant padding-mot, le côté à « rembourrer ». Ainsi, si, pour décaler un texte du bord gauche de votre boîte, vous indiquez padding-left: 15px, votre texte sera décalé uniquement de ce bord, et de 15 pixels.
A savoir : left & right pour gauche et droite, ça se passe de commentaires, et bottom et top pour, respectivement, bas et haut.

border : Traduit en français, « bordure ». Donc, pour créer une bordure, un cadre, autour de votre boîte. Les valeurs à entrer sont sous cette forme : chiffre+px attribut couleur, ce qui donne, par exemple, 2px solid lightgrey (pour un cadre qui aura une épaisseur de 2 pixels, sera un trait continu et gris pâle).
Pour plus de précisions, parce qu’on peut faire varier tout ça :
-chiffre+px : Sans commentaire.
-attribut : Au choix : solid, dotted (de l’anglais « dot », le « point » en français), dashed (de l’anglais « dash », qui, dans le contexte de la ponctuation, signifie « tiret »). Ce qui signifie que si vous choisissez dotted, vous aurez non pas le trait continu que vous auriez avec solid mais une suite de petits points rapprochés, et, avec dashed, une suite de tirets.
Petit plus : même chose que pour le padding. Si vous précisez -left, vous n’aurez votre bordure qu’à gauche, etc.

width : En français, « largeur ». Donc pour donner une dimension en termes de largeur à votre boîte. Forme des valeurs à entrer : encore et toujours en pixels, donc chiffre+px. (On peut aussi faire avec des pourcentages, mais c’est chiant et ça manque quand même de précision.)

height : En français, « hauteur ». Se référer à width, ça fonctionne pareil.

background : En français, « arrière-plan ». Donc pour définir l’arrière-plan de votre boîte – derrière votre texte, derrière votre image, ou tout simplement un champ libre … En résumé, vous avez deux options : mettre une couleur, ou une image :
-background-color : Reportez-vous à color, même fonctionnement. (On passera sur les subtilités des dégradés, c’est chiant aussi.)
-background-image : Là, il vous faut l’URL de l’image que vous souhaitez insérer, et que vous aurez donc uploadée au préalable. La forme des valeurs à entrer est : url(adresse_url.format).

overflow : C’est déjà plus compliqué à expliquer, donc on va faire simple : votre boîte censée contenir du texte, si vous lui avez défini des limites (par exemple 400pixels de largeur pour 100 de large), y’a bien un moment où, à force de remplir avec du texte, elle ne sera pas censée pouvoir le contenir. Ajouter overflow avec la valeur, derrière, auto, c’est donner à votre navigateur la possibilité de créer une barre de défilement dans votre petite boîte. Ainsi, tout le texte rentrera ; vous n’aurez qu’à faire défiler pour le lire. A noter qu’avec auto, il n’y a de barre de défilement qui apparaît que si votre texte est plus long que les valeurs définies pour la boîte.
PS : Je me suis faite avoir avec ça y’a pas longtemps, mais si vous mettez un overflow sans avoir défini de valeurs pour votre boîte, ça marchera pas. Ne pas oublier que l’overflow ne fonctionne pas tout seul, il a besoin de ses copains pour exécuter l’ordre donné.

-webkit-border-radius: 10px; et -moz-border-radius: 10px; : Ca, c’est important uniquement si vous avez créé une bordure autour d’une de vos boîtes. Par défaut, votre bordure est rectangulaire ; mais si vous ajoutez l’attribut actuellement étudié, ça vous permettra de l’arrondir. C’est grâce à ça que, sur UA, tout est arrondi, par exemple. En changeant la valeur en pixels (chiffre+px), vous pouvez créer des arrondis de rayon plus ou moins important – à vous de voir.
PS : Il est important de bien mettre les DEUX attributs ici cités. C’est pour que votre arrondi soit lu par tous les navigateurs. Webkit, par exemple, on le retrouve sous Google Chrome (entre autres) ; Moz, c’est avec Mozilla. Si vous ne précisez que pour Mozilla, on ne verra pas votre arrondi sous Google Chrome. Donc certes, ça fait du texte en plus dans votre code, mais c’est des histoires de relativité : on n’a pas tous le même navigateur.

• Pour insérer une image :
Code:
<img src="adresse_url.format"></img>

• Et je crois en avoir fini avec la vulgarisation des balises. Juste un rappel : connaître les attributs visant à modifier les boîtes, c’est bien, mais encore faut-il savoir comment les entrer. Exemple :
Code:
<div style="font-family: Georgia; color: red; background-color: black; width: 200px; height:20px;">Votre texte, blablabla.</div>
Ce qui donne :
Votre texte, blablabla.

Soit un texte en Georgia, écrit en rouge, sur un fond jaune, centré dans une boîte de 200 pixels de largeur pour 20 de hauteur. Mais vous avez aussi le droit de faire un truc joli, on vous en voudra pas.

La règle est simple : directement derrière style, vous mettez un =, et directement derrière le =, un premier guillemet : ". Ensuite, toujours sans espace, vous entrez le premier attribut (font-family, line-height, background-color …).
Encore sans espace, derrière l’attribut, deux points : :, derrière lequel, là, pour le coup, il y aura un espace. Après cet espace, entrez les valeurs de l’attribut : valeur, après laquelle, sans espace, placez un point-virgule ;.
Puis, deux possibilités :
-Si vous souhaitez ajouter un autre attribut, sachant que ceux-ci se cumulent à l’infini, faites un espace, puis recommencez : attribut: valeur;.
-Si vous en avez terminé avec vos attributs et leurs valeurs, placer un autre guillemet " pour signaler que c’est fini.

Attention : si vous oubliez le premier ou le second guillemet, ça ne marchera pas. Votre boîte ne sera même pas visible.

• En résumé, ce qu’il faut faire :
Code:
<div style="attribut: valeur; attribut: valeur; attribut: valeur;">Votre texte.</div>

• Encore un exemple concret :
Code:
<div style="border: 2px solid black; font-family: Arial; font-size: 12px; padding-left: 30px; width: 300px; height: 100px; overflow: auto;">Votre texte.</div>


Question de logique :


Si votre fiche de relation demande à être plus remplie que les champs figurant dans les fiches en libre-service, copiez-collez les champs comprenant avatar+nom&prénom+texte. Faites en sorte que ça ressemble à ce qui a déjà été fait, observez ; c’est tout. Et veillez juste à copier-coller au bon endroit, à ne pas bousiller une balise. C’est vite arrivé, on s’en rend tout de suite compte mais on ne sait pas forcément où traîne l’erreur, et c’est dommage.



En cas de problème :


N’hésitez pas à poster vos questions à la suite du sujet. Mais avant de la poser, soyez tout de même sûr de bien avoir tout fait comme il fallait … et d’avoir suivi le peu de règles qu’il convient de respecter lorsque l’on code. Parce que tout ce qu’il y a au-dessus, ce n’est vraiment pas compliqué : heart : Ce ne sont jamais que des petites règles simples à suivre et à appliquer, le B-A-BA du code, et ça suffit amplement lorsqu’il s’agit de bidouiller une fiche de relations …

Il y a des subtilités que je n’ai pas listées car elles nécessitent de pratiquer pas mal de son côté – en gros, on part à leur recherche quand on en a besoin –, et des milliers d’autres dont je ne sais rien. Pour ça, faut avoir sérieusement bourlingué de son côté dans le codage, et ce n’est pas mon cas. Tout ça pour dire qu’il n’y a rien de compliqué dans ce topic, juste de la rigueur à avoir.

_________________________________________________



Dernière édition par Cassidi Natale [Othello] le Mer 25 Mai - 10:29, édité 2 fois
Revenir en haut Aller en bas
http://n-a-y-a.deviantart.com/
avatar

Cassidi Natale [Othello]

Membre- pactisant
 Membre- pactisant


MESSAGES : 144
AGE : 27

MessageSujet: Re: Codes pour fiche de relations: LIBRE-SERVICE   Mer 25 Mai - 10:21

Fiche N°1:






Nom & Prénom


Présentez ici votre personnage.
Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.



amicaux ;
Description générale des personnages concernés par cette catégorie.
Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.




ennemis ;
Description générale des personnages concernés par cette catégorie.
Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.




louches ;
Description générale des personnages concernés par cette catégorie.
Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.



Code:
<div align="center"><fieldset style="width: 515px; background-color: white;  border: 2px #E4DEE1 solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding-top: 20px; padding-bottom: 20px; padding-left: 15px; padding-right: 20px;"><table><td width="110px; height=100px; overflow:auto;"><div align=center>[img]http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png[/img]

[img]http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png[/img]

[img]http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png[/img]</div></td><td><div style="text-align: justify; font-family: Georgia; color: #5E4647; font-size: 12.5px;  line-height: 16px;"><p class="titre2">Nom & Prénom</p>
[i]Présentez ici votre personnage.[/i]
Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
</div></td></table></div></div>


<div align="center"><fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; width: 515px; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px;">amicaux ;</span></legend> [center]Description générale des personnages concernés par cette catégorie.[/center]
<table><td><img style="border:1px dotted #E4DEE1;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td width="403px" height="100px";><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg);">[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; width: 403px; height: 84px; overflow:auto; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647;">Texte de présentation de la relation.</td></table>
<table><td><img style="border:1px dotted #E4DEE1;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td width="403px" height="100px";><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg);">[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; width: 403px; height: 84px; overflow:auto; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647;">Texte de présentation de la relation.</td></table>
<table><td><img style="border:1px dotted #E4DEE1;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td width="403px" height="100px";><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg);">[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; width: 403px; height: 84px; overflow:auto; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647;">Texte de présentation de la relation.</td></table></div>
</fieldset></div>


<div align="center"><fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; width: 515px; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px;">ennemis ;</span></legend> [center]Description générale des personnages concernés par cette catégorie.[/center]
<table><td><img style="border:1px dotted #E4DEE1;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td width="403px" height="100px";><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg);">[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; width: 403px; height: 84px; overflow:auto; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647;">Texte de présentation de la relation.</td></table>
<table><td><img style="border:1px dotted #E4DEE1;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td width="403px" height="100px";><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg);">[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; width: 403px; height: 84px; overflow:auto; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647;">Texte de présentation de la relation.</td></table>
<table><td><img style="border:1px dotted #E4DEE1;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td width="403px" height="100px";><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg);">[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; width: 403px; height: 84px; overflow:auto; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647;">Texte de présentation de la relation.</td></table></div>
</fieldset></div>


<div align="center"><fieldset style="background-color: white; font-family: Georgia; color: #5E4647; font-size: 12.5px; border: 2px #E4DEE1 solid; width: 515px; padding: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px;"><legend><span style="font-family: Century Gothic; font-size: 18px; color: white; letter-spacing: 3px; background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg); width: auto; padding-right: 5px; padding-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px;">louches ;</span></legend> [center]Description générale des personnages concernés par cette catégorie.[/center]
<table><td><img style="border:1px dotted #E4DEE1;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td width="403px" height="100px";><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg);">[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; width: 403px; height: 84px; overflow:auto; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647;">Texte de présentation de la relation.</td></table>
<table><td><img style="border:1px dotted #E4DEE1;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td width="403px" height="100px";><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg);">[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; width: 403px; height: 84px; overflow:auto; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647;">Texte de présentation de la relation.</td></table>
<table><td><img style="border:1px dotted #E4DEE1;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td width="403px" height="100px";><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg);">[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; width: 403px; height: 84px; overflow:auto; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647;">Texte de présentation de la relation.</td></table></div>
</fieldset></div>

_________________________________________________

Revenir en haut Aller en bas
http://n-a-y-a.deviantart.com/
avatar

Cassidi Natale [Othello]

Membre- pactisant
 Membre- pactisant


MESSAGES : 144
AGE : 27

MessageSujet: Re: Codes pour fiche de relations: LIBRE-SERVICE   Mer 25 Mai - 10:21

Fiche N°2:


Nom & Prénom

Présentez ici votre personnage, mettez un avatar à gauche.

Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.

Amicaux


Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.


Ennemis


Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.


Louches


Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.
Nom & Prénom
Texte de présentation de la relation.

Code:
<blockquote><div style="font-family: Georgia; font-size: 18px; letter-spacing: 3px; color: indianred; text-align: left;" width="150px;">[right]Nom & Prénom[/right]</div>
<table><td><div align=center>[img]http://img10.hostingpics.net/pics/847034luna_2_copie.png[/img]</div></td><td><div style="text-align: justify; font-family: Georgia; color: #5E4647; font-size: 12.5px;  line-height: 16px;">[i]Présentez ici votre personnage, mettez un avatar à gauche.[/i]

Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.</td></table></div></blockquote>

<div style="font-family: Georgia; font-size: 18px; letter-spacing: 10px; color: indianred; border-bottom: 1px dotted lightgrey; text-align: center; text-transform: uppercase;">Amicaux</div><table align="center" style="border: 10px solid #EEEEEE; -webkit-border-radius: 10px; -moz-border-radius: 10px; width: 400px; font-size: 12.5px;"><tr><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 300px; height: 100px;"><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg)";>[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 82px; overflow: auto;">Texte de présentation de la relation.</td></tr>
<tr><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 300px; height: 100px;"><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg)";>[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 82px; overflow: auto;">Texte de présentation de la relation.</td></tr>
<tr><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 300px; height: 100px;"><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg)";>[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 82px; overflow: auto;">Texte de présentation de la relation.</td></tr></table>


<div style="font-family: Georgia; font-size: 18px; letter-spacing: 10px; color: indianred; border-bottom: 1px dotted lightgrey; text-align: center; text-transform: uppercase;">Ennemis</div><table align="center" style="border: 10px solid #EEEEEE; -webkit-border-radius: 10px; -moz-border-radius: 10px; width: 400px; font-size: 12.5px;"><tr><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 300px; height: 100px;"><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg)";>[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 82px; overflow: auto;">Texte de présentation de la relation.</td></tr>
<tr><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 300px; height: 100px;"><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg)";>[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 82px; overflow: auto;">Texte de présentation de la relation.</td></tr>
<tr><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 300px; height: 100px;"><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg)";>[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 82px; overflow: auto;">Texte de présentation de la relation.</td></tr></table>


<div style="font-family: Georgia; font-size: 18px; letter-spacing: 10px; color: indianred; border-bottom: 1px dotted lightgrey; text-align: center; text-transform: uppercase;">Louches</div><table align="center" style="border: 10px solid #EEEEEE; -webkit-border-radius: 10px; -moz-border-radius: 10px; width: 400px; font-size: 12.5px;"><tr><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 300px; height: 100px;"><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg)";>[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 82px; overflow: auto;">Texte de présentation de la relation.</td></tr>
<tr><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 300px; height: 100px;"><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg)";>[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 82px; overflow: auto;">Texte de présentation de la relation.</td></tr>
<tr><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 300px; height: 100px;"><div style ="background-image: url(http://img4.hostingpics.net/pics/254052patterncat.jpg)";>[font=century gothic][color=white][center]Nom & Prénom[/center][/color][/font]</div><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 82px; overflow: auto;">Texte de présentation de la relation.</td></tr></table>

_________________________________________________

Revenir en haut Aller en bas
http://n-a-y-a.deviantart.com/
avatar

Cassidi Natale [Othello]

Membre- pactisant
 Membre- pactisant


MESSAGES : 144
AGE : 27

MessageSujet: Re: Codes pour fiche de relations: LIBRE-SERVICE   Mer 25 Mai - 10:22

Fiche N°3:

Nom & Prénom de votre personnage

Présentez ici votre personnage, mettez des icônes au-dessus.

Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.


Nom & Prénom
Texte de présentation de la relation.


Nom & Prénom
Texte de présentation de la relation.


Nom & Prénom
Texte de présentation de la relation.


Code:
[center]<div style="font-family: Georgia; font-size: 24px; color: indianred;">Nom & Prénom de votre personnage</div>
<table align="center"><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td></table>[/center]<blockquote><blockquote style="font-family: Georgia; font-size: 12.5px; border-bottom: 1px dotted lightgrey; text-align: justify">[i]Présentez ici votre personnage, mettez des icônes au-dessus.[/i]

Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

Eo adducta re per Isauriam, rege Persarum bellis finitimis inligato repellenteque a conlimitiis suis ferocissimas gentes, quae mente quadam versabili hostiliter eum saepe incessunt et in nos arma moventem aliquotiens iuvant, Nohodares quidam nomine e numero optimatum, incursare Mesopotamiam quotiens copia dederit ordinatus, explorabat nostra sollicite, si repperisset usquam locum vi subita perrupturus.</blockquote></blockquote>


<fieldset style="border: 0px;"><legend><span style="padding-left: 30px; font-family: Georgia; font-size: 18px; color: indianred;">Nom & Prénom</span></legend><table><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 500px; height: 100px;"><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 85px; overflow: auto;">Texte de présentation de la relation.</td></table></fieldset>

<fieldset style="border: 0px;"><legend><span style="padding-left: 30px; font-family: Georgia; font-size: 18px; color: indianred;">Nom & Prénom</span></legend><table><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 500px; height: 100px;"><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 85px; overflow: auto;">Texte de présentation de la relation.</td></table></fieldset>

<fieldset style="border: 0px;"><legend><span style="padding-left: 30px; font-family: Georgia; font-size: 18px; color: indianred;">Nom & Prénom</span></legend><table><td><img style="border:1px solid white;" src="http://s3.noelshack.com/old/up/disc_0604-4e91ff482.png"></td><td style="width: 500px; height: 100px;"><div style ="background-color: #ffffff; font-family: Georgia; font-size: 11px; line-height: 13px; color: #5E4647; height: 85px; overflow: auto;">Texte de présentation de la relation.</td></table></fieldset>

_________________________________________________

Revenir en haut Aller en bas
http://n-a-y-a.deviantart.com/

Contenu sponsorisé





MessageSujet: Re: Codes pour fiche de relations: LIBRE-SERVICE   

Revenir en haut Aller en bas
 

Codes pour fiche de relations: LIBRE-SERVICE

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ultima Alluvione :: 

Seconda storia.

 :: Votre personnage :: La vostra persona e gli altri.
-
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit