Vous voulez un joli codage pour vos RPs sur le forum ? Nous vous proposons divers codages utiles à des fins différentes, assortis au design du forum !
- Fiche RP
- Modèle de communication par chat, SMS...

Voici un aperçu complet de ce qu'il est possible de faire avec ce codage adapté aux communications textuelles tel que des SMS, des chats en ligne... Le codage fonctionne avec le modèle de fiche RP proposé pour le forum mais aussi sans, cependant nous ne garantissons pas son fonctionnement complet sur des codages autres.

Vous retrouverez le code complet tout en bas de ce post, sous deux formats différents : avec commentaires pour le premier, et sans les commentaires et avec des sauts de ligne pour le second. Il a été prévu que les sauts de ligne n'endommagent pas le code dans tous les cas (par souci de clarté pour que vous puissiez sauter des lignes comme bon vous semble pour pouvoir lire le code). Les sauts de ligne sont seulement pris en compte dans le bloc dédié à un message, puisqu'on peut tout naturellement faire ça dans de réels outils de discussion en ligne. Des explications détaillées sur chaque morceau de code sont disponibles sous l'aperçu.

Aperçu

Explications

Ce premier code est le bloc qui contiendra tout les codes suivants. Il permet entre autre d'avoir des marges sur les côtés.

Code:

<div class="eod-chat__bloc">
<!-- ******* METTRE TOUT LE CONTENU ICI ******* -->
</div>

Pour afficher une entête, comme celle-ci, c'est ce morceau de code qu'il faut :

Code:

<div class="eod-chat__entete">
<span class="eod-chat__line"></span>
<span class="eod-chat__titre"><!-- ******* TEXTE DE L'ENTETE ICI ******* --></span>
<span class="eod-chat__line"></span>
</div>

Ensuite, vous avez deux types de blocs de messages : l'un qui sera à gauche, l'autre à droite. Vous pouvez mettre plusieurs messages dans un bloc de gauche ou dans un bloc de droite sans problème, puis alterner les blocs gauche et droite pour dérouler une conversation complète (habituellement les messages de droite sont ceux envoyés par la personne qui lit la conversation, donc vous !).

Code pour le bloc de gauche :

Code:

<div class="eod-chat__left">
<!-- ******* METTRE LES MESSAGES A GAUCHE ICI ******* -->
</div>

Code pour le bloc de droite:

Code:

<div class="eod-chat__right">
<!-- ******* METTRE LES MESSAGES A DROITE ICI ******* -->
</div>

Ensuite pour afficher l'auteur ou l'horodatage ou les deux, il faut utiliser ce code-ci, à mettre dans les blocs droite ou gauche :

Code:

<div class="eod-chat__auteur"><!-- ******* METTRE LE NOM OU LE PSEUDO DU PERSONNAGE ******* --><span class="edo-chat__horodatage"><!-- ******* METTRE L'HORODATAGE ICI ******* --></span></div>

La balise ci-dessous permet en fait d'ajouter une marge sur la gauche de l'horodatage. Si vous ne voulez pas l'horodatage ou de la marge vous pouvez l'enlever.

Code:

<span class="edo-chat__horodatage"><!-- ******* METTRE L'HORODATAGE ICI ******* --></span>

Par contre, il est important de garder la balise qui englobe la section "auteur".

Code:

<div class="eod-chat__auteur"><!-- ******* METTRE LE NOM OU LE PSEUDO DU PERSONNAGE ******* --></div>

Pour le message en lui-même, qu'il soit à droite ou à gauche, il faut utiliser le morceau de code suivant (oui oui, vous pouvez y insérer des images, des gifs...) :

Code:

<div class="eod-chat__message-bloc"><div class="eod-chat__message"><!-- ******* METTRE LE MESSAGE ICI ******* --></div></div>

Pour ajouter un tag, soit vous pouvez directement changer la couleur d'une partie du texte, soit vous pouvez utiliser ceci, directement dans le texte du message :

Code:

<span class="eod-chat__tag"><!-- ******* METTRE LE CONTENU DU TAG ICI ******* --></span>

Enfin, pour ajouter un "vu" à un message, il faut prendre ce bloc de message (ou rajouter la balise qui concerne le "vu" au bon endroit, dans la balise qui a la classe "eod-chat__message-bloc", après le message) :

Code:

<div class="eod-chat__message-bloc"><div class="eod-chat__message"><!-- ******* METTRE LE MESSAGE ICI ******* --></div><div class="eod-chat__recu">Vu</div></div></div>

Vous voulez personnaliser la couleur de fond des messages ? Pour cela il faut soit prendre le morceau de code ci-dessous, qui correspond à un bloc message avec une couleur différente et remplacer le code hexadécimal de la couleur (la série de chiffres et de lettres avec le dièse) derrière le "background-color:" par un autre. Internet regorge d'outils pour vous fournir le code hexa d'une couleur ! L'autre méthode est de simplement ajouter ce morceau : "style="background-color:#521B5A;" à la balise qui a la classe "eod-chat__message" à la fin vous devriez vous retrouver avec le même code que celui que je vous donne juste en-dessous :

Code:

<div class="eod-chat__message-bloc"><div class="eod-chat__message" style="background-color:#521B5A;"><!-- ******* METTRE LE MESSAGE ICI ******* --></div></div>

Ça fonctionne évidemment avec tous les messages, à droite, à gauche, avec "vu" ou non.

A présent vous êtes en possession de toutes les clés pour créer un joli RP dans la section communication par messages/chat ! Vous êtes libres d'utiliser entièrement ces morceaux de code ou non sur le forum, d'en utiliser certains et pas d'autres, gardez toutefois en tête de ne pas déformer la structure du forum (et de garder le contenu lisible aussi) !