AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.



14 résultats trouvés pour codage_rp

IceCreamMaster

Fiche de RP beige simple - Dim 12 Fév 2017 - 0:00



Fiche de RP beige



C'est ma toute première fiche :3

Le code est en hide. Aperçu :3

Littleelda

Contenue rp style cerisier - Ven 3 Fév 2017 - 21:35



Fiche de RP cerisier



Bonjour,
voici mon premier libre service, j'espère qu'il vous plaira.

Deux trois choses à savoir avant :

- la taille (balise "width") est en pourcentage afin de s'adapter sur normalement tout les forums et je l'ai fixé à 80% mais vous pouvez la diminuer ou la mettre à 100% si vous préférez (pensez à changer celle de la zone de texte aussi).
- Pour l'image des cerisiers j'ai mis une image de 700 px de large afin qu'elle convienne au plus de forums possible. Vous pouvez la retoucher si nécessaire.

Voilà, j'espère qu'elle sera simple et facile d'accès. =)

Aperçu photo:




Aperçu tel quel:







Titre de votre rp


Feat. Pseudos des participants




Et confisus cum clientes miser sis aetatem dederis amicitiam esses summittendo ut postridie si miser nec esses esses ubi ut cum si ut unde venias ubi tandem vel ambigente hesterno cum paria stipite tot te haerebis tot numerando te ambigente tot et ad confisus incognitus eadem interrogatus per nec salutandi diutius adsiduitati illo stipite confisus indiscretus tot tempus summittendo si ubi adscitus incognitus vero amicitiam dederis repentinus interrogatus vero adscitus ut adfabilitate haerebis in reverteris discesseris ambigente ubi haerebis et dederis in paria salutandi quo interrogatus tandem discesseris sis quo tot clientes incognitus agnitus haerebis conteres triennio vero dierum tandem.Et confisus cum clientes miser sis aetatem dederis amicitiam esses summittendo ut postridie si miser nec esses esses ubi ut cum si ut unde venias ubi tandem vel ambigente hesterno cum paria stipite tot te haerebis tot numerando te ambigente tot et ad confisus incognitus eadem interrogatus per nec salutandi diutius adsiduitati illo stipite confisus indiscretus tot tempus summittendo si ubi adscitus incognitus vero amicitiam dederis repentinus interrogatus vero adscitus ut adfabilitate haerebis in reverteris discesseris ambigente ubi haerebis et dederis in paria salutandi quo interrogatus tandem discesseris sis quo tot clientes incognitus agnitus haerebis conteres triennio vero dierum tandem.



©Codage by Littleelda from Never Utopia






Edit : merci pour l'ajout de balise et pour le coup de main, j'ai eu un trou. je viens de le mettre à jour, j'espère que ça plaira =)

Lazulijune

Fiche de réponse rp rouge et rose - Sam 10 Déc 2016 - 18:51



Bonsoir ! Je poste encore un codage en libre-service ici. Je suis ouverte à toute question/critique ! En espérant que cela vous plaira. :yay:



« Titre du rp »
Avec nom des participants

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



Code:
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Satisfy" rel="stylesheet" /> <div style="width:500px; margin:auto; border-right: 6px solid #D04545; border-left: 1px solid #D04545; border-top: 1px solid #D04545; border-bottom: 1px solid #D04545; background-color:#F39999"><img src="http://zupimages.net/up/16/49/6plf.gif" style="width: 500px; border-bottom: 2px solid #D04545;" /><br />
<div style="font-family: Satisfy; font-size: 35px; color: #A60000; text-align: center;">« Titre du rp »</div><div style="width:auto; margin: auto; margin-top:0px; font-family: Yanone Kaffeesatz; font-size:13px; color: #DB1C1C; text-align:center;">Avec nom des participants</div>
<div style="width:470px; height:400px; overflow:auto; background-color: #FEBDBD; margin:auto; border-left: 2px dashed #D04545; border-right: 2px dashed #D04545; padding: 3px; color: darkred; font-size:12px; text-align: justify;">Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
<div style="font-size:9px; font-style: italic; text-align: right; padding: 5px"><a href="http://www.never-utopia.com/" style="color:black;">© Lazulijune</a></div></div>

Lazulijune

Fiche de réponse rp violette - Mar 6 Déc 2016 - 18:59



Bonjour !
Je poste mon deuxième codage, qui est à nouveau une réponse de rp, cette fois-ci de couleur violette. Évidemment, vous êtes libre de modifier les couleurs selon votre bon vouloir. L'important est que le crédit ne soit pas enlevé.




« Titre du rp »
Nom des participants

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



Code:
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Dosis" rel="stylesheet" />
<div style="width:500px; margin:auto; background-color: #D5C7DC; border: 2px solid #A485B3; border-bottom: 2px dashed #A485B3;">
<div style="margin-top: 5px; margin: auto; border: 3px double #8B6C9B; width:450px;"><img src="http://zupimages.net/up/16/49/bhgr.gif" style="width:450px;" /></div>
<div style="font-family:Dancing Script; font-size:40px; text-align: center; color:#7B329F; padding-top:5px; font-weight: bold;">« Titre du rp »</div><div style="font-family:Dosis; font-size: 11px; color: #9973AC; text-align: center;">Nom des participants</div>
<div style="width: 450px; height: 400px; overflow:auto; background-color: #DED4E3; margin: auto; border-left: 2px solid #AC92B9; border-right: 2px solid #AC92B9; padding: 3px; font-size: 12px;  text-align: justify; font-family:Dosis; color: black;">Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
<div style="font-size:9px; font-style: italic; text-align: right; padding: 5px"><a href="http://www.never-utopia.com/" style="color:black;">© Lazulijune</a></div></div>


