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.

Le Deal du moment : -50%
-50% Baskets Nike Dunk Low
Voir le deal
64.99 €

    Codage type Skype

    .sapphire
    .sapphire
    FémininAge : 29Messages : 39

    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 !


    Dernière édition par .sapphire le Sam 9 Nov 2019 - 8:05, édité 1 fois
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 23 Fév 2019 - 3:25

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

    Merci de ton partage ♥



    Anonymous
    Invité

    Sam 23 Fév 2019 - 11:46

    Merci pour le partage :)
    Pandyakuza
    Pandyakuza
    FémininAge : 30Messages : 5

    Lun 3 Juin 2019 - 2:46

    C'est parfait *_*
    Nasträlya
    Nasträlya
    FémininAge : 28Messages : 245

    Mer 7 Aoû 2019 - 13:26

    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 ♥



    :friends:
    Codage type Skype 47202010
    Tueuse de yeux de Mère en Fille depuis 1875 :angry:
    .sapphire
    .sapphire
    FémininAge : 29Messages : 39

    Sam 9 Nov 2019 - 8:08

    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 ^^
    Lauranna
    Lauranna
    FémininAge : 34Messages : 30

    Mar 12 Mai 2020 - 12:03

    Un gros merci pour ce code!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 22:45