AccueilDernières imagesRechercherS'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.


1 résultat trouvé pour F0F4F8

.sapphire

Codage type Skype - Dim 10 Sep 2017 - 20:04

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>


Attention il est important de "coller" les différentes balises table si ne vous ne voulez aucun espace indésirable entre les messages.


Merci de votre attention et bon RPG à tous !


Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 14:46