En espérant que cela vous plaise :yay:

Edit : Étant donné que je ne peux pas répondre, je tiens quand même à remercier Shoki pour sa correction, ses conseils m'ont été très utile et je les ai appliqué à ce code.

Lazulijune

Fiche de réponse rp bleue-verte - Mar 6 Déc 2016 - 18:52



Bonjour à tous. Ceci est mon premier codage en libre-service ; c'est une réponse de rp aux couleurs bleues et vertes, qui n'est rien qu'en html. Les couleurs sont bien entendu modifiables !



Titre du rp
Nom des participants


Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



Code:
<link href="https://fonts.googleapis.com/css?family=Advent+Pro|Yesteryear" rel="stylesheet" />
<div style="width:500px; margin:auto; background-color:#C0D9D6; border-left: 2px solid #017162; border-right: 2px solid #017162;"><br /><div style="font-family:Yesteryear; font-size:35px; color:#017162; text-align:center;">Titre du rp</div><div style="font-family:Advent Pro; font-size: 12px; color:steelgrey; text-align: center; letter-spacing: 2px;">Nom des participants</div><div style="width:450px; margin: auto; border: 2px dashed #4B8E85;"></div>

<div style="width: 450px; height: 400px; margin: auto; padding: 5px; background-color: #A6C8C4; overflow:auto; font-size:12px; text-align: justify; color: black; border: 1px solid #4B8E85;">Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
<div style="text-align: right; font-size: 9px; color: black; font-style: italic; padding: 5px;"><a href="http://www.never-utopia.com/" style="color:black;">© Lazulijune</a>
</div></div>


Le crédit est bien entendu ineffaçable ! En espérant que cela vous plaise.

