Codage type Skype

Bonjour ! Suite à une demande de codage voici un code en livre service pour un code style Skype.

Petit aperçu:

Une fois que vous dépassez le cadre une barre de défilement apparaîtra pour que vous puissiez lire tous les messages. Une petit merci vous permettra de faire apparaître le code :

Le code:

Concernant les images celle du pseudo est automatiquement redimensionné en 70px et les plus petites des messages en 50px. Bien sûre vous pouvez changez les images comme vous le voulez, j'ai mis la même (le Pikachu) pour être sûre que vous ne changez pas les autres images. L'adresse de l'image Pikachu est la suivante : https://l-userpic.livejournal.com/123566551/68620810

Il est possible de changer les couleurs les deux codes couleurs utilisés sont les suivants :
le bleu : #C7EDFC
Le gris : #F0F4F8

Pour changer la couleur du cadre de fond pour les pseudo trouvez la ligne suivante

Code:

.cadrepseudo{width: 215px; height: 20px; border-radius: 20px; background:#C7EDFC; padding: 20px;}

et remplacez le code couleur

Pour changer la couleur des cadres de message gris trouvez la ligne suivante

Code:

.cadremessagegris{width: 360px; background:#F0F4F8; padding: 12px; display: inline-block;}

et remplacez le code couleur

N'oubliez pas de changer la couleur de la flèche qui va avec la ligne est la suivante :

Code:

.flechegauche{width:0; height:0; border-style: solid; border-width: 5px 8px 5px 0; border-color:transparent; border-right-color:#F0F4F8; margin-top: -10px;}

Même opération pour les cadres de message bleu trouvez la ligne suivante

Code:

.cadremessagebleu{width: 360px; background:#C7EDFC; padding: 12px; display: inline-block;}

et remplacez le code couleur

Et pour la flèche trouvez la ligne suivante :

Code:

.flechedroite{width:0; height:0; border-style: solid; border-width: 5px 0 5px 8px; border-color:transparent; border-left-color:#C7EDFC; margin-top: -10px;}

Pour rajouter des lignes de messages à présent.

Pour rajouter un message gris avec image et flèche ajoutez une ligne comme celle là :

Code:

<table><tr><td><img src="https://l-userpic.livejournal.com/123566551/68620810" class="imagemessage"></td><td><div style="display: inline-block;"><div class="flechegauche"></div></div><div class="cadremessagegris"><span class="cadremessagespan">Message reçu</span></div></td><td><span class="heure">00:00</span></td></tr></table>

Pour rajouter une message gris sans image et flèche ajoutez une ligne comme celle là:

Code:

<table><tr><td><div class="espace">b</div></td><td><div class="cadremessagegris"><span class="cadremessagespan">Message reçu</span></div></td><td><span class="heure">00:00</span></td></tr></table>

Pour rajouter un message bleu avec image et flèche ajoutez une ligne comme celle là :

Code:

<table><tr><td><span class="heure">00:00</span></td><td><div class="cadremessagebleu"><span style="cadremessagespan">Message reçu</span></div><div style="display: inline-block;"><div class="flechedroite"></div></div></td><td><img src="https://l-userpic.livejournal.com/123566551/68620810" class="imagemessage"></td></tr></table>

Pour rajouter une message bleu sans image et flèche ajoutez une ligne comme celle là:

Code:

<table><tr><td><span class="heure">00:00</span></td><td><div class="cadremessagebleu"><span class="cadremessagespan">Message reçu</span></div></td></tr></table>

Merci de votre attention et bon RPG à tous !

C'est tout bon, je déplace dans le Libre Service !

Merci de ton partage ♥

Merci pour le partage :)

C'est parfait *_*

Bonjour! J'utilise ton code actuellement, et c'est juste pour te dire que dans le premier message bleu, tu as marqué "span STYLE" alors qu'il fallait marquer "span CLASS" =) Je m'en suis rendu compte en changeant les couleurs!

Voilà! sinon super ton code

Bonjour Nasträlya,

Merci pour ton oeil de Lynx en effet c'était une belle faute d'inattention. C'est corrigé merci pour ta remarque !

Et heureuse que le code plaise ^^

Un gros merci pour ce code!