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 :
Coffret dresseur d’élite ETB ...
Voir le deal
56.90 €

    Un seul compte, plusieurs personnages : Choix déroulant (2 versions)

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 21 Avr 2019 - 16:46

    Un seul compte, plusieurs personnages : Choix déroulant




    Alors, le multicompte !

    Okhmakala avait déjà pensé à cela et avait proposé une astuce juste ici.

    Puis, j'ai découvert Esquisse où j'ai réalisé qu'il y avait un système très intéressant où les joueurs ajoutaient une toute petite ligne de code (différente pour chaque personnage) sur leurs messages RP. Ensuite, un javascript repérait cette merveilleuse ligne de code et modifiait le pseudo et l'avatar du joueur pour ceux du personnage dans ce message.

    Je reprends ces deux idées et je vais un pas plus loin.


    De ce que j'ai pu voir, les principales oppositions à l'idée de Okhmhaka étaient les suivantes :
    - Il va falloir que je change des choses
    - Oui, logique, un changement implique des changements. Si cela complique la vis des gens, cela passe très mal. Si cela leur facilite la vie, cela passe très bien. On va essayer d'être dans la deuxième catégorie ^^

    - Le codage est trop compliqué pour certains de mes membres.
    Plus maintenant ! La seule chose que votre membre aura besoin de faire, c'est de sélectionner son personnage, rien d'autre. Le membre n'a pas à toucher à une miette de code ^^

    - Les gens doivent toujours copier/coller leur fiche rp, c'est frustrant.
    Nope ! Les gens n'auront qu'à sélectionner leur personnage dans un choix déroulant et la magie s'opérera. Leur fiche rp personnalisée apparaîtra comme par magie et leur rp se met lui-même au bon endroit. Il ne reste plus qu'à poster ^^

    - C'est louche... Ça fonctionne comment exactement?
    Oui, oui, ça s'en vient XD Allez, je vous présente les deux versions.


    Version 1


    1. Choisir dans un menu déroulant le personnage souhaité lorsque vous postez votre RP.


    Le javascript vous propose vos personnages dans un choix déroulant.
    Voir un exemple de choix de personnages.

    Une fois le choix fait, un petite ligne de code magique qui fait tout fonctionner s'ajoute à votre message.
    Voir un exemple de ce qui ce passe une fois le choix fait.
    Note : Cela ne fonctionne pas sur les réponses rapides. Il faut cliquer sur "Prévisualiser", puis choisir son personnage.
    Note 2 : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

    2. Avoir les informations du personnage choisi qui remplacent les vôtres


    Dans les sujets où vous avez choisi un personnage avant de poster, vous verrez votre avatar, votre pseudo, la couleur de votre groupe, votre rang et votre image de rang seront remplacés par ceux du personnage.
    Votre pseudo en tant que joueur sera déplacé ailleurs (en dessous du pseudo du personnage sur l'exemple), mais restera quand même là pour dire qui est le propriétaire de ce personnage.
    Voir un exemple de plusieurs personnages.

    3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


    Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires et il est possible de personnaliser l'apparence de chacun des champs personnalisés.
    Voir un exemple.
    Note : Sur l'exemple, on ne voit pas les champs "normaux" du joueur parce que je ne voulais pas les voir en même temps que les champs personnalisés. Je les ai cachés pour qu'ils apparaissent seulement au survol de l'avatar. Il y a un tas de LS sur ça, je vous laisse fouiller si ça vous intéresse.

    4. Avoir 2 profils distincts si vous préférez cette option


    Disons que, à la place d'avoir les informations sur personnage qui remplace celles du joueur, vous préférez avoir un profil joueur et un profil personnage, puis voir les 2 apparaître en même temps, c'est aussi une option qui vous sera proposée.
    Si les instructions mentionnent "2 profils distincts", cela s'adresse à vous.
    Voir un exemple.
    Par contre, ce LS est uniquement pour faire fonctionner le système et mettre en forme la partie personnage. Pour la partie profil du joueur, c'est à vous de le faire, quitte à aller voir les autres LS de profil. Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka (qui est 100% compatible, je m'en suis assurée :ange:)

    5. Modifier les données des personnages avec une Google Sheet


    Vous pouvez utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
    L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
    Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
    S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.

    6. Modifier les données des personnages directement dans le javascript


    Disons que vous avez une haine profonde de Google Sheet et que vous voulez une autre option pour où mettre les données des personnages, cette option est pour vous.
    L'information est enregistrée directement dans le javascript lui-même pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
    L'avantage, c'est que seuls les Admins pourront le modifier.
    Le désavantage, c'est que seuls les Admins pourront le modifier (dépendamment du nombre de membres et de modifications à faire, cela peut rapidement devenir ardu).
    Si vous n'aimez pas utiliser Google Sheet ou des sites externes, c'est une solution comme une autre.


    Version 2


    Contrairement à la Version 1, il n'y a pas de ligne de code magique qui s'ajoute à votre message et les informations de votre personnage ne vont pas remplacer celles de votre profil.
    Le principe de cette version, c'est qu'on veut voir la progression du personnage dans le temps.
    Or, dans la Version 1, dès qu'on change une information dans la Google Sheet, les informations se modifient partout (bref, selon le même principe que les champs du profil FA habituels).

    Par conséquent, voilà ce que cette version vous permettra de faire :

    1. Choisir dans un menu déroulant le personnage qui doit poster lorsque vous postez votre RP.


    Bref, le javascript va regarder dans la base de données quels sont vos personnages et vous les propose.
    Voir un exemple de choix de personnages.
    Note : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

    2. Mettre toutes les informations de votre personnage dans une feuille RP avant de poster


    Lorsque vous choisissez un personnage, le javascript magique crée une feuille RP qui contient les informations de vos personnages et y glisse le message que vous venez d'écrire.
    Voir un exemple de ce qui se passe quand on choisit un personnage.
    Voir un exemple du résultat une fois le message posté.

    3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


    Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires qui sont inclus dans la feuille rp et il est possible de personnaliser l'apparence de chacun des champs personnalisés, tel que vu dans l'exemple précédent (l'inventaire était différents des autres champs).

    4. Apparence avec 2 profils


    Dans vos messages normaux, vous verrez votre profil joueur et votre message.
    Dans vos messages RP, vous verrez votre profil joueur, votre profil personnage et votre message.
    C'est un tout inclus !
    Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka.

    5. Modifier les données des personnages avec une Google Sheet


    Vous utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes les données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
    L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
    Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
    S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.


    Donc en gros


    La Version 1 est plutôt pour ceux d'entre vous qui auraient des profils assez stables qui ne changent pas beaucoup. Ou, si les informations changent, il faut qu'elles changent partout sur le forum.
    La mise en place se fait assez facilement et cela ne dérange pas du tout le codage de votre forum. Vous pourriez avoir un profil ou un message totalement codé et quand même installer ce système sans difficultés.

    La Version 2 est plutôt pour ceux d'entre vous qui auraient des profils personnages dont les informations changeraient beaucoup et/ou qui préféreraient suivre la progression du personnage à travers le RP. Par exemple, s'il y a une barre d'expérience, une barre de vie, un inventaire, etc., cette version est plus pour vous.
    La mise en place se met relativement facilement, mais je suggère que vous ayez quelques connaissances en codage pour mieux personnaliser la fiche de RP.

    Dans les 2 cas, l'action à poser par le membre est extrêmement simple, il suffit de sélectionner son personnage et de mettre à jour la Google Sheet si c'est nécessaire.


    Je peux mettre quoi comme champ personnalisé exactement?

    N'importe quoi. Littéralement.

    Vous voulez mettre des badges?
    On mettrait ceci dans la Google Sheet dans le champ "Badges" :
    Code:
    <img src="lien Badge1" /><img src="lien Badge2" /><img src="lien Badge3" />

    Vous voulez mettre des pokéballs avec des infobulles? Pourquoi pas !
    On mettrait ceci dans la Google Sheet dans le champ "Pokéballs" :
    Code:
    <span class="infobulle_poke"><img src="image pokéball 1" /><span class="poke">Pikachu</span></span> <span class="infobulle_poke"><img src="image pokéball 2" /><span class="poke">Rattata</span></span>
    Et un petit CSS pour faire fonctionner l'infobulle.

    Vous voulez une barre de vie?
    On mettrait ceci dans la Google Sheet dans le champ "PV" :
    Code:
    <span class="barrepv"><span class="width: 43%;"></span></span> 43/100
    Et on mettrait ceci dans le CSS :
    Code:
    /*La barre de vie*/
    .barrepv {
      display: inline-block;
      width: 100px;
      height: 10px;
      border: 1px solid #fff;
      border-radius: 2px;
    }
    /*La partie remplie de la barre de vie*/
    .barrepv > span {
      display: inline-block;
      background-color: red;
    }

    Tant que vous avez de l'imagination, vous devriez vous débrouiller Razz

    Sur ce, je vous présente les Version 1 et Version 2 dans les deux prochains messages Wink

    Enjoy \o/


    Dernière édition par Onyx le Mar 23 Avr 2019 - 0:31, édité 4 fois



    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 21 Avr 2019 - 16:46

    Version 1



    Alors, le multicompte !

    Cette version s'apparente plus à la méthode que j'ai vu sur Esquisse. Voilà ce que ce que cette version vous permettra de faire :

    1. Choisir dans un menu déroulant le personnage qui doit poster lorsque vous postez votre RP.


    Bref, on fait un choix et la petite ligne de code magique s'ajoute à votre message.
    Voir un exemple de choix de personnages.
    Voir un exemple de ce qui ce passe une fois le choix fait.
    Note : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

    2. Avoir les informations du personnage choisi qui remplacent les vôtres


    Dans les sujets où vous avez choisi un personnage avant de poster, vous verrez votre avatar, votre pseudo, la couleur de votre groupe, votre rang et votre image de rang être remplacés par ceux du personnage.
    Votre pseudo en tant que joueur sera déplacé ailleurs (en dessous du pseudo du personnage sur l'exemple), mais quand même là pour dire qui est le propriétaire de ce personnage.
    Voir un exemple.

    3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


    Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires et il est possible de personnaliser l'apparence de chacun des champs personnalisés.
    Voir un exemple.
    Note : Sur l'exemple, on ne voit pas les champs "normaux" du joueur parce que je ne voulais pas les voir en même temps que les champs personnalisés. Je les ai cachés pour qu'ils apparaissent seulement au survol de l'avatar. Il y a un tas de LS sur ça, je vous laisse fouiller si ça vous intéresse.

    4. Avoir 2 profils distincts si vous préférez cette option


    Disons que, à la place d'avoir les informations sur personnage qui remplace celles du joueur, vous préférez avoir un profil joueur et un profil personnage, puis voir les 2 apparaître en même temps, c'est aussi une option qui vous sera proposée.
    Si les instructions mentionnent "2 profils distincts", cela s'adresse à vous.
    Voir un exemple.
    Par contre, ce LS est uniquement pour faire fonctionner le système et mettre en forme la partie personnage. Pour la partie profil du joueur, c'est à vous de le faire, quitte à aller voir les autres LS de profil.

    Tout cela grâce à un javascript sur lequel j'ai versé des larmes de sang qui fait tout (ou presque) le travail pour vous \o/


    Vous avez 2 options pour ce qui est de comment le faire fonctionner.

    1. En créant une base de données à l'aide de Google Sheet


    Vous utilisez une Google Sheet (les instructions seront données plus bas) pour enregistrer toutes vos données pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
    L'avantage, c'est que plusieurs personnes peuvent modifier le fichier en même temps sans nuire aux autres et que les membres peuvent eux-mêmes modifier leurs informations.
    Vous avez une option qui vous permet de "protéger" certains plages de la Google Sheet pour s'assurer que vos membres puissent modifier seulement ce qu'ils ont le droit de modifier, ce qui évite que X efface les données de Y par accident.
    S'il y a un accident ou une bêtise, il est possible de reculer en arrière en restaurant des données antérieures.

    2. En créant une base de données directement dans le javascript


    L'information est enregistrée directement dans le javascript lui-même pour chaque personnage et le javascript va y chercher l'information qu'il a besoin pour son travail.
    L'avantage, c'est que seuls les Admins pourront le modifier.
    Le désavantage, c'est que seuls les Admins pourront le modifier (dépendamment du nombre de membres et de modifications à faire, cela peut rapidement devenir ardu).
    Si vous n'aimez pas utiliser Google Sheet ou des sites externes, c'est une solution comme une autre.


    Bref, allons y !


    1. Créer la base de donnée sur Google Sheet


    1.1 Créer une Google Sheet


    Tapez "Google Sheet" sur google, le reste est assez intuitif u_u


    1.2 Créer les colonnes


    Il est très important de respecter quelques règles :
    - Les colonnes commencent à la colonne A et la première ligne qui contient l'en-tête des colonnes doit être sur la ligne 1.
    - La 1ère colonne est le nom du joueur nommée.
    - La 2ème colonne est le nom du personnage joué par le joueur.
    - La 3ème colonne est l'avatar du personnage nommée.
    - La 4ème colonne est la couleur du groupe du personnage.
    - La 5ème colonne est le le rang du personnage.
    - La 6ème colonne est l'image de rang du personnage.

    Ensuite, vous pouvez ajouter autant de champs personnalisés que vous le souhaitez.
    Le nom dans l'entête des champs personnalisés doivent être différents les uns des autres.
    Je vous en prie, ne mettez pas d'apostrophe ou de " dans le titre de vos champs.
    Voir un exemple

    Oui, mais je veux que la couleur du groupe reste celle du joueur. Je n'ai pas de rang. J'ai un rang image, mais pas de rang texte ou l'inverse.
    Vous devez quand même créer ces 6 colonnes dans cet ordre avec un nom d'en-tête. Si certaine colonnes ne sont pas utiles, ne mettez simplement pas d'information dans les lignes des personnages.
    Voir un exemple


    1.3 Remplir le tableau


    Vous remplissez le tableau ligne par ligne.
    Chaque personnage a sa propre ligne.
    Si un joueur a 3 personnages, il y aura 3 lignes commençants par son pseudo, soit une pour chaque personnage.
    Voir un exemple

    Pour l'image de l'avatar et du rang, on vous demande de mettre l'url de l'image.
    Par contre, si un de vos champs personnalisés contient une image, une infobulle ou autre, vous pouvez mettre directement le code html. Par exemple, si j'ai un champ qui est supposé contenir des badges, j'y mettrais :
    Code:
    <img src="url 1er badge" /><img src="url 2e badge" /><img src="url 3e badge" />
    Vous pouvez donc mettre pas mal n'importe quoi.


    1.4 Publier le Google Sheet


    Vous cliquez sur "Ficher", puis sur "Publier sur le web".
    On vous donnera un lien, mais vous ne l'utiliserez pas.


    1.5 Partager la Google Sheet


    Vous cliquez sur "Partager", sur "Avancé", puis vous sélectionnez "Accès en écriture à toute personne disposant du lien".
    Vous pouvez donner le lien à vos membres validés pour qu'ils puissent l'utiliser.


    1.6 Protéger la feuille


    Vous devez protéger votre feuille pour s'assurer que certains ne fassent pas de bêtises.
    Pour protéger votre feuille, vous cliquez simplement sur "Données", puis sur "Feuilles et plages protégées".
    On vous donnera le choix de protéger une plage de données ou une feuille. Vous choisissez "Feuille" et vous choisissez la feuille active.

    Puis, vous cochez "Exclure certaines cellules". On choisit d'exclure la plage que les membres pourront modifier.
    Dans cet exemple, je choisis d'exclure la plage C2:J5 puisque je ne veux pas que les joueurs puissent modifier leurs noms (colonne A et B) et je ne veux pas qu'ils puissent modifier l'en-tête (ligne 1).
    Normalement, à chaque fois que vous rajoutez une ligne (donc un nouveau personnage validé), il faudra revenir modifier la plage pour rajouter la ligne du personnage (ici, cela deviendrait C2:J6) par exemple.

    Puis, vous cliquez sur "Définir les autorisations". Vous aurez cette fenêtre qui apparaîtra.
    Vous cliquez sur "Vous uniquement" et vous choisissez l'option "Personnaliser..."
    Cela vous donnera cette fenêtre (le gris flou, c'est mon nom et mon adresse email que j'ai cachés) et vous pouvez ajouter les utilisateurs qui ont le droit de modifier en dehors des plages (généralement, nous ajoutez vos Admins).

    Si vous pensez que certains membres ne savent pas toucher à un clavier sans le faire exploser ou que certains membres mal intentionnés pourraient modifier les données d'un autre joueur, vous pouvez aussi rajouter des protections sur des plages.
    Par exemple, disons que je voudrais que seulement moi, les Admins et Joueur X puisse modifier les personnages de Joueur X, je pourrais protéger ses données de la même façon que plus haut, mais en sélectionnant "Plage" à la place de "Feuille".
    C'est sûr que cela pourrait être long à installer si vous avez beaucoup de joueurs, mais cela peut en valoir la peine parfois. C'est vous qui décidez ^^


    2. Installer le javascript


    2.1 Javascript pour ceux qui veulent utiliser une Google Sheet



    On installe ce javascript. Il faut sélectionner "sur toutes les pages" :
    Code:
    // lacle EST LA SEULE CHOSE À MODIFIER.
    var lacle = "Clé que je vous expliquerai plus bas sur comment obtenir";


    var lienatelecharger = "https://docs.google.com/spreadsheets/d/" + lacle + "/pubhtml";

    // Validation pour savoir si la suite est nécessaire ou pas
    if (window.location.pathname == "/post" || window.location.pathname.indexOf("/t") > -1) {
      $(function(){
        var ifpostpositif = 0;
        var ifsujetpositif = 0;
        if (_userdata.user_id > -1) {
          if ($('#text_editor_textarea').length > 0) {
            ifpostpositif = ifpostpositif + 1;
          }
        }
        if (window.location.pathname.indexOf("/t") > -1) {
          if ($('.multicompte').length > 0) {
            ifsujetpositif = ifsujetpositif + 1;
          }
        }
       
        // Autre validation pour savoir si la suite est nécessaire ou pas
        if (ifpostpositif > 0 || ifsujetpositif > 0) {

         
          // On met les donnes dans un tableau
          $.get(lienatelecharger, function (data) {
            var ledata = $(".waffle:first tbody:first", data);
            var nblignes = ledata.find('tr').length;
            var nbcolones = ledata.find('tr:first td').length;
            var personnages = new Array();
            for (var i=0; i < nblignes; i++) {
              personnages[i] = new Array();
              for(var j=0; j < nbcolones; j++) {
                personnages[i][j] = ledata.find('tr:eq('+i+')').find('td:eq('+j+')').text();
              }
            }
           
            // On entre dans la partie pour selectionner les personnages quand on poste
            if (ifpostpositif > 0) {
             
              // Si on a un personnage
              var sipseudo = 0;
                for (i=0; i < personnages.length; i++) {
                  if (personnages[i][0] == _userdata.username) {
                    sipseudo = sipseudo + 1;
                  }
                }
              if (sipseudo > 0) {
               
                // On crée la balise select
                var labaliseamettre = '<div class="choisirmulticomptebloc"><span>Choisissez votre personnage : <span/><select id="selectmulticompte"><option value="Non">Choisir un personnage</option></select></div>';
                $('input[name="post"]').after(labaliseamettre);
               
                //On ajoute les options dans la balise
                for (i=0; i < nblignes; i++) {
                  if (personnages[i][0] == _userdata.username) {
                    var optionajout = '<option value="'+personnages[i][1]+'">'+personnages[i][1]+'</option>';
                    $('#selectmulticompte').append(optionajout);
                  }
                }
               
                // On ajoute le code dans le message à poster
                $('#selectmulticompte').change(function() {
                  var optionchoisie = $('#selectmulticompte').find('option:selected:first').val();
                  var codemulticompte = '<div class="multicompte" data-perso="'+optionchoisie+'"></div>';
                  var lemessage = $('#text_editor_textarea').sceditor('instance').val();
                  if (optionchoisie != "Non") {
                    if (lemessage.search('data-perso') > -1) {
                      var nomdejala = lemessage.split('"', 4);
                      lemessage = lemessage.replace(nomdejala[3], optionchoisie);
                    }
                    else {
                      lemessage = codemulticompte + lemessage;
                    }
                    $('#text_editor_textarea').sceditor('instance').val(lemessage);
                  }
                  else {
                    if (lemessage.search('data-perso') > -1) {
                      var nomdejala = lemessage.split('"', 4);
                      var machinaenlever = '<div class="multicompte" data-perso="'+nomdejala[3]+'"></div>';
                      lemessage = lemessage.replace(machinaenlever, '');
                      $('#text_editor_textarea').sceditor('instance').val(lemessage);
                    }
                  }
                });
              }
            }
           
           
            // On entre dans la partie pour mettre les informations dans le profil
            if (ifsujetpositif > 0) {
             
              // Pour chaque code de multicompte
              $('.multicompte').each(function() {
               
                // On regarde la ligne qui contient le profil et le message
                var multipost = $(this).closest('.multi_post');
                // On sélectionne l'endroit où est le pseudo du joueur
                var pseudopost = multipost.find('.multi_pseudo:first a:first');
                // On prend le pseudo du joueur
                var pseudoposttext = pseudopost.text();
                // On sélectionne l'avatar du joueur
                var avatarpost = multipost.find('.multi_avatar:first img:first');
                // On prend l'avatar du personnage si il a été mis manuellement
                var avatarmess = $(this).data('avatar');
                // On trouve le nom du personnage
                var lenomduperso = $(this).data('perso');
                // On met le nom du personnage à la place du nom du joueur
                pseudopost.find('strong:first').html(lenomduperso);
                // On met le pseudo du joueur en bas de l'avatar
                multipost.find('.multi_pseudoplayer:first').prepend(pseudoposttext);
               
                // On regarde si le nom du personnage est dans la banque de données
                var labonneligne;
                for (i=0; i < nblignes; i++) {
                  if (personnages[i][1] == lenomduperso) {
                    labonneligne = i;
                  }
                }
                if (labonneligne > 0) {
                 
                  // On met l'image du personnage à la place de l'avatar
                  if (personnages[labonneligne][2].length > 0) {
                    avatarpost.attr('src', personnages[labonneligne][2]);
                  }
                  // On met la couleur du personnage sur le nom du personnage
                  if (personnages[labonneligne][3].length > 0) {
                    pseudopost.find('span:first').css('color', personnages[labonneligne][3]);
                  }
                  // On met le rang du personnage à la place du rang
                  if (personnages[labonneligne][4].length > 0) {
                    multipost.find('.multi_rang:first').text(personnages[labonneligne][4]);
                  }
                  // On met l'image de rang du personnage à la place de l'image de rang
                  if (personnages[labonneligne][5].length > 0) {
                    multipost.find('.multi_rangimg:first img:first').attr('src', personnages[labonneligne][5]);
                  }
                 
                 
                  // On ajoute tous les autres champs
                  for (i=6; i < nbcolones; i++) {
                    if (personnages[labonneligne][i].length > 0) {
                      var classchamp = personnages[0][i].replace(" ", "");
                      classchamp = "multi_" + classchamp;
                      var champajout = '<div class="multi_champ '+classchamp+'"><span class="multi_label">'+personnages[0][i]+'</span><span class="multi_sep"> : </span><span class="multi_content">'+personnages[labonneligne][i]+'</span></div>';
                      multipost.find('.multi_leschamps:first').append(champajout);
                    }
                  }
                }
               
                // Si le personnage a mis un avatar dans la balise on le met à la place de l'avatar
                if (avatarmess) {
                  avatarpost.attr('src', avatarmess);
                }
               
               
              });
            }
          });
        }
      });
    }

    Au tout début, on a ceci :
    Code:
    var lacle = "Clé que je vous expliquerai plus bas sur comment obtenir";

    C'est la seule chose à modifier.
    Pour obtenir la clé, vous devez tout d'abord prendre le lien de partage de la page Google Sheet mentionné plus haut. Il ressemble à ceci :
    Code:
    https://docs.google.com/spreadsheets/d/1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI/edit?usp=sharing

    ou des fois :

    https://docs.google.com/spreadsheets/d/e/1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI/edit?usp=sharing

    La clé correspond à ce qui est entre :
    Code:
    https://docs.google.com/spreadsheets/d/
    et
    /edit?upscharing

    ou parfois

    https://docs.google.com/spreadsheets/d/e/
    et
    /edit?upscharing

    Bref, dans mon cas d'exemple, il s'agirait du :
    Code:
    1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI

    C'est votre clé, vous pouvez la mettre dans le javascript, ce qui donnerait quelque chose comme ceci :
    Code:
    var lacle = "1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI";



    2.1.1 Javascript pour ceux qui veulent 2 profils distincts
    On utilise Google Sheet également, donc vous avez déjà les instructions. La seule différence, c'est que le javascript change un peu.

    On installe ce javascript. Il faut sélectionner "sur toutes les pages" :
    Code:
    // lacle EST LA SEULE CHOSE À MODIFIER.
    var lacle = "Clé que je vous expliquerai plus bas sur comment obtenir";


    var lienatelecharger = "https://docs.google.com/spreadsheets/d/" + lacle + "/pubhtml";

    // Validation pour savoir si la suite est nécessaire ou pas
    if (window.location.pathname == "/post" || window.location.pathname.indexOf("/t") > -1) {
      $(function(){
        var ifpostpositif = 0;
        var ifsujetpositif = 0;
        if (_userdata.user_id > -1) {
          if ($('#text_editor_textarea').length > 0) {
            ifpostpositif = ifpostpositif + 1;
          }
        }
        if (window.location.pathname.indexOf("/t") > -1) {
          if ($('.multicompte').length > 0) {
            ifsujetpositif = ifsujetpositif + 1;
          }
        }
       
        // Autre validation pour savoir si la suite est nécessaire ou pas
        if (ifpostpositif > 0 || ifsujetpositif > 0) {

         
          // On met les donnes dans un tableau
          $.get(lienatelecharger, function (data) {
            var ledata = $(".waffle:first tbody:first", data);
            var nblignes = ledata.find('tr').length;
            var nbcolones = ledata.find('tr:first td').length;
            var personnages = new Array();
            for (var i=0; i < nblignes; i++) {
              personnages[i] = new Array();
              for(var j=0; j < nbcolones; j++) {
                personnages[i][j] = ledata.find('tr:eq('+i+')').find('td:eq('+j+')').text();
              }
            }
           
            // On entre dans la partie pour selectionner les personnages quand on poste
            if (ifpostpositif > 0) {
             
              // Si on a un personnage
              var sipseudo = 0;
                for (i=0; i < personnages.length; i++) {
                  if (personnages[i][0] == _userdata.username) {
                    sipseudo = sipseudo + 1;
                  }
                }
              if (sipseudo > 0) {
               
                // On crée la balise select
                var labaliseamettre = '<div class="choisirmulticomptebloc"><span>Choisissez votre personnage : <span/><select id="selectmulticompte"><option value="Non">Choisir un personnage</option></select></div>';
                $('input[name="post"]').after(labaliseamettre);
               
                //On ajoute les options dans la balise
                for (i=0; i < nblignes; i++) {
                  if (personnages[i][0] == _userdata.username) {
                    var optionajout = '<option value="'+personnages[i][1]+'">'+personnages[i][1]+'</option>';
                    $('#selectmulticompte').append(optionajout);
                  }
                }
               
                // On ajoute le code dans le message à poster
                $('#selectmulticompte').change(function() {
                  var optionchoisie = $('#selectmulticompte').find('option:selected:first').val();
                  var codemulticompte = '<div class="multicompte" data-perso="'+optionchoisie+'"></div>';
                  var lemessage = $('#text_editor_textarea').sceditor('instance').val();
                  if (optionchoisie != "Non") {
                    if (lemessage.search('data-perso') > -1) {
                      var nomdejala = lemessage.split('"', 4);
                      lemessage = lemessage.replace(nomdejala[3], optionchoisie);
                    }
                    else {
                      lemessage = codemulticompte + lemessage;
                    }
                    $('#text_editor_textarea').sceditor('instance').val(lemessage);
                  }
                  else {
                    if (lemessage.search('data-perso') > -1) {
                      var nomdejala = lemessage.split('"', 4);
                      var machinaenlever = '<div class="multicompte" data-perso="'+nomdejala[3]+'"></div>';
                      lemessage = lemessage.replace(machinaenlever, '');
                      $('#text_editor_textarea').sceditor('instance').val(lemessage);
                    }
                  }
                });
              }
            }
           
           
            // On entre dans la partie pour mettre les informations dans le profil
            if (ifsujetpositif > 0) {
             
              // Pour chaque code de multicompte
              $('.multicompte').each(function() {
               
                // On regarde la ligne qui contient le profil et le message
                var multipost = $(this).closest('.multi_post');
                // On prend l'avatar du personnage si il a été mis manuellement
                var avatarmess = $(this).data('avatar');
                // On trouve le nom du personnage
                var lenomduperso = $(this).data('perso');
                // On met le nom du personnage
                multipost.find('.multi_pseudo:first').append(lenomduperso);
               
                // On regarde si le nom du personnage est dans la banque de données
                var labonneligne;
                for (i=0; i < nblignes; i++) {
                  if (personnages[i][1] == lenomduperso) {
                    labonneligne = i;
                  }
                }
                if (labonneligne > 0) {

                 
                  // On met l'avatar du personnage
                  if (personnages[labonneligne][2].length > 0) {
                    multipost.find('.multi_avatar:first').append('<img src="'+personnages[labonneligne][2]+'" />');
                  }
                  // On met la couleur du personnage sur le nom du personnage
                  if (personnages[labonneligne][3].length > 0) {
                    multipost.find('.multi_pseudo:first').css('color', personnages[labonneligne][3]);
                  }
                  // On met le rang du personnage
                  if (personnages[labonneligne][4].length > 0) {
                    multipost.find('.multi_rang:first').text(personnages[labonneligne][4]);
                  }
                  // On met l'image de rang du personnage
                  if (personnages[labonneligne][5].length > 0) {
                    multipost.find('.multi_rangimg:first').append('<img src="'+personnages[labonneligne][5]+'" />');
                  }
                 
                 
                  // On ajoute tous les autres champs
                  for (i=6; i < nbcolones; i++) {
                    if (personnages[labonneligne][i].length > 0) {
                      var classchamp = personnages[0][i].replace(" ", "");
                      classchamp = "multi_" + classchamp;
                      var champajout = '<div class="multi_champ '+classchamp+'"><span class="multi_label">'+personnages[0][i]+'</span><span class="multi_sep"> : </span><span class="multi_content">'+personnages[labonneligne][i]+'</span></div>';
                      multipost.find('.multi_leschamps:first').append(champajout);
                    }
                  }
                }
               
                // Si le personnage a mis un avatar dans la balise on le met à la place de l'avatar
                if (avatarmess) {
                  avatarpost.attr('src', avatarmess);
                }
               
               
              });
            }
          });
        }
      });
    }



    2.2 Javascript pour ceux qui veulent sauvegarder leurs informations dans le javascript



    On installe ce javascript. Il faut sélectionner "sur toutes les pages" :
    Code:
    // Validation pour savoir si la suite est nécessaire ou pas
    if (window.location.pathname == "/post" || window.location.pathname.indexOf("/t") > -1) {
      $(function(){
        var ifpostpositif = 0;
        var ifsujetpositif = 0;
        if (_userdata.user_id > -1) {
          if ($('#text_editor_textarea').length > 0) {
            ifpostpositif = ifpostpositif + 1;
          }
        }
        if (window.location.pathname.indexOf("/t") > -1) {
          if ($('.multicompte').length > 0) {
            ifsujetpositif = ifsujetpositif + 1;
          }
        }
       
        // Autre validation pour savoir si la suite est nécessaire ou pas
        if (ifpostpositif > 0 || ifsujetpositif > 0) {

         
          // On met les donnes dans un tableau
          var personnages = [
            ['Nom du joueur', 'Nom du personnage', 'Avatar', 'Rang', 'Image Rang', 'Champ 1', 'Champ 2'],
            ['Joueur 1', 'Perso1 de Joueur1', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
            ['Joueur 1', 'Perso2 de Joueur1', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
            ['Joueur 2', 'Perso1 de Joueur2', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
            ['Joueur 3', 'Perso1 de Joueur3', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
          ];
          var nblignes = personnages.length;
          var nbcolones = personnages[0].length;
           
            // On entre dans la partie pour selectionner les personnages quand on poste
            if (ifpostpositif > 0) {
             
              // Si on a un personnage
              var sipseudo = 0;
                for (i=0; i < personnages.length; i++) {
                  if (personnages[i][0] == _userdata.username) {
                    sipseudo = sipseudo + 1;
                  }
                }
              if (sipseudo > 0) {
               
                // On crée la balise select
                var labaliseamettre = '<div class="choisirmulticomptebloc"><span>Choisissez votre personnage : <span/><select id="selectmulticompte"><option value="Non">Choisir un personnage</option></select></div>';
                $('input[name="post"]').after(labaliseamettre);
               
                //On ajoute les options dans la balise
                for (i=0; i < nblignes; i++) {
                  if (personnages[i][0] == _userdata.username) {
                    var optionajout = '<option value="'+personnages[i][1]+'">'+personnages[i][1]+'</option>';
                    $('#selectmulticompte').append(optionajout);
                  }
                }
               
                // On ajoute le code dans le message à poster
                $('#selectmulticompte').change(function() {
                  var optionchoisie = $('#selectmulticompte').find('option:selected:first').val();
                  var codemulticompte = '<div class="multicompte" data-perso="'+optionchoisie+'"></div>';
                  var lemessage = $('#text_editor_textarea').sceditor('instance').val();
                  if (optionchoisie != "Non") {
                    if (lemessage.search('data-perso') > -1) {
                      var nomdejala = lemessage.split('"', 4);
                      lemessage = lemessage.replace(nomdejala[3], optionchoisie);
                    }
                    else {
                      lemessage = codemulticompte + lemessage;
                    }
                    $('#text_editor_textarea').sceditor('instance').val(lemessage);
                  }
                  else {
                    if (lemessage.search('data-perso') > -1) {
                      var nomdejala = lemessage.split('"', 4);
                      var machinaenlever = '<div class="multicompte" data-perso="'+nomdejala[3]+'"></div>';
                      lemessage = lemessage.replace(machinaenlever, '');
                      $('#text_editor_textarea').sceditor('instance').val(lemessage);
                    }
                  }
                });
              }
            }
           
           
            // On entre dans la partie pour mettre les informations dans le profil
            if (ifsujetpositif > 0) {
             
              // Pour chaque code de multicompte
              $('.multicompte').each(function() {
               
                // On regarde la ligne qui contient le profil et le message
                var multipost = $(this).closest('.multi_post');
                // On sélectionne l'endroit où est le pseudo du joueur
                var pseudopost = multipost.find('.multi_pseudo:first a:first');
                // On prend le pseudo du joueur
                var pseudoposttext = pseudopost.text();
                // On sélectionne l'avatar du joueur
                var avatarpost = multipost.find('.multi_avatar:first img:first');
                // On prend l'avatar du personnage si il a été mis manuellement
                var avatarmess = $(this).data('avatar');
                // On trouve le nom du personnage
                var lenomduperso = $(this).data('perso');
                // On met le nom du personnage à la place du nom du joueur
                pseudopost.find('strong:first').html(lenomduperso);
                // On met le pseudo du joueur en bas de l'avatar
                multipost.find('.multi_pseudoplayer:first').prepend(pseudoposttext);
               
                // On regarde si le nom du personnage est dans la banque de données
                var labonneligne;
                for (i=0; i < nblignes; i++) {
                  if (personnages[i][1] == lenomduperso) {
                    labonneligne = i;
                  }
                }
                if (labonneligne > 0) {
                 
                  // On met l'image du personnage à la place de l'avatar
                  if (personnages[labonneligne][2].length > 0) {
                    avatarpost.attr('src', personnages[labonneligne][2]);
                  }
                  // On met la couleur du personnage sur le nom du personnage
                  if (personnages[labonneligne][3].length > 0) {
                    pseudopost.find('span:first').css('color', personnages[labonneligne][3]);
                  }
                  // On met le rang du personnage à la place du rang
                  if (personnages[labonneligne][4].length > 0) {
                    multipost.find('.multi_rang:first').text(personnages[labonneligne][4]);
                  }
                  // On met l'image de rang du personnage à la place de l'image de rang
                  if (personnages[labonneligne][5].length > 0) {
                    multipost.find('.multi_rangimg:first img:first').attr('src', personnages[labonneligne][5]);
                  }
                 
                 
                  // On ajoute tous les autres champs
                  for (i=6; i < nbcolones; i++) {
                    if (personnages[labonneligne][i].length > 0) {
                      var classchamp = personnages[0][i].replace(" ", "");
                      classchamp = "multi_" + classchamp;
                      var champajout = '<div class="multi_champ '+classchamp+'"><span class="multi_label">'+personnages[0][i]+'</span><span class="multi_sep"> : </span><span class="multi_content">'+personnages[labonneligne][i]+'</span></div>';
                      multipost.find('.multi_leschamps:first').append(champajout);
                    }
                  }
                }
               
                // Si le personnage a mis un avatar dans la balise on le met à la place de l'avatar
                if (avatarmess) {
                  avatarpost.attr('src', avatarmess);
                }
               
               
              });
            }
        }
      });
    }

    Pour rajouter/modifier les informations, c'est dans la partie :
    Code:
          // On met les donnes dans un tableau
          var personnages = [
            ['Nom du joueur', 'Nom du personnage', 'Avatar', 'Rang', 'Image Rang', 'Champ 1', 'Champ 2'],
            ['Joueur 1', 'Perso1 de Joueur1', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
            ['Joueur 1', 'Perso2 de Joueur1', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
            ['Joueur 2', 'Perso1 de Joueur2', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
            ['Joueur 3', 'Perso1 de Joueur3', 'Lien avatar', 'Le rang', 'Lien image rang', 'Info du Champ1', 'Info du Champ 2'],
          ];

    Je trouve que c'est assez explicatif... Attention, une virgule manquante, un apostrophe de trop ou un truc qui cloche et le code part en fumée ! (Bref, c'est définitivement pas mon choix XD)


    3. Modifications dans les templates


    Maintenant, vous allez dans le template viewtopic_body.

    3.1 Sélectionner la ligne qui contient à la fois le message et le profil


    On trouve la ligne qui contient le message et le profil.
    Avec phpBB2, c'est une balise "tr". Avec d'autres versions, c'est parfois une balise "div" ou "p".

    Généralement, on y trouve une class qui ressemble à ceci :
    Code:
    post post--{postrow.displayed.U_POST_ID}

    Ce qu'on fait, c'est qu'on ajoute la classe "multi_post" avec ce qu'il y a déjà dans la class.

    Avec phpBB2, on cela passerait donc de ceci:
    Code:
    <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
    À cela :
    Code:
    <tr class="multi_post post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">



    3.2 Pour remplacer le pseudo par le nom du personnage


    On retrouve ceci :
    Code:
    {postrow.displayed.POSTER_NAME}
    Qu'on remplace par cela :
    Code:
    <span class="multi_pseudo">{postrow.displayed.POSTER_NAME}</span>

    3.2.1 Si vous avez l'intention d'avoir 2 profils complètement distincts
    Vous ajoutez simplement ceci là où vous voulez voir le pseudo du personnage :
    Code:
    <span class="multi_pseudo"></span>


    3.3 Pour remplacer votre avatar par l'avatar du personnage


    On retrouve ceci :
    Code:
    {postrow.displayed.POSTER_AVATAR}
    Qu'on remplace par cela :
    Code:
    <span class="multi_avatar">{postrow.displayed.POSTER_AVATAR}</span>

    3.3.1 Si vous avez l'intention d'avoir 2 profils complètement distincts
    Vous ajoutez simplement ceci là où vous voulez voir l'avatar du personnage :
    Code:
    <span class="multi_avatar"></span>


    3.4 Pour remplacer votre rang par le rang du personnage (sautez l'étape si vous n'avez pas de rang)


    On retrouve ceci :
    Code:
    {postrow.displayed.POSTER_RANK}
    Qu'on remplace par cela :
    Code:
    <span class="multi_rang">{postrow.displayed.POSTER_RANK}</span>

    3.4.1 Si vous avez l'intention d'avoir 2 profils complètement distincts
    Vous ajoutez simplement ceci là où vous voulez voir le rang du personnage :
    Code:
    <span class="multi_rang"></span>


    3.5 Pour remplacer votre l'image de rang par l'image de rang du personnage (sautez l'étape si vous n'avez pas d'image de rang)


    On retrouve ceci :
    Code:
    {postrow.displayed.RANK_IMAGE}
    Qu'on remplace par cela :
    Code:
    <span class="multi_rangimg">{postrow.displayed.RANK_IMAGE}</span>

    3.5.1 Si vous avez l'intention d'avoir 2 profils complètement distincts
    Vous ajoutez simplement ceci là où vous voulez voir l'image de rang du personnage :
    Code:
    <span class="multi_rangimg"></span>


    3.6 Pour que votre pseudo apparaisse et qu'on sache que le personnage vous appartient


    On ajoute ceci où on le veut le code pour le pseudo du joueur (que j'ai tendance à mettre directement après le pseudo du personnage)
    Code:
    <div class="multi_pseudoplayer"></div>

    3.6.1 Si vous avez l'intention d'avoir 2 profils complètement distincts
    Ne faites pas cette étape.


    3.6 Pour tous les autres champs personnalisés


    On ajoute ceci où on le veut le bloc des autres champs (bref, tout ce qu'il y a après l'image du rang dans votre tableau/Google Sheet) :
    Code:
    <div class="multi_leschamps"></div>


    4. Mise en forme


    4.1 Mise en forme pour le choix du personnage


    On va ajouter ceci dans votre CSS, juste pour que le choix du personnage soit un peu plus joli :
    Code:
    /*Bloc pour choisir le personnage*/
    .choisirmulticomptebloc {
      margin: 5px auto;
    }
    /*Le texte avant la balise select*/
    .choisirmulticomptebloc > span {
      font-size: 12px;
    }
    /*La balise select pour choisir le personnage*/
    #selectmulticompte {
    }


    4.2 Mise en forme pour le profil


    On ajoute ceci au CSS :
    Code:
    /*Pseudo du personnage*/
    .multi_pseudo {
    }
    /*Votre pseudo*/
    .multi_pseudoplayer {
      font-style: italic;
    }
    /*Avatar du personnage*/
    .multi_avatar img {
    }
    /*Rang du personnage*/
    .multi_rang {
    }
    /*Image du rang du personnage*/
    .multi_rangimg img {
    }


    4.2 Mise en forme pour les champs personnalisés


    On ajoute ceci au CSS :
    Code:
    /*Bloc qui contient tous les champs personnalisés*/
    .multi_leschamps {
    }
    /*Titre de champ personnalisé*/
    .multi_label {
    }
    /*Séparation entre le titre de le contenu du champ personnalisé*/
    .multi_sep {
    }
    /*Contenu du champ personnalisé*/
    .multi_content {
    }

    Si vous vous demandez ce qu'est la séparation entre le titre de le contenu du champ personnalisé, il s'agit tout simplement du " : " entre le nom du champ et le contenu du champ. Si vous ne le voulez pas, un petit display:none fait l'affaire.

    Il est également possible de mettre en forme un champ personnalisé précis.
    Pour cela, chaque champ personnalisé à sa propre class, soit "multi_" associé au titre de l'en-tête du champ. Comme on ne peut pas avoir d'espace dans une classe, c'est tout collé.

    Le champ "Inventaire" aurait donc la class "multi_Inventaire".
    Le champ "Champ 1" aurait donc la class "multi_Champ1"

    Exemple :
    Code:
    /*Le champ inventaire*/
    .multi_Inventaire {
    }
    /*Le titre du champ inventaire*/
    .multi_Inventaire .multi_label {
    }
    /*La séparation du champ inventaire*/
    .multi_Inventaire .multi_sep {
    }
    /*Le contenu du champ inventaire*/
    .multi_Inventaire .multi_content {
    }


    5. Autres informations


    Pour ceux sont veulent un tantinet plus d'explications :

    En gros, le script regarde votre pseudo et vous propose les choix de personnages sur les lignes qui commencent par votre pseudo dans le tableau de données (Google Sheet ou javascript).

    Ensuite, quand on choisit un personnage, il ajoute une ligne de code dans le message qui va permettre de changer l'affichage sur le profil dans les messages.

    La ligne de code ressemble à ceci :
    Code:
    <div class="multicompte" data-perso="Nom du personnage"></div>

    Dans les messages, le script regarde s'il y a la ligne de code mentionnée si haut et si oui, il regarde à quel personnage cela correspond dans le tableau. Puis, il prend les données sur la même ligne du tableau qui contient le personnage et il remplace les informations du joueur par les informations du personnage sur le profil.

    Il y a la possibilité de modifier manuellement l'avatar pour un message précis en modifiant la ligne de code magique comme ceci après avoir sélectionné votre personnage :
    Code:
    <div class="multicompte" data-perso="Nom du personnage" data-avatar="Url de l'avatar"></div>


    Je viens de modifier la page Google Sheet et mon avatar ne s'est pas mis à jour à la seconde près sur le forum!?
    C'est normal. La page publiée qu'on utilise se met à jour aux 5 minutes, donc faites quelque chose d'autre et retournez-y, vous verrez que cela a fonctionné.


    Ça ne fonctionne pas.
    Si vous utilisez la Sauvegarde des messages en cours de Manumanu, sachez que c'est incompatible avec ce LS, désolée.
    Si ce n'est pas à cause de cela, c'est très probable que vous avez sauté une étape en lisant le LS, je vous conseille de le relire.
    Si vous êtes sûr de tout avoir bien fait, vous pouvez poster dans Problème avec mon code, quelqu'un se penchera sur le problème.


    Pfiou ! C'était tout un projet, mais je suis assez fière du résultat final.


    Dernière édition par Onyx le Mar 23 Avr 2019 - 0:28, édité 7 fois



    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 21 Avr 2019 - 16:46

    Version 2



    Le multicompte !

    Okhmhaka avait déjà pensé à cela et avait proposé une astuce juste ici.

    Je reprends cette idée et je vais un pas plus loin.

    Contrairement à la Version 1 (j'espère vous avez dû lire au moins l'introduction è_é), il n'y a pas de ligne de code magique qui s'ajoute à votre message et les informations de votre personnage ne vont pas remplacer celles de votre profil.
    Le principe de cette version, c'est qu'on veut voir la progression du personnage dans le temps. Or, dans la Version 1, dès qu'on change une information dans la Google Sheet, les informations se modifient partout (bref, selon le même principe que les champs du profil FA habituels). Ici, ce n'est pas ce qu'on veut.

    Par conséquent, voilà ce que cette version vous permettra de faire :

    1. Choisir dans un menu déroulant le personnage qui doit poster lorsque vous postez votre RP.


    Bref, le javascript va regarder dans la base de données quels sont vos personnages et vous les propose.
    Voir un exemple de choix de personnages.
    Note : Ce LS semble incompatible avec le javascript du Sauvegarde des messages en cours de Manumanu. Faut choisir l'un ou l'autre, désolée.

    2. Mettre toutes les informations de votre personnage dans une feuille RP avant de poster


    Lorsque vous choisissez un personnage, le javascript magique crée une feuille RP qui contient les informations de vos personnages et y glisse le message que vous venez d'écrire.
    Voir un exemple de ce qui se passe quand on choisit un personnage.
    Voir un exemple du résultat une fois le message posté.

    3. Avoir des champs personnalisables selon les personnages avec mise en forme personnalisée


    Toujours selon le même principe, il peut y avoir des champs personnalisés supplémentaires qui sont inclus dans la feuille rp et il est possible de personnaliser l'apparence de chacun des champs personnalisés, tel que vu dans l'exemple précédent (l'inventaire était différents des autres choix).

    4. Apparence avec 2 profils


    Dans vos messages normaux, vous verrez votre profil joueur et votre message.
    Dans vos messages RP, vous verrez votre profil joueur, votre profil personnage et votre message.
    C'est un tout inclus !
    Je vous conseille de prendre un LS de profil où le profil joueur est très discret, tel que le Mini-profil en bandeau de Okhmhaka.

    Tout cela grâce à un javascript sur lequel j'ai versé des larmes de sang qui fait tout (ou presque) le travail pour vous \o/


    Bref, allons y !


    1. Créer la base de donnée sur Google Sheet


    1.1 Créer une Google Sheet


    Tapez "Google Sheet" sur google, le reste est assez intuitif u_u


    1.2 Créer les colonnes


    Il est très important de respecter quelques règles :
    - Les colonnes commencent à la colonne A et la première ligne qui contient l'en-tête des colonnes doit être sur la ligne 1.
    - La 1ère colonne est le nom du joueur nommée.
    - La 2ème colonne est le nom du personnage joué par le joueur.
    - La 3ème colonne est l'avatar du personnage nommée.
    - La 4ème colonne est la couleur du groupe du personnage.
    - La 5ème colonne est le le rang du personnage.
    - La 6ème colonne est l'image de rang du personnage.

    Ensuite, vous pouvez ajouter autant de champs personnalisés que vous le souhaitez.
    Le nom dans l'entête des champs personnalisés doivent être différents les uns des autres.
    De plus, ils ne doivent pas contenir de " ou d'apostrophe.
    Voir un exemple

    Oui, mais je n'ai pas de rang. J'ai un rang image, mais pas de rang texte ou l'inverse.
    Vous devez quand même créer ces 6 colonnes dans cet ordre avec un nom d'en-tête. Si certaine colonnes ne sont pas utiles, ne mettez simplement pas d'information dans les lignes des personnages.
    Voir un exemple


    1.3 Remplir le tableau


    Vous remplissez le tableau ligne par ligne.
    Chaque personnage a sa propre ligne.
    Si un joueur a 3 personnages, il y aura 3 lignes commençants par son pseudo, soit une pour chaque personnage.
    Voir un exemple

    Pour l'image de l'avatar et du rang, on vous demande de mettre l'url de l'image.

    Par contre, si un de vos champs personnalisés contient une image, une infobulle ou autre, vous pouvez mettre directement le code html. Par exemple, si j'ai un champ qui est supposé contenir des badges, j'y mettrais :
    Code:
    <img src="url 1er badge" /><img src="url 2e badge" /><img src="url 3e badge" />


    1.4 Publier le Google Sheet


    Vous cliquez sur "Ficher", puis sur "Publier sur le web".
    On vous donnera un lien, mais vous ne l'utiliserez pas.


    1.5 Partager la Google Sheet


    Vous cliquez sur "Partager", sur "Avancé", puis vous sélectionnez "Accès en écriture à toute personne disposant du lien".
    Vous pouvez donner le lien à vos membres validés pour qu'ils puissent l'utiliser.


    1.6 Protéger la feuille


    Vous devez protéger votre feuille pour s'assurer que certains ne fassent pas de bêtises.
    Pour protéger votre feuille, vous cliquez simplement sur "Données", puis sur "Feuilles et plages protégées".
    On vous donnera le choix de protéger une plage de données ou une feuille. Vous choisissez "Feuille" et vous choisissez la feuille active.

    Puis, vous cochez "Exclure certaines cellules". On choisit d'exclure la plage que les membres pourront modifier.
    Dans cet exemple, je choisis d'exclure la plage C2:J5 puisque je ne veux pas que les joueurs puissent modifier leurs noms (colonne A et B) et je ne veux pas qu'ils puissent modifier l'en-tête (ligne 1).
    Normalement, à chaque fois que vous rajoutez une ligne (donc un nouveau personnage validé), il faudra revenir modifier la plage pour rajouter la ligne du personnage (ici, cela deviendrait C2:J6) par exemple.

    Puis, vous cliquez sur "Définir les autorisations". Vous aurez cette fenêtre qui apparaîtra.
    Vous cliquez sur "Vous uniquement" et vous choisissez l'option "Personnaliser..."
    Cela vous donnera cette fenêtre (le gris flou, c'est mon nom et mon adresse email que j'ai cachés) et vous pouvez ajouter les utilisateurs qui ont le droit de modifier en dehors des plages (généralement, nous ajoutez vos Admins).

    Si vous pensez que certains membres ne savent pas toucher à un clavier sans le faire exploser ou que certains membres mal intentionnés pourraient modifier les données d'un autre joueur, vous pouvez aussi rajouter des protections sur des plages.
    Par exemple, disons que je voudrais que seulement moi, les Admins et Joueur X puisse modifier les personnages de Joueur X, je pourrais protéger ses données de la même façon que plus haut, mais en sélectionnant "Plage" à la place de "Feuille".
    C'est sûr que cela pourrait être long à installer si vous avez beaucoup de joueurs, mais cela peut en valoir la peine parfois. C'est vous qui décidez ^^


    2. Installer le javascript



    On installe ce javascript. Il faut sélectionner "sur toutes les pages" :
    Code:
    // lacle EST LA SEULE CHOSE À MODIFIER.
    var lacle = "Clé que je vous expliquerai plus bas sur comment obtenir";


    var lienatelecharger = "https://docs.google.com/spreadsheets/d/" + lacle + "/pubhtml";

    // Validation pour savoir si la suite est nécessaire ou pas
    if (window.location.pathname == "/post" || window.location.pathname.indexOf("/t") > -1) {
      $(function(){
        var ifpostpositif = 0;
        if (_userdata.user_id > -1) {
          if ($('#text_editor_textarea').length > 0) {
            ifpostpositif = ifpostpositif + 1;
          }
        }

         
        // On met les donnes dans un tableau
        $.get(lienatelecharger, function (data) {
          var ledata = $(".waffle:first tbody:first", data);
          var nblignes = ledata.find('tr').length;
          var nbcolones = ledata.find('tr:first td').length;
          var personnages = new Array();
          for (var i=0; i < nblignes; i++) {
            personnages[i] = new Array();
            for(var j=0; j < nbcolones; j++) {
              personnages[i][j] = ledata.find('tr:eq('+i+')').find('td:eq('+j+')').text();
            }
          }
             
          // Si on a un personnage
          var sipseudo = 0;
            for (i=0; i < personnages.length; i++) {
              if (personnages[i][0] == _userdata.username) {
                sipseudo = sipseudo + 1;
              }
            }
          if (sipseudo > 0) {
           
            // On crée la balise select
            var labaliseamettre = '<div class="choisirmulticomptebloc"><span>Choisissez votre personnage : <span/><select id="selectmulticompte"><option value="Non">Choisir un personnage</option></select></div>';
            $('input[name="post"]').after(labaliseamettre);
           
            //On ajoute les options dans la balise
            for (i=0; i < nblignes; i++) {
              if (personnages[i][0] == _userdata.username) {
                var optionajout = '<option value="'+personnages[i][1]+'">'+personnages[i][1]+'</option>';
                $('#selectmulticompte').append(optionajout);
              }
            }
               
            // On ajoute le code dans le message à poster
            $('#selectmulticompte').change(function() {
              var optionchoisie = $('#selectmulticompte').find('option:selected:first').val();
              var lemessage = $('#text_editor_textarea').sceditor('instance').val();
             
              // Si on a choisi un personnage
              if (optionchoisie != "Non") {
               
                // On regarde quelle est la ligne du personnage
                var labonneligne;
                for (i=0; i < nblignes; i++) {
                  if (personnages[i][1] == optionchoisie) {
                    labonneligne = i;
                  }
                }
               
               
                // Début feuille RP
                var lafeuillerp = '<div class="feuillerp"><div class="feuillerp_profil">';
               
               
                // Ajout du pseudo à la feuille RP
                lafeuillerp = lafeuillerp + '<div class="feuillerp_pseudo" style="color: '+personnages[labonneligne][3]+';">'+optionchoisie+'</div>';
                // Fin du pseudo
               
                // Ajout de l'avatar à la feuille RP
                lafeuillerp = lafeuillerp + '<img class="feuillerp_avatar" src="'+personnages[labonneligne][2]+'" />';
                // Fin de l'avatar
               
                // Ajout du rang (s'il existe) à la feuille RP
                if (personnages[labonneligne][4].length > 0) {
                  lafeuillerp = lafeuillerp + '<div class="feuillerp_rang">'+personnages[labonneligne][4]+'</div>';
                }
                // Fin du rang
               
                // Ajout du rang image (s'il existe) à la feuille RP
                if (personnages[labonneligne][5].length > 0) {
                  lafeuillerp = lafeuillerp + '<img class="feuillerp_rangimg" src="'+personnages[labonneligne][5]+'" />';
                }
                // Fin du rang image
               
                // Ajout du bloc des champs personnalisés à la feuille RP
                lafeuillerp = lafeuillerp + '<div class="feuillerp_leschamps">';
                // On ajoute tous les autres champs
                for (i=6; i < nbcolones; i++) {
                  if (personnages[labonneligne][i].length > 0) {
                    var classchamp = personnages[0][i].replace(" ", "");
                    classchamp = "feuillerp_" + classchamp;
                    var champajout = '<div class="feuillerp_champ '+classchamp+'"><span class="feuillerp_label">'+personnages[0][i]+'</span><span class="feuillerp_sep"> : </span><span class="feuillerp_content">'+personnages[labonneligne][i]+'</span></div>';
                    lafeuillerp = lafeuillerp + champajout;
                  }
                }
                lafeuillerp = lafeuillerp + '</div>';
                // Fin du bloc des champs personnalisés
               
               
                // On ferme la partie profil et on ouvre la partie message
                lafeuillerp = lafeuillerp + '</div><div class="feuillerp_message">';
               
               
               
                // S'il y a déjà une feuille de personnage dans le message
                if (lemessage.search('<div class="feuillerp_message">') > -1) {
                  // On enlève la feuille rp déjà là
                  var splitmess = lemessage.split('<div class="feuillerp_message">', 2);
                  // On ajoute le message dans la bonne feuille rp
                  lemessage = lafeuillerp + splitmess[1];
                }
               
                // Si 0 feuille rp, on ajoute le message dans la feuille rp
                else {
                  lemessage = lafeuillerp + lemessage + '</div><div class="feuillerp_clear"></div></div>';
                }
               
                // On remet le message modifié sous nos yeux ébahis
                $('#text_editor_textarea').sceditor('instance').val(lemessage);
              }
             
             
              // Si on n'a choisi aucun personnage et qu'il y a une feuille rp, on l'enlève
              else {
                if (lemessage.search('<div class="feuillerp_message">') > -1) {
                  var splitmess = lemessage.split('<div class="feuillerp_message">', 2);
                  var splitmessdeux = splitmess[1].split('</div><div class="feuillerp_clear"></div></div>');
                  lemessage = splitmessdeux[0];
                  $('#text_editor_textarea').sceditor('instance').val(lemessage);
                }
              }
             
            });
          }
        });
      });
    }

    Au tout début, on a ceci :
    Code:
    var lacle = "Clé que je vous expliquerai plus bas sur comment obtenir";

    C'est la seule chose à modifier.
    Pour obtenir la clé, vous devez tout d'abord prendre le lien de partage de la page Google Sheet mentionné plus haut. Il ressemble à ceci :
    Code:
    https://docs.google.com/spreadsheets/d/1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI/edit?usp=sharing

    ou des fois :

    https://docs.google.com/spreadsheets/d/e/1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI/edit?usp=sharing

    La clé correspond à ce qui est entre :
    Code:
    https://docs.google.com/spreadsheets/d/
    et
    /edit?upscharing

    ou parfois

    https://docs.google.com/spreadsheets/d/e/
    et
    /edit?upscharing

    Bref, dans mon cas d'exemple, il s'agirait du :
    Code:
    1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI

    C'est votre clé, vous pouvez la mettre dans le javascript, ce qui donnerait quelque chose comme ceci :
    Code:
    var lacle = "1Z0fEuq8Kz85uoOz52BRvubHb2RzMllVXwt-9M_boiXI";


    2. Mise en forme


    2.1 Mise en forme pour le choix du personnage


    On va ajouter ceci dans votre CSS, juste pour que le choix du personnage soit un peu plus joli :
    Code:
    /*Bloc pour choisir le personnage*/
    .choisirmulticomptebloc {
      margin: 5px auto;
    }
    /*Le texte avant la balise select*/
    .choisirmulticomptebloc > span {
      font-size: 12px;
    }
    /*La balise select pour choisir le personnage*/
    #selectmulticompte {
    }


    2.2 Mise en forme pour la feuille de personnage


    Je tiens à préciser que je n'ai pas de mérite ici, j'ai repris la mise en forme d'une fiche de Okhmhaka que j'ai un peu adaptée. D'ailleurs, vous êtes totalement libre de modifier la mise en forme ^^

    Bref, on ajoute ceci au CSS :
    Code:
    /* FICHE PROFIL PERSONNAGE */
    /*Bloc qui contient le profil et le message*/
    .feuillerp {
      position: relative;
    }
    /*Bloc qui contient le profil du personnage*/
    .feuillerp_profil {
      position: relative;
      z-index: 2;
      width: 170px;
      min-height: 320px;
      background: #c5bdb1;
      border: 1px solid #9f9689;
      float: left;
      text-align: center;
    }
    /*La flèche entre le profil et le message*/
    .feuillerp_profil::after {
      content: '';
      position: absolute;
      display: block;
      z-index: 2;
      left: 170px;
      top: 10px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 15px solid #2c2c2c;
    }
    /*Bloc qui contient le message*/
    .feuillerp_message {
      position: relative;
      z-index: 1;
      min-height: 320px;
      padding: 10px 20px;
      margin-left: 180px;
      background: #eeedeb;
      border: 1px solid #f4f3f0;
      box-shadow: 0px 0px 5px #c5bdb1;
      border-radius: 10px;
      color: #65615b;
      text-align: justify;
    }

    /*Machin à ne pas enlever pretty please*/
    .feuillerp_clear {
      clear: both;
    }

    /*Pseudo du personnage*/
    .feuillerp_pseudo {
      width: 100%;
      height: 30px;
      padding-top: 10px;
      background: #2c2c2c;
      color: #c5bdb1;
      text-shadow: 1px 1px 0px #000000;
      font-size: 20px;
      letter-spacing: -2px;
      text-align: center;
      font-family: lucida calligraphy, tahoma;
      font-weight: bold;
    }
    /*Avatar du personnage*/
    .feuillerp_avatar {
    }
    /*Rang du personnage*/
    .feuillerp_rang {
      position: relative;
      z-index: 3;
      width: 90%;
      height: 20px;
      margin: -15px auto 0 auto;
      background: #262626;
      text-transform: uppercase;
      color: #75716b;
      font-size: 11px;
      box-shadow: 0px 0px 2px #000000;
      text-align: center;
      padding-top: 3px;
    }
    /*Image du rang du personnage*/
    .feuillerp_rangimg {
      display: inline-block;
      margin: 5px auto;
    }
    /*Bloc qui contient tous les champs personnalisés*/
    .feuillerp_leschamps {
      width: 95%;
      margin: auto;
      font-size: 12px;
      color: #65615b;
      text-align: left;
    }
    /*Titre d'un champ personnalisé*/
    .feuillerp_label {
      font-family: arial black;
      color: #2c2c2c;
    }
    /*Séparation entre le titre et le contenu d'un champ personnalisé*/
    .feuillerp_sep {
      font-family: arial black;
      color: #2c2c2c;
    }
    /*Contenu d'un champ personnalisé*/
    .feuillerp_content {
    }


    2.3 Mise en forme pour les champs personnalisés


    Il est déjà dans le CSS précédent, il s'agit de cette partie :
    Code:
    /*Bloc qui contient tous les champs personnalisés*/
    .feuillerp_leschamps {
      width: 95%;
      margin: auto;
      font-size: 12px;
      color: #65615b;
      text-align: left;
    }
    /*Titre d'un champ personnalisé*/
    .feuillerp_label {
      font-family: arial black;
      color: #2c2c2c;
    }
    /*Séparation entre le titre et le contenu d'un champ personnalisé*/
    .feuillerp_sep {
      font-family: arial black;
      color: #2c2c2c;
    }
    /*Contenu d'un champ personnalisé*/
    .feuillerp_content {
    }

    Si vous vous demandez ce qu'est la séparation entre le titre de le contenu du champ personnalisé, il s'agit tout simplement du " : " entre le nom du champ et le contenu du champ. Si vous ne le voulez pas, un petit display:none fait l'affaire.

    Il est également possible de mettre en forme un champ personnalisé précis.
    Pour cela, chaque champ personnalisé à sa propre class, soit "feuillerp_" associé au titre de l'en-tête du champ. Comme on ne peut pas avoir d'espace dans une classe, c'est tout collé.

    Le champ "Inventaire" aurait donc la class "feuillerp_Inventaire".
    Le champ "Champ 1" aurait donc la class "feuillerp_Champ1"

    Exemple :
    Code:
    /*Le champ inventaire*/
    .feuillerp_Inventaire {
    }
    /*Le titre du champ inventaire*/
    .feuillerp_Inventaire .feuillerp_label {
    }
    /*La séparation du champ inventaire*/
    .feuillerp_Inventaire .feuillerp_sep {
    }
    /*Le contenu du champ inventaire*/
    .feuillerp_Inventaire .feuillerp_content {
    }


    3. Autres informations


    Je viens de modifier la page Google Sheet et mon avatar ne s'est pas mis à jour à la seconde près sur le forum!?
    C'est normal. La page publiée qu'on utilise se met à jour aux 5 minutes, donc faites quelque chose d'autre et retournez-y, vous verrez que cela a fonctionné.


    Ça ne fonctionne pas.
    Si vous utilisez laSauvegarde des messages en cours de Manumanu, sachez que c'est incompatible avec ce LS, désolée.
    Si ce n'est pas à cause de cela, c'est très probable que vous avez sauté une étape en lisant le LS, je vous conseille de le relire.
    Si vous êtes sûr de tout avoir bien fait, vous pouvez poster dans Problème avec mon code, quelqu'un se penchera sur le problème.


    Modifier l'ordre de la feuille RP


    Disons que vous n'aimez pas comment j'ai mis la feuille RP et que vous voudriez inverser des choses. Par exemple, vous voulez mettre le rang an haut de l'avatar ou je ne sais quoi.
    C'est possible !

    Il suffit de regarder cette partie du javascript :
    Code:
                // Ajout du pseudo à la feuille RP
                lafeuillerp = lafeuillerp + '<div class="feuillerp_pseudo" style="color: '+personnages[labonneligne][3]+';">'+optionchoisie+'</div>';
                // Fin du pseudo
               
                // Ajout de l'avatar à la feuille RP
                lafeuillerp = lafeuillerp + '<img class="feuillerp_avatar" src="'+personnages[labonneligne][2]+'" />';
                // Fin de l'avatar
               
                // Ajout du rang (s'il existe) à la feuille RP
                if (personnages[labonneligne][4].length > 0) {
                  lafeuillerp = lafeuillerp + '<div class="feuillerp_rang">'+personnages[labonneligne][4]+'</div>';
                }
                // Fin du rang
               
                // Ajout du rang image (s'il existe) à la feuille RP
                if (personnages[labonneligne][5].length > 0) {
                  lafeuillerp = lafeuillerp + '<img class="feuillerp_rangimg" src="'+personnages[labonneligne][5]+'" />';
                }
                // Fin du rang image
               
                // Ajout du bloc des champs personnalisés à la feuille RP
                lafeuillerp = lafeuillerp + '<div class="feuillerp_leschamps">';
                // On ajoute tous les autres champs
                for (i=6; i < nbcolones; i++) {
                  if (personnages[labonneligne][i].length > 0) {
                    var classchamp = personnages[0][i].replace(" ", "");
                    classchamp = "feuillerp_" + classchamp;
                    var champajout = '<div class="feuillerp_champ '+classchamp+'"><span class="feuillerp_label">'+personnages[0][i]+'</span><span class="feuillerp_sep"> : </span><span class="feuillerp_content">'+personnages[labonneligne][i]+'</span></div>';
                    lafeuillerp = lafeuillerp + champajout;
                  }
                }
                lafeuillerp = lafeuillerp + '</div>';
                // Fin du bloc des champs personnalisés
    Puis vous pouvez mettre les différentes parties dans l'ordre que vous voulez. C'est nice, non?


    Disons que vous voulez... Mettre les champs personnalisés visibles au survol de l'avatar !
    C'est possible \o/ Voir ce petit exemple.
    Il suffit de déplacer le bloc des champs personnalisés directement sous l'avatar dans le javascript.
    Puis, on va remplacer la partie des champs personnalisés dans le CSS par ceci :
    Code:
    /*Le bloc des champs personnalisés*/
    .feuillerp_leschamps {
      position: relative;
      z-index: 2;
      width: 170px;
      height: 320px;
      padding: 5px;
      overflow: auto;
      box-sizing: border-box;
      margin: -320px auto 0px auto;
      background: rgba(0, 0, 0, 0.8);
      opacity: 0;
      color: #c5bdb1;
      transition: 0.5s;
      text-align: left;
    }
    .feuillerp_leschamps:hover {
      opacity: 1;
    }
    /*Titre d'un champ personnalisé*/
    .feuillerp_label {
      font-family: arial black;
      font-weight: bold;
    }
    /*Séparation entre le titre et le contenu d'un champ personnalisé*/
    .feuillerp_sep {
      font-family: arial black;
      font-weight: bold;
    }
    /*Contenu d'un champ personnalisé*/
    .feuillerp_content {
    }


    Enfin, disons que vous voulez que le profil soit à droite et le message à gauche comme sur cet exemple.

    On va modifier un tout petit peu le CSS.
    À la place de ceci :
    Code:
    /*Bloc qui contient le profil et le message*/
    .feuillerp {
      position: relative;
    }
    /*Bloc qui contient le profil du personnage*/
    .feuillerp_profil {
      position: relative;
      z-index: 2;
      width: 170px;
      min-height: 320px;
      background: #c5bdb1;
      border: 1px solid #9f9689;
      float: left;
      text-align: center;
    }
    /*La flèche entre le profil et le message*/
    .feuillerp_profil::after {
      content: '';
      position: absolute;
      display: block;
      z-index: 2;
      left: 170px;
      top: 10px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 15px solid #2c2c2c;
    }
    /*Bloc qui contient le message*/
    .feuillerp_message {
      position: relative;
      z-index: 1;
      min-height: 320px;
      padding: 10px 20px;
      margin-left: 180px;
      background: #eeedeb;
      border: 1px solid #f4f3f0;
      box-shadow: 0px 0px 5px #2c2c2c;
      border-radius: 10px;
      color: #65615b;
      text-align: justify;
    }
    On mettrait cela :
    Code:
    /*Bloc qui contient le profil et le message*/
    .feuillerp {
      position: relative;
    }
    /*Bloc qui contient le profil du personnage*/
    .feuillerp_profil {
      position: relative;
      z-index: 2;
      width: 170px;
      min-height: 320px;
      background: #c5bdb1;
      border: 1px solid #9f9689;
      float: right;
      text-align: center;
    }
    /*La flèche entre le profil et le message*/
    .feuillerp_profil::after {
      content: '';
      position: absolute;
      display: block;
      z-index: 2;
      right: 170px;
      top: 10px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 15px solid #2c2c2c;
    }
    /*Bloc qui contient le message*/
    .feuillerp_message {
      position: relative;
      z-index: 1;
      min-height: 320px;
      padding: 10px 20px;
      margin-right: 180px;
      background: #eeedeb;
      border: 1px solid #f4f3f0;
      box-shadow: 0px 0px 5px #2c2c2c;
      border-radius: 10px;
      color: #65615b;
      text-align: justify;
    }

    Bref, vous pouvez modifier pas mal de chose si vous savez bien manier le CSS Wink

    Je n'ai... plus d'idées, donc je crois que je vais finir ce LS et m'arrêter là XD



    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mar 24 Déc 2019 - 11:26

    Merci beaucoup pour cet énorme projet et LS Onyx ! Du coup je classe ! :heart:



    Anonymous
    Invité

    Mer 25 Déc 2019 - 17:27

    Merci pour le partage !
    Eiv
    Eiv
    MasculinAge : 29Messages : 511

    Jeu 26 Déc 2019 - 5:31

    Sublime même je cherchais un truc du genre il y a longtemps ... dieux merci il n'avais pas trouvez je serais surement décédé a adapté mon design pour l'utilisé pleinement XD



    multi compte - Un seul compte, plusieurs personnages : Choix déroulant (2 versions) Signautopia
    multi compte - Un seul compte, plusieurs personnages : Choix déroulant (2 versions) 472020userbarfanclubdelenthil
    Evalla
    Evalla
    FémininAge : 31Messages : 68

    Ven 21 Fév 2020 - 9:20

    Merci pour ce partage ! Ce système est tout a fait génial !
    XaLis
    XaLis
    FémininAge : 26Messages : 44

    Ven 28 Aoû 2020 - 15:43

    Merci pour le partage, c'est vraiment chouette :) cependant j'ai eu un gros problème lors de l'installation sur mon forum, ça ne fonctionnait pas. Après plusieurs heures de recherche, j'ai remarqué que ça ne marchait que quand le membre était administrateur du forum (wtf?). Vu que je suis sur un fo privé, j'ai passé tout le monde en admin, je m'en fiche. Mais c'est un sérieux problème, je sais pas trop pourquoi ça réagit comme ça (phpbb2 pour info). Quand un non administrateur poste le message, la partie "data-perso='machin'" est supprimé (surement une histoire de sécurité pour forumactif, mais c'est loin d'être pratique). Bref j'ai pas poussé plus loin vu que j'ai trouvé une solution pansement, mais il y a surement une meilleure solution :)
    Mystborn
    Mystborn
    FémininAge : 24Messages : 89

    Sam 23 Avr 2022 - 15:06

    Oh bon sang, merci !
    Sur mon forum, on peut avoir plusieurs personnage sur un seul compte, mais des fois ils sont pas tous ensemble et ce code fonctionne super bien, même pour une glandu en codage comme moi *-*

    Enfin merci <3



    multi compte - Un seul compte, plusieurs personnages : Choix déroulant (2 versions) Mystbo10
    Kaehlyth
    Kaehlyth
    FémininAge : 29Messages : 15

    Sam 30 Avr 2022 - 14:33

    Merci pour le partage .

    Cette astuce est vraiment compliquée. Ca va demander à lire pour comprendre car je déteste google sheet et j'essaie avec javascriipt.
    Merci encore !
    Aryn Eldor
    Aryn Eldor
    MasculinAge : 29Messages : 7

    Dim 12 Juin 2022 - 19:44

    Merci pour ce tuto. Il m'a permis de faire exactement ce que je voulais faire pour mon forum.
    Didi Farl
    Didi Farl
    FémininAge : 33Messages : 351

    Lun 19 Juin 2023 - 11:49

    O M G !

    Un immense merci pour ce code. Il correspond absolument à ce dont j'avais besoin. C'est PARFAIT !

    Au premier abord, il fait un peu peur, mais en réalité, son installation et utilisation est très simple. x)

    GG encore !!!!!!!!





    ★ STEAL ★


    Steampunk, magie, Fantasy, Dieux
    Aryn Eldor
    Aryn Eldor
    MasculinAge : 29Messages : 7

    Jeu 21 Mar 2024 - 22:32

    Je l'ai utilisé sur mon forum (et un peu adapté à mes besoins). Un immense merci à vous ! ^^
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 2:54