Edit : Encore une fois, j'ai appliqué les conseils de Shoki ! Et pour répondre à ceci :
@Shoki a écrit:Si tu le souhaites, tu peux les réunir en une seule. Dans ce cas, tu copie-colle les valeurs de la seconde balise (en gros, ce qu'il y a dans style=""), tu les met dans la première en veillant à transformer le border en border-bottom, et tu joue ensuite avec les marges intérieures (padding-bottom ici) pour éloigner ou rapprocher le trait o/

A vrai dire je savais déjà cela, et j'aurai sans doute pu le faire avant (ça ne m'avait pas trop traversé l'esprit sur le coup) mais je préfère le rendu tel qu'il est, la bordure ayant un effet meilleur avec le "border" qu'avec le "border-bottom". Merci de tes conseils en tout cas, c'est très gentil de ta part de pointer mes erreurs !

Message RP, fond bois noir, intérieur bleu pétillant - Dim 2 Oct 2016 - 17:36



Bonjour à tous !

Voici le tout premier codage que je poste ici, j'espère qu'il vous plaira Very Happy
J'avoue ne pas être une experte, je commence à peine le codage, aussi si vous rencontrez des bugs, je m'excuse d'avance x)
(La bordure rose pâle à l'extérieur ne fait pas partie du code, il s'agit juste d'un rognage de screenshot de flemmarde)
Pour le titre, évitez qu'il soit trop long, ou alors diminuez la taille de la police.

Aperçu:


Et maintenant le code !
Code:
<div style="margin: auto; padding:5px;background-image: url(https://i97.servimg.com/u/f97/19/54/37/44/fond_b10.jpg);width:500px;height:auto;border: 2px solid #000000;border-radius: 10px 10px 10px 10px;color:#73625c; font-family: 'Verdana'; font-size: 12px;">

<div style="margin: auto; padding:5px;background-image: url('https://i97.servimg.com/u/f97/19/54/37/44/2016-010.jpg');width:300px;height:auto;border: 2px solid #D6D6D6;border-radius: 10px 10px 10px 10px;">



<div style="font-family: 'Tangerine';font-size: 70px;color:#D6D6D6;text-shadow:1px 1px 3px #000000; text-align: center;">Titre du Rp</div>



<span style="text-align: justify;">Sed fruatur sane hoc solacio atque hanc insignem ignominiam, quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, cuius exemplo se consolatur, eius exitum expectet, praesertim cum in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac tamen hac una plaga conciderit, ignominia senatus.

   Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente.</span>

   </div>
</div>


Bises

Nymeria.

Fiche de RP ♦ Sand Snakes - Ven 16 Sep 2016 - 15:06



Coucou tout le monde :heart: je viens vous proposer une petite fiche assez simple, les couleurs se modifient facilement et les gifs s'adaptent directement à la bonne taille :siffle:



Le petite titre qui change tout
paroles de chansons, noms des participants...

votre rp, votre rp votre rp votre rp votre rp

« Dialogue dialogue »

Le retour du rp, encore et encore.

Nymeria. & Gif par Tumblr


Spoiler:
Code:
<div style="width: 520px; margin: auto; text-align: center;"><div style="background-color:#b89560; padding:10px; box-shadow:#000000 0px 0px 34px 0px inset; border-radius:20px; width:500px; "><link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css' />
<img style="width:240px; height: 140px; border-radius: 20px; box-shadow:#000000 0px 0px 14px 0px ;" src="https://67.media.tumblr.com/6e7c386debf2749da6a1ced216d80cbe/tumblr_nkpp2f9Wgi1s95j2so4_r1_500.gif" > <img src="https://66.media.tumblr.com/00dad8b78477c3352c241922c40c16ab/tumblr_noj98uqyLC1tikkm9o1_500.gif" style="width:240px; height:140px;border-radius: 20px; box-shadow:#000000 0px 0px 14px 0px;">
<span style="font-size:30px;text-align:center;letter-spacing:-1px;font-family: 'Dr Sugiyama', cursive; color:#993300; padding:15px 0px 10px 0px; margin:5px 5px 0px 0px;">Le petite titre qui change tout</span>
<span style="font-size:10px;text-align:center;font-family:times new roman; width:250px; color:#000000; padding:-10px; text-shadow: 1px 0px 1px #ffffff;">paroles de chansons, noms des participants...</span>

<div style="width:400px; position:center; background-color:#dbc097; font-family:trebuchet ms; padding:20px; box-shadow:#000000 0px 0px 15px 0px inset; border-radius:20px; text-align:justify; color:#000000; margin: auto;">votre rp, votre rp votre rp votre rp votre rp

<span style="font-size:12px;text-align:center; font-family:times new roman; text-shadow: 1px 1px 1px #ffffff;">« Dialogue dialogue »</span>

Le retour du rp, encore et encore.</div>
<div style="color:#993300; font-family:times new roman; text-align:center;font-size:9px;"><a href="http://www.never-utopia.com/u18570">Nymeria.</a> & Gif par Tumblr </div></div></div>


Et si vous aimez les fiches un peu plus simple ou pour les évents ou autre



Le petite titre qui change tout
paroles de chansons, noms des participants...

votre rp, votre rp votre rp votre rp votre rp

« Dialogue dialogue »

Le retour du rp, encore et encore.

Nymeria. & gif par Tumblr


Spoiler:
Code:
<div style="width: 520px; margin: auto; text-align: center;"><div style="background-color:#b89560; padding:10px; box-shadow:#000000 0px 0px 34px 0px inset; border-radius:20px; width:500px; "><link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css' />
<img style="width:490px; height: 240px; border-radius: 20px;box-shadow:#000000 0px 0px 14px 0px;" src="https://67.media.tumblr.com/6e7c386debf2749da6a1ced216d80cbe/tumblr_nkpp2f9Wgi1s95j2so4_r1_500.gif" >
<span style="font-size:30px;text-align:center;letter-spacing:-1px;font-family: 'Dr Sugiyama', cursive; color:#993300; padding:15px 0px 10px 0px; margin:5px 5px 0px 0px;">Le petite titre qui change tout</span>
<span style="font-size:10px;text-align:center;font-family:times new roman; width:250px; color:#000000; padding:-10px; text-shadow: 1px 0px 1px #ffffff;">paroles de chansons, noms des participants...</span>

<div style="width:400px; background-color:#dbc097; font-family:trebuchet ms; padding:20px; box-shadow:#000000 0px 0px 15px 0px inset; border-radius:20px; text-align:justify; color:#000000; margin: auto;">votre rp, votre rp votre rp votre rp votre rp

<span style="font-size:12px;text-align:center; font-family:times new roman; text-shadow: 1px 1px 1px #ffffff;">« Dialogue dialogue »</span>

Le retour du rp, encore et encore.</div>
<div style="color:#993300; font-family:times new roman; text-align:center; font-size:9px;"><a href="http://www.never-utopia.com/u18570">Nymeria.</a> & gif par Tumblr</div></div></div>


Si vous avez des questions, n'hésitez pas Wink.

Merwyn Arehdel

Fiche de RP Sombre, transitions [HTML] - Jeu 18 Aoû 2016 - 16:07



Hellow. Very Happy Je viens vous présenter cet ouvrage :



Titre du rp

ft. pseudo & pseudo



Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?

Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?
Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
By Merwyn Arehdel sur Nu


L'image est en 100x100 non modifiable ! Elle sera redimensionnée automatiquement si vous tentez une taille plus grande. :) Merci de ne pas retirer le crédit !
Comme toujours, un merci rendra les codes visibles ~

Code:
<style> .rp { background-image: url(http://image.noelshack.com/fichiers/2016/33/1471526799-103005-dark-background-texture-of-beech-hd-p.jpg); width:400px; height:600px; box-shadow: 1px 2px lightgrey; border-radius: 05px; margin:auto; } .titre { -webkit-transition: 0.5s; transition: 0.5s; font-family: 'Lucida Handwriting'; color: white; text-shadow: 1px 1px lightgrey; font-size: 25px; margin:auto; text-align:center; } .titre:hover { color: #869296; -webkit-transform:scale(0.9); transform:scale(0.9);} .soustitre { -webkit-transition: 0.5s; transition: 0.5s; color:lightgrey; text-align:left; padding-left:05px; font-size: 13px; } .soustitre:hover { -webkit-transform:rotate(02deg); transform:rotate(02deg);} .image { width: 100px; height:100px; border-radius: 100px; opacity:0.8; position:relative; margin-top:-120px; margin-left:300px; -webkit-transition: 0.5s; transition: 0.5s;} .image:hover { opacity:1;} .texte { margin:auto; width:350px; height:480px; padding:05px; text-align:justify; color:#585959; overflow:auto; letter-spacing: -0.05em;}</style>

<div class="rp"><div class="titre">Titre du rp</div>
<div class="soustitre">ft. pseudo & pseudo</div><img src="http://www.animated-gifs.eu/category_nature/avatars-100x100-fire/0025.gif" class="image" />

<div class="texte">
Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?

Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?
Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.</div><div style="font-size: 09px; text-align:center; color: lightgrey;">By Merwyn Arehdel sur <a Href="http://www.never-utopia.com">Nu</a></div></div>

Fiche de RP Moderne avec transitions [HTML] - Lun 15 Aoû 2016 - 16:41



Bonjour Very Happy Je viens vous proposer cette p'tite fiche de RP. Un simple merci rendra les codes visibles. Merci de ne pas retirer le crédit !


Titre du Rp


Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

© Alony sur NU


Code:
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css' /><style> .fiche {margin:auto; background: #DBDBDB; -webkit-transition:0.5s; transition:0.5s; border-radius: 15px; box-shadow: 3px 0px 3px 3px rgba(0,0,0,0.5); width:400px; height:500px; padding: 10px;} .fiche:hover {-webkit-transform:rotate(-05deg); transform:rotate(-05deg);} .titrerp {font-family: 'Covered By Your Grace'; font-size: 35px; color: #383A3B; margin:auto; margin-top:-20px; text-align:center; -webkit-transition:0.5s; transition: 0.5s;} .titrerp:hover { color: #0D485C;} .gif { width:400px; opacity:0.7; border-radius: 05px; -webkit-transition:0.5s; transition: 0.5s;} .gif:hover {opacity:1; padding-left:10px;} .contenu {width:350px; overflow:auto; height: 200px; margin:auto; background-color: #414445; opacity:0.8; color: white; padding: 05px; -webkit-transition:0.5s; transition: 0.5s;} .contenu:hover {background:transparent; color: black;} .credits { text-align:center; color: #919191; font-size: 10px;}</style>
<div class="fiche"><div class="titrerp">Titre du Rp</div>
<img src="http://i.skyrock.net/6064/90806064/pics/3264052974_1_3_1NkjzRWs.gif" class="gif" />
<div class="contenu">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.
</div></div>
<div class="credits">© Alony sur <a Href="http://www.never-utopia.com">NU</a></div>

Isalia

Fiche RP } Bleu et grise toute simple - Jeu 11 Aoû 2016 - 11:47



Bonjour !

C'est la première fois que je met un code en LS, soyez indulgent x:
Je suis contente de pouvoir vous partager une fiche, j'espère qu'elle vous plaira, elle est vraiment très basique :

Un aperçu : www


Code:
<link href='https://fonts.googleapis.com/css?family=Abel|Amatic+SC|Satisfy' rel='stylesheet' type='text/css' /><div style="margin: auto; width: 530px; text-align: center;"><img src="http://www.zupimages.net/up/16/30/wz7h.jpg" style="z-index:88;" /><div style="background-color:#eaeaea;height: 650px; text-align:justify; border-left: 10px solid #619994; border-right: 10px solid #619994; width: 450px; padding: 30px;"><div style="text-align:center; font-size: 30pt; font-family: 'Abel'; text-shadow: 1px 0px 5px #07A79A; letter-spacing: 6px;margin-top:-40px; z-index:7; position: relative; color: #fff;">TITRE ICI</div>
<div style="text-align:center; font-family: 'Satisfy'; z-index:8; cursive;margin-top:-12px; color: #619994;">Prénom N. & Prénom N.</div>
<div style="width: 450px; height: 650px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit auctor nulla, vel pellentesque magna accumsan eget. Vivamus viverra rutrum purus, faucibus malesuada dolor pellentesque ut. Mauris suscipit in arcu ut tristique. Etiam et ante ac mi vulputate ultrices eu eget ante. Morbi a scelerisque magna. Donec fringilla nisl quam, eu tincidunt libero fermentum in. Morbi tincidunt nisi sed lectus rutrum facilisis. Mauris dictum metus sed pulvinar finibus. Sed blandit turpis lorem, ac consectetur tellus congue non. Nam congue, lectus in consectetur suscipit, orci sapien malesuada nulla, non fringilla sapien felis ac quam. Aliquam in ullamcorper lectus, ac elementum dui. Integer laoreet sem et leo pellentesque, quis eleifend lectus gravida. Mauris volutpat mauris dui, et tincidunt libero semper eu. Nunc vel sodales nisi.

Vivamus accumsan lectus vitae ultricies feugiat. Nam venenatis a enim non tincidunt. Nulla tincidunt lectus dui, ac cursus turpis viverra at. Maecenas dui mi, ornare a sollicitudin id, dapibus et urna. Donec non risus sagittis, luctus diam at, molestie ex. Aliquam non volutpat mauris, rhoncus fringilla nulla. Donec nunc nibh, vestibulum et nisl vel, posuere porttitor odio. Pellentesque ac ante feugiat, efficitur ipsum quis, consequat enim. Nunc elementum eros vel sapien lobortis, efficitur lacinia justo auctor. Duis vel nisl est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit auctor nulla, vel pellentesque magna accumsan eget. Vivamus viverra rutrum purus, faucibus malesuada dolor pellentesque ut. Mauris suscipit in arcu ut tristique. Etiam et ante ac mi vulputate ultrices eu eget ante. Morbi a scelerisque magna. Donec fringilla nisl quam, eu tincidunt libero fermentum in. Morbi tincidunt nisi sed lectus rutrum facilisis. Mauris dictum metus sed pulvinar finibus. Sed blandit turpis lorem, ac consectetur tellus congue non. Nam congue, lectus in consectetur suscipit, orci sapien malesuada nulla, non fringilla sapien felis ac quam. Aliquam in ullamcorper lectus, ac elementum dui. Integer laoreet sem et leo pellentesque, quis eleifend lectus gravida. Mauris volutpat mauris dui, et tincidunt libero semper eu. Nunc vel sodales nisi.

Vivamus accumsan lectus vitae ultricies feugiat. Nam venenatis a enim non tincidunt. Nulla tincidunt lectus dui, ac cursus turpis viverra at. Maecenas dui mi, ornare a sollicitudin id, dapibus et urna. Donec non risus sagittis, luctus diam at, molestie ex. Aliquam non volutpat mauris, rhoncus fringilla nulla. Donec nunc nibh, vestibulum et nisl vel, posuere porttitor odio. Pellentesque ac ante feugiat, efficitur ipsum quis, consequat enim. Nunc elementum eros vel sapien lobortis, efficitur lacinia justo auctor. Duis vel nisl est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit auctor nulla, vel pellentesque magna accumsan eget. Vivamus viverra rutrum purus, faucibus malesuada dolor pellentesque ut. Mauris suscipit in arcu ut tristique. Etiam et ante ac mi vulputate ultrices eu eget ante. Morbi a scelerisque magna. Donec fringilla nisl quam, eu tincidunt libero fermentum in. Morbi tincidunt nisi sed lectus rutrum facilisis. Mauris dictum metus sed pulvinar finibus. Sed blandit turpis lorem, ac consectetur tellus congue non. Nam congue, lectus in consectetur suscipit, orci sapien malesuada nulla, non fringilla sapien felis ac quam. Aliquam in ullamcorper lectus, ac elementum dui. Integer laoreet sem et leo pellentesque, quis eleifend lectus gravida. Mauris volutpat mauris dui, et tincidunt libero semper eu. Nunc vel sodales nisi.</div></div><span style="font-size: 7;">Isalia (c) 16</span></div>


Voilà voilà :love:

Fyraliel

Fiche RP très basic - Lun 23 Mai 2016 - 19:43



Bonjour tout le monde,

Je viens vous proposer une fiche de rp simple et basic, sans image.
un petit screen de la fiche vous aidera à y voir plus clair Wink

Un petit merci fera apparaître le code Wink

Enjoy !

Code:
<style>.fleche_haut {margin: auto; width: 0;height: 0;border-left: 300px solid transparent;border-right: 300px solid transparent;border-bottom: 250px solid #64A8B2;}.titre_rp {width: 100%;text-align: center;font-family: 'Time New Roman'; font-size: 30px;position: absolute;top: -130px;}.fiche_corps{margin: auto; width: 596px;height: 500px;border: 2px solid #B2825A;background: #FFC79A;position: relative;}.cadre_rp {width: 80%;height: 395px;border: 1px solid #64A8B2;background: #FFD5B4;margin: 50px auto 0px auto;font-family: 'Time New Roman';font-size: 15px;text-align: justify;padding: 5px 5px 0;overflow: auto;}.fleche_bas{width: 0;height: 0;border-left: 300px solid transparent;border-right: 300px solid transparent;border-top: 250px solid #64A8B2;margin: auto;}</style>
<div class="fleche_haut"></div><div class="fiche_corps"><div class="titre_rp">titre du rp</div><div class="cadre_rp">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus ullamcorper congue. Morbi in consequat erat. Integer ultrices turpis ut posuere ultricies. Vestibulum interdum turpis at placerat gravida. Sed vel pretium purus, et maximus augue. Proinornare nulla ac egestas mollis. Aenean viverra cursus dolor, nec euismod ex elementum ac. Suspendisse arcu magna, tincidunt vitae bibendum ac, ornare vel purus. Integer suscipit pulvinar sollicitudin. Phasellus id dignissim sem. Praesent dapibus nisi vel consectetur porttitor. Vestibulum gravida lorem et lacinia suscipit. Nam nisl massa, convallis sed enim ullamcorper, volutpat laoreet tellus. Ut eleifend ornare tellus, sed vestibulum lacus dictum laoreet. Donec sed facilisis ante. Ut tempor malesuada ipsum, eu posuere quam mollis quis.

Nulla sollicitudin malesuada dui, at rhoncus nisi ultrices vel. Nam lobortis ligula ac consectetur luctus. Cras nec quam nisl. Sed quis efficitur risus, id consectetur nunc. Nulla vel vulputate ligula. Praesent non est bibendum, eleifend magna vitae, consequat dui. Phasellus tempor ultricies lorem. Sed et dui ex. Fusce in volutpat eros. Vivamus viverra, turpis condimentum tincidunt mollis, velit mauris iaculis est, ac rutrum dui velit rhoncus ipsum. Praesent auctor est quis efficitur posuere. Aenean et purus neque. Morbi vitae dignissim lorem. Donec leo mauris, aliquet aliquet nisi id, commodo sollicitudin nunc. Maecenas risus enim, congue sed turpis ac, ultricies tincidunt magna. Aliquam a magna quis justo venenatis sodales. Pellentesque dolor sapien, elementum gravida magna sed, commodo placerat tortor. Duis a ante tristique, rutrum massa a, elementum magna. Mauris semper justo a ipsum malesuada efficitur. Pellentesque eget sapien porttitor, lacinia leo sed, tincidunt velit. Phasellus metus purus, tristique ac est a, elementum cursus massa. Maecenas ultricies condimentum varius. Pellentesque elementum feugiat risus, ac laoreet turpis feugiat eu. Nam porta at lectus vel auctor.

Curabitur id tempor turpis. Suspendisse luctus urna non felis dictum condimentum. Nunc sodales ultricies ipsum et hendrerit. Cras ultrices neque ac volutpat aliquet. Sed bibendum ante vel orci faucibus mollis. Integer a lorem sodales, cursus diam id, euismod ante. Donec enim est, ultrices sed est vel, auctor placerat turpis.
<a href="http://www.never-utopia.com/" style="width: 100%;color: #9AF1FF;font-size: 10px;position: absolute;bottom: -50px;right: -1px;display: block; text-align: center;">Fyraliel</a></div></div><div class="fleche_bas"></div>

Gotheim

Message de RPG simple - Mer 6 Avr 2016 - 20:35



Bonjour, j'ai redécouvert Never Utopia dans mes préférés il y a quelques jours. Je me suis inscrite mais je n'ai finalement jamais rien fait ici, mais comme c'est un forum qui pourrait m'être utile et qui est très beau, j'aimerais contribuer!

Voici donc un petit code tout simple pour commencer :lovebomb:

Vous pouvez changer les couleurs
Vous pouvez changer l'image
Pas touche aux crédits

Aperçu:
Tes partenaires de rp ici (ou une petite citation)
Le titre de ton rp
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
GOTHEIM sur Never Utopia


Code:
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css' /><div style="margin: auto; text-align: center; background-color:#D1D1D1; width:400px; text-transform:uppercase; font-size:11px; font-family: 'Roboto Condensed', sans-serif; color:#1F1F1F;">Tes partenaires de rp ici (ou une petite citation)</div><div style="margin: auto; text-align: center; background-color:#ffffff; width:480px; font-family: 'Roboto Condensed', sans-serif;"><img src="http://zupimages.net/up/16/14/yndn.png" width="480px" /><div style="text-transform:uppercase; color: #E2E2E2; font-size:25px; margin-top:-18px;">Le titre de ton rp</div><div style="padding:20px 30px; text-align:justify; color:#1F1F1F;"> Le contenu de votre message RPG vient ici, avec vos actions et vos dialogues. Faites vivre votre personnage, il vous en sera reconnaissant!</div></div><div style="margin: auto; text-align: center; background-color:#D1D1D1; width:400px; text-transform:uppercase; font-size:11px; font-family: 'Roboto Condensed', sans-serif; color:#444444;">GOTHEIM sur <a href="http://www.never-utopia.com/">Never Utopia</a> </div>

JodieCravery

Message RP en CSS - Dim 6 Mar 2016 - 10:27



Bonjour à tous ceux qui lisent ce message .o.

Je ne suis pas la personne la plus douée du monde mais, de temps en temps, je fais des codes pas trop hasardeux et qui donneront pas envie de s'arracher les yeux à des codeurs expérimentés (quoique). Du coup je me suis dit qu'en guise de première participation au forum, j'allais vous proposer un code que j'ai réalisé il y a quelques temps et dont je ne me sers plus vraiment. Il y a deux façon de faire cette fiche de réponse pour qu'elle soit entièrement personnalisable :
- Avec le CSS du forum (si vous êtes administrateur, donc)
- Avec une fiche CSS hébergée sur internet et liée à la fiche

Je propose aussi une version du code avec le CSS directement dans le html, mais certaines parties ne seront pas personnalisables (seulement l'ombre, la couleur de fond, les dimensions hauteur/largeur, la couleur de la bordure et du texte et le titre). Dans tous les cas, il ne faut pas supprimer le lien vers la fiche CSS pour garder l'aspect de la fiche.

Aperçu:


TITRE DU RP

Ft JOUEUR UN & JOUEUR DEUX
RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP RP
@ Jodie Cravery sur Never Utopia


La grande image, en plus de devenir transparente et de "s'agrandir", passe aussi en noir et blanc. L'opacité finale est modifiable dans le css, sinon l'opacité par défaut est de 40%. Pour le texte, la barre de défilement est située à gauche.


Les Codes



HTML avec CSS :
Code:
<link href="http://www.aht.li/2840022/Fiche_Basique.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css' />
<div class="title" style="width:500px;"><div class="block-title-on" style="width: 500px;  height: 208px;"><a href="LIEN VERS LA PREMIÈRE PAGE DU RP"><img src="LIEN IMAGE EN 500*208" style="width:500px; height:208px;"/></a><div class="block-title-under" style="vertical-align:middle; text-align:center; font-variant:small-caps; padding-top:30px;"><span style="text-shadow: 2px 2px 2px #766344; font-family: 'Mr Dafoe', cursive; font-size: 40px;">TITRE DU RP</span><div class="img-rp" style="letter-spacing : 15px;">
<img src="LIEN IMAGE 100*100 GAUCHE" width="100px" height="100px"/> <img src="LIEN IMAGE 100*100 DROITE" width="100px" height="100px"/></div>Ft JOUEUR UN & JOUEUR DEUX</div></div></div>
<div class="rp" style="width:540px;margin-top:5px;"><div class="rp-txt" style="height:700px;  color:black;  border-bottom:8px solid black;  border-left:1px solid black; box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); background-color:#306B17; "><div class="rp-scroll">
--------------------------------> CONTENU DE VOTRE RP <-----------------------------
</div></div> <span style="font-size:10px; color:black;">@ Jodie Cravery sur <a href="http://www.never-utopia.com">Never Utopia</a></span></div>

Vous pouvez donc modifier :
- La taille du bloc contenant l'image-titre ("title" et "block-title-on")
- Les dimensions de la première image ("LIEN IMAGE EN 500*208" style="width:500px; height:208px;"), veillez cependant à ce que les dimensions soient les mêmes que celle du bloc.
- Le format de ce qui apparaît au survol de l'image-titre ("block-title-under")
- Le format du texte du titre (tout ce qui est dans le style du span)
- L'espace entre les deux images en 100*100 ("letter-spacing : 15px;")
- La taille de ces images (directement dans le width et le height des images)
- La largeur du bloc de texte ("rp")
- La hauteur, la couleur de fond, la couleur d'écriture, les bordures et les ombres du bloc de texte ("rp-txt")


HTML sans CSS :
Code:
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css' />
<div class="title"><div class="block-title-on"><a href="LIEN VERS LA PREMI7RE PAGE DU RP"><img src="LIEN IMAGE EN 500*208"/></a><div class="block-title-under"><span style="text-shadow: 2px 2px 2px #766344; font-family: 'Mr Dafoe', cursive; font-size: 40px;">TITRE DU RP</span><div class="img-rp">
<img src="LIEN IMAGE 100*100 GAUCHE" width="100px" height="100px"/> <img src="LIEN IMAGE 100*100 DROITE" width="100px" height="100px"/></div>Ft JOUEUR UN & JOUEUR DEUX</div></div></div>
<div class="rp" style="margin-top:5px;"><div class="rp-txt" style="color:black; background-color:#306B17;"><div class="rp-scroll">
--------------------------------> CONTENU DE VOTRE RP <-----------------------------
</div></div> <span style="font-size:10px; color:black;">@ Jodie Cravery sur <a href="http://www.never-utopia.com">Never Utopia</a></span></div>


Code CSS :
Code:
.title {
  margin:auto; /*centrage du bloc titre et image*/
    width:500px; /*largeur du bloc titre et image*/
}

.block-title-on
{
   -webkit-transition: all 1.5s ease; /*vitesse de transition*/
   transition: all 1.5s ease; /*vitesse de transition*/
   display: block;
   width: 500px; /*largeur du bloc titre et image*/
   height: 208px; /*hauteur du bloc titre et image*/
   position: relative;
  opacity: 1.0; /*opacité de base de l'image */
  filter: alpha(opacity=100);  /*opacité de base de l'image */
  filter: grayscale(0); /*opacité de base de l'image */
        -webkit-filter: grayscale(0); /*image en couleurs*/
}

.block-title-on:hover a img {
     display: block;
   -webkit-transition: all 1.5s ease; /*vitesse de transition*/
   transition: all 1.5s ease; /*vitesse de transition*/
   opacity: 0.4; /*opacité de l'image au survol*/
    filter: alpha(opacity=40);   /*opacité de l'image au survol*/
  width:500px; /*largeur de l'image au survol */
  height:208px;  /*hauteur de l'image au survol */
   filter: grayscale(1); /*passage de l'image en noir et blanc*/
   -webkit-filter: grayscale(1); /*passage de l'image en noir et blanc*/
border-radius: 1px; /*diminution de l'arrondi au survol*/
}

.block-title-on a img {
     display: block;
     position: absolute;
    left: 0; right: 0;
  top: 0; bottom: 0;
  -webkit-transition: all 1.5s ease; /*vitesse de transition*/
  transition: all 1.5s ease;  /*vitesse de transition*/
   width:500px; /*largeur de base de l'image */
  height:208px; /*hauteur de base de l'image */
border-radius: 50px; /* arrondi de base de l'image*/
border-top-left-radius: 15px; /* arrondi de base de l'image haut gauche*/
border-bottom-right-radius: 15px; /* arrondi de base de l'image bas droite*/
}

.block-title-under {
    vertical-align:middle; /*centrage vertical du texte*/
text-align:center;  /*centrage du texte */
font-variant:small-caps; /*passage en petites majuscules */
  padding-top:30px; /*écart avec le haut du bloc titre*/
 }

.block-title-under img {
   width:100px; /*largeur des petites images */
  height:100p ; /* hauteur des petites imaages*/
border-radius: 50px; /*arrondi des petites images */
border-top-left-radius: 15px;/*arrondi des petites images haut gauche */
border-bottom-right-radius: 15px;x;/*arrondi des petites images bas droite*/
}

.img-rp {
  letter-spacing : 15px;} /*espace entre les deux images */

.rp {
  margin:auto; /*centrage du bloc rp*/
  width:540px; /*largeur du bloc rp*/
  padding-left:10px;
  margin-bottom:20px;
}

.rp-txt {
  height:700px; /*hauteur du bloc rp*/
  overflow:auto; /*barre de défilement automatique*/
border-top-left-radius: 2px; /*arrondi haut gauche */
border-top-right-radius: 20px; /*arrondi haut droite */
border-bottom-right-radius: 100px;/*arrondi bas droite */
border-bottom-left-radius: 2px; /*arrondi bas gauche */
  padding:10px 25px 15px 10px;
  border-bottom:8px solid black; /*bordure bas */
  border-left:1px solid black; /*bordure gauche*/
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); /*ombre du bloc texte*/
  direction:rtl; /*NE PAS MODIFIER*/
  text-align:justify; /*NE PAS MODIFIER*/
}

.rp-scroll {
  direction:ltr; /*NE PAS MODIFIER*/
    text-align:justify; /*NE PAS MODIFIER*/
}

.rp-txt::-webkit-scrollbar {
    width: 3px; /*largeur de la barre de défilement*/
}
 
.rp-txt::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background-color:black; /*couleur de la barre de défilement*/
}
 
.rp-txt::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background-color:#DDDDDD; /*couleur du rectangle dans la barre de défilement*/
}

J'ai fait le code CSS le plus clair possible pour rendre la personnalisation simple. La couleur de fond et la couleur du texte restent modifiables directement dans le html, tout comme le format du titre (police, taille, ombre, etc). Si vous ne voulez vraiment rien modifier d'autre, il vous suffit de coller ce code au début de votre fiche pour que la mise en page se fasse d'elle-même :
Code:
<link href="http://www.aht.li/2840035/Fiche_Complete.css" rel="stylesheet" type="text/css" />

Bon, et si vous n'avez pas d'image à la bonne taille pour le titre du rp et que vous avez la flemme de chercher ou d'en faire une, je vous offre des cactus :
Code:
http://i.imgur.com/J3kEMuF.png


C'est ma première contribution, j'espère donc que c'est assez clair. N'hésitez pas à poser des questions si j'ai mal explicité certains points.
Il faut poster à la suite pour voir les codes ~

Elocha

Message RP multi perso - Lun 21 Déc 2015 - 15:09



Bonjour,

Je me lance dans l'univers incroyable du codage, et vous propose à la suite ma première réalisation personnelle. Il s'agit d'un code qui va faire apparaitre sur le forum, en plus du message RP à proprement parlé, un profil qui n'est pas le votre, par dessus votre profil de compte. J'utilise ça pour jouer des PNJ sur un forum où je suis animatrice. J'ai bidouillé ça sur une idée de Okhmhaka [ICI] qui a changé ma vie de MJ \o/ (maitre du jeu). Du coup, j'ai préparé autant de "code" que de PNJ, chacun le sien, et je n'ai plus qu'à insérer le texte du RP.
 
Je le propose ici parce que je mélange encore un peu le BBcode et le HTML et qu'avant de le mettre en LS je me dis qu'il faut le nettoyer un peu.


A quoi ça ressembleuuu ?
Voilà l'aperçu : Ce qu'on fait est qu'on crée une mise en page qui va aller "par-dessus" la colone du profil et qui va aller le cacher avec votre faux profil. Du coup, dépendement de la largeur/hauteur de votre propre profil, vous devrez sans doute modifier un peu le code pour qu'il corresponde à votre forum.


Il faut poster à la suite pour le voir ^^. Merci de garder le "copyright" au moins pour le forum ici.

Le Code


Pour un profil à gauche
Code:
<table style="position: relative; z-index: 15; margin-left:-210px; margin-top:-37px; width:770px"><tr><td style="vertical-align: top; height: 400px;"><img style="border:4px solid #BB9600;" src="http://i66.tinypic.com/14iz7te.png"/></td><td rowspan="2"; valign="top"><div style="border-right:4px solid #BB9600; padding: 10px; height:800px; overflow: scroll"><span style="font-family: Time New Roman; font-size:34px; letter-spacing: -3px;font-variant: small-caps; text-shadow: 3px 3px 3px grey; color: #BB9600;">Titre du Rp.</span><br/>
<p style="text-align: justify;">
TEXTE DU RP TEXTE DU RP TEXTE DU RP TEXTE DU RP
</p>
</div></td></tr><tr><td style="vertical-align: top; width: 200px; height: 400px; color: #BB9600;">
<span style="font-size:200%">Prénom<br/>NOM</span><br/><span style="font-size:100%">
<p align="justify">âge, civilités etc<br/>taille ~poids<br/><br/><br/>
Petite bio jolie pour ceux qui aime ça, ou bien compétences et statistiques quand vous en avez. Il y a largement la place de mettre du texte comme vous voulez.<br/><br/></p></span>
</td></tr></table>
<p style="text-align:right";><strong>Réponse attendue pour le XX-XX-XX au plus tard</strong></p>
<div style="texte-align:center; color:#cccccc; font-size:75%;">Code par Elocha sur <a href="url=http://www.never-utopia.com/">Nerver-Utopia</a></div>


Pour un profil à droite :
Code:
<table style="margin-right:-210px; margin-top:-40px; width:800px"><tr><td rowspan="2"; valign="top"><div style="border-right:4px solid #BB9600; padding: 10px; height:800px; overflow: scroll"><span style="font-family: Time New Roman; font-size:34px; letter-spacing: -3px;font-variant: small-caps; text-shadow: 3px 3px 3px grey; color: #BB9600;">Titre du Rp.</span><br/>
  <p style="text-align: justify;">
TEXT Du RPTEXT Du RP TEXT Du RP TEXT Du RP TEXT Du RP TEXT Du RP TEXT Du RP
  </p>
</div></td>
  <td style="height: 400px; vertical-align: top;"><img style="border:4px solid #BB9600;" src="http://i66.tinypic.com/14iz7te.png"/></td></tr><tr><td style="height: 400px; width: 200px; vertical-align: top; color: #BB9600;"><span style="font-size:200%">Prénom<br/>NOM</span><br/><span style="font-size:100%">
  <p style="text-align: justify;">âge, civilités etc<br/>taille ~poids<br/><br/><br/>
Petite bio jolie pour ceux qui aime ça, ou bien compétences et statistiques quand vous en avez. Il y a largement la place de mettre du texte comme vous voulez.<br/><br/></p></span>
  </td></tr></table>
  <p style="text-align:right; font-size:100%;">Réponse attendue pour le XX-XX-XX au plus tard</p>
<div style="texte-align:center; color:#cccccc; font-size:75%;">Code par Elocha sur <a href="url=http://www.never-utopia.com/">Nerver-Utopia</a></div>


Usage


Structure : Évidement ici c'est un dessin avec la colonne de profil à gauche...
le tableau tout nu

  • Il faudra jouer sur les positions en début de code ainsi que sur la largeur des colonnes pour bien superposer le profil et le message sur ce que fait le forum normalement.
  • J'ai gardé deux lignes dans la première colonne parce que, ainsi, je peux gérer la partie basse du profil selon mes besoin séparément de la partie haute (avatar du PNJ).
  • Pour ceux qui affichent la colonne de profil à droite il suffit d'inverser l'ordre des colonnes dans le code et de changer l'alignement des marges (je vous propose les deux codes).
  • Sur cette version, les avatars sur ce forum font 200*400 et ne sont pas "resized".
  • Pour chaque personnage il faut changer l'avatar, la couleur éventuellement, et bien sûr le petit texte de présentation de votre PNJ.
  • Astuce : les couleurs du cadre sont celle du groupe en fait, ce qui permet aux joueurs d'identifier le PNJ rapidement -et pratiquement inconsciemment-


Revenir en haut

La date/heure actuelle est Dim 19 Nov 2017 - 13:06