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.

-47%
Le deal à ne pas rater :
DOMO DO1032SV – Aspirateur balai 2 en 1
49.99 € 94.98 €
Voir le deal

    Système + et - de la réputation revisité : Compteur de "J'aime"

    Anonymous
    Invité

    Dim 11 Aoû 2013 - 5:55

    Rappel du premier message :

    Bonjour ou bonsoir, bonne nuit, peut-être ? ^^

    Pour mon troisième tuto, je vous propose un système de réputation complétement revisité !


    Introduction



    Vous vous souvenez du + et du - sur le côté des messages comme ici, sur Never-Utopia, et cette jolie barre verte pour les votes positifs et rouges pour les négatifs ? C'est pas très esthétique, pas très personnalisable, n'est-ce pas ? Oh et combien de fois on a oublié de voter après avoir lu un post trop long car il fallait remonter le sujet afin de retrouver nos petits + et nos petits - ?

    Pas très pratique tout ça. :hum: La logique voudrait qu'on puisse voter une fois le post lu et comme ils ne sont pas tous de la même longueur...

    Alors pour les feignants comme moi qui ont la flemme de remonter les sujets, je vais vous montrer comment positionner le système de réputation en bas du message juste au-dessus de la signature (pour celles et ceux qui ne l'ont pas déplacée dans les templates bien sûr). Mais ce n'est pas tout ! Nous allons supprimer ce + et ce - ainsi que cette barre impossible à personnaliser et les remplacer par un système de "J'aime" qui indiquera le nombre de votes positifs reçus.

    Notez que les votes négatifs ne seront plus pris en compte. Pour celles et ceux que cela pourrait gêner, il suffit de se dire que si tu n'aimes pas, tu votes pas. xD Vous vous exprimer en ne vous exprimant pas... (Désolé, je fatigue ! ^^) . C'est beaucoup moins "triste" que de savoir que des personnes n'aiment clairement pas ce qu'on a fait ou dit. Et oui, cela me fait de la peine de recevoir des appréciations négatives, que voulez-vous, je suis un grand sensible. *sort*

    Passons aux choses sérieuses. Voici, en images, ce à quoi vous pouvez vous attendre en suivant ce tutoriel :

    Exemple :

    Attention, il n'y a aucune garantie que ce tutoriel fonctionne si vous avez trop modifié le template viewtopic_body. Vous devez aussi avoir un compte fondateur sur un forum phpBB 2 pour pouvoir modifier le template qui nous intéresse et, bien sûr, avoir activé le système de réputation dans les modules.

    Je vous ai mis l'eau à la bouche ?
    *part se cacher*


    Le Tutoriel


    Javascript

    On va commencer par un copier/coller tout simple pour le début.

    Panneau d'administration > Modules > Gestion des codes Javascript.

    Vérifiez que vous avez activé et enregistré la gestion des codes Javascript. Puis créer un nouveau javascript, mettez le titre que vous voulez, cochez "Sur toutes les pages" ou "Sur les sujets", comme vous voulez, bien qu'en choisissant "Sur les sujets", j'ai eu l'impression que le code chargeait plus lentement alors qu'avec la première option, je n'ai rien remarqué.

    Ensuite collez ce code :

    Code:
    $(function(){
            $(".vote").each(function(){
            $(this).find(".vote-button:first a").html('<img src="ADRESSE DE VOTRE IMAGE POUR LE VOTE POSITIF" alt="Voter" title="Voter" />').click(function(){
            $.get($(this).attr("href"));
            $(this).parent().html('<img src="ADRESSE DE VOTRE IMAGE APPARAISSANT LORSQUE VOUS VOTEZ" alt="Vote enregistré" title="Vote engregistré" />');
            return!1
            });
            $(this).closest("tr.post").find("div.vote_pos").append($(this).find(".vote-button:first a")).append($(this).find(".vote-bar").length?' <div class="vote_count" title="Total des votes">'+$(this).find(".vote-bar").attr("title").replace(/^.*\(([0-9]*) .*?\)$/,"$1"):"")+'</div>';
            $(this).remove()
                      })
                    });
    Et validez. (Ce code JS a été fourni à plusieurs reprises par le staff de forumactif, je l'ai juste un peu adapté donc ne me demandez pas de le modifier, mes connaissances en JS sont quasi nulles contrairement au HTML et CSS où je me débrouille.)
    Je n'ai pas fourni les images donc vous devrez faire les vôtres, il suffira de remplacer les phrases explicatives en capitales dans le code JS par l'url de l’image correspondante. Ici, il s'agit d'une image cliquable du même genre que le "J'aime" de Facebook (ou ce que vous voulez, vous pouvez même remplacer le code de l'image par du HTML histoire de faire sans image pour ceux qui préfèrent le texte et une belle mise en forme via CSS, à vous de jouer avec votre créativité) et d'une autre image qui indique que vous avez cliqué dessus, comme un "J'aime" avec moins d'opacité par exemple.

    Faites attention aux tailles de vos images, elles devront toutes être de la même hauteur pour un alignement optimal (Pareil si vous changer les images par du HTML).


    Template



    Nous allons maintenant placer le système de réputation. Grâce au JS que nous venons d'installer la tâche va être grandement simplifiée, il suffira de mettre une div et une class là où nous souhaitons afficher nos "J'aime".

    Panneau d'administration > Affichage > Templates > viewtopic_body

    Repérez :

    Code:
    <!-- BEGIN switch_signature -->
    et placez

    Code:
    <div class="vote_pos"></div>
    juste au-dessus pour placer le système de vote au-dessus de la signature. Si vous avez bouger la signature, repérez plutôt :

    Code:
    <div>{postrow.displayed.MESSAGE}</div>
    et placez le code que je vous ai donné plus haut, juste après cette partie, cela devrait afficher les votes juste en-dessous des messages.

    Enfin, pour éviter qu'au chargement de la page la bar de vote s'affiche quelques secondes avant que le JS prenne le relais, repérez ceci :

    Code:
    <!-- BEGIN switch_vote_active -->
     <div class="vote gensmall">

    Et remplacez par :

    Code:
    <!-- BEGIN switch_vote_active -->
     <div class="vote gensmall" style="display: none">

    J'ai juste rajouté un display : none afin d'empêcher la bar d'être générée pour que cela fasse plus propre à l'affichage. :)


    CSS



    La dernière étape : la mise en forme via le CSS.

    Panneau d'administration > Affichage > Couleurs > Feuille de style CSS

    Collez ceci :

    Code:
    .vote_pos
    {
      width: 100%; /* permet de prendre toute la largeur du message */
      height: 30px; /* hauteur de toutes vos images à adapter selon les vôtres */
      margin-top: 10px; /* petite marge pour éviter que les votes se collent trop prêt du message */
      text-align: right; /* positionne le bouton de vote et le bouton de vote cliqué sur la droite du message */
    }
    .vote_count /* personnalise le nombre des votes */
    {
      float: left; /* oblige le total des votes à bien s'afficher à gauche des messages, aligné avec le bouton de vote cliquable */
      width: 30px; /* largueur de l'image de fond qui s'affiche sous le total des votes */
      height: 30px; /* hauteur de toutes vos images à adapter selon les vôtres, doit être identique au height du vote_pos */
      padding-top: 6px; /* à modifier selon votre image de fond afin de bien positionner vos chiffres sur la dite image */
      color: #000000; /* la couleur des chiffres du total des votes d'un message */
      font-size: 10px; /* la taille des chiffres du total des votes d'un message */
      font-weight: bold; /* met en gras les chiffres du total des votes d'un message */
      text-align: center; /* centre les chiffres du total des votes d'un message par rapport à l'image de fond si tant est que vous l'ayez bien centrée lors de sa création */
      background-image: url("ADRESSE URL DE VOTRE IMAGE DE FOND DES CHIFFRES DU TOTAL DES VOTES");
      background-repeat: no-repeat; /* empêche que l'image de fond se répète */
    }

    Lisez bien les annotations entre /* */ pour personnaliser le code selon vos besoins, puis supprimez-les, elles risquent de vous empêcher de valider votre css à cause des apostrophes (ou des accents, des virgules, je ne sais plus, je sais juste que j'ai déjà eu des bogs et c'étaient les annotations les responsables ! ><).

    Validez et vous voilà avec un tout nouveau système de réputation !


    Merci d'avoir lu ce tutoriel jusqu'au bout !

    Enfin un crédit pour Never-Utopia serait grandement apprécié si vous utilisez ce système de votes pour l'aide que ce tutoriel vous a - peut-être - apporté et pour le temps que j'ai passé à rédiger ce sujet et à me prendre la tête avec ce JS qui ne fonctionnait pas au départ ! :wall: 

    A vous les studios ! Very Happy

    P.S. : Vous pouvez observer à peu près le même système que je propose dans ce tutoriel sur ce forum officiel de FINAL FANTASY XIV. C'est tout en bas. Si vous avez un compte et êtes connecté, un bouton "Jaime" s'affiche à droite et le vote s'ajoute presque instantanément aux chiffres entre parenthèses à côté du pouce relevé. ;)Je fais de la pub en passant pour le jeu. xD

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Onyx le Sam 5 Mai 2018 - 23:33, édité 7 fois (Raison : Petite amélioration)
    Darkius
    Darkius
    MasculinAge : 36Messages : 65

    Mer 3 Aoû 2016 - 19:26

    merci pour ce tuto :)
    NanoiHime
    NanoiHime
    FémininAge : 25Messages : 566

    Mer 10 Aoû 2016 - 23:57

    mercii



    Anonymous
    Invité

    Lun 10 Oct 2016 - 19:26

    Merci c'est super utile <3
    Dariel
    Dariel
    FémininAge : 54Messages : 69

    Dim 20 Nov 2016 - 0:10

    Semble sympa à 1ère vue... Mais les images e rendu manquent, alors...

    :cow:



    C'est la vie Invité ! Pas le paradis.
    Géranium
    Géranium
    FémininAge : 23Messages : 56

    Dim 15 Jan 2017 - 19:15

    MERCI ! <3
    Vito
    Vito
    MasculinAge : 26Messages : 12

    Mar 11 Avr 2017 - 5:35

    Mrc
    Saik
    Saik
    MasculinAge : 28Messages : 65

    Mer 12 Avr 2017 - 21:25

    merci
    ptite_perle
    ptite_perle
    FémininAge : 60Messages : 127

    Lun 26 Juin 2017 - 18:22

    Merci



    Système + et - de la réputation revisité : Compteur de "J'aime" - Page 3 Signature
    John:
    John:
    MasculinAge : 30Messages : 56

    Lun 17 Juil 2017 - 2:19

    mercii
    wally the bully
    wally the bully
    MasculinAge : 25Messages : 58

    Ven 6 Oct 2017 - 16:51

    in
    Adein
    Adein
    MasculinAge : 33Messages : 46

    Ven 8 Déc 2017 - 10:54

    merci
    avatar
    Sanaa
    FémininAge : 30Messages : 157

    Sam 13 Jan 2018 - 8:55

    Merci !
    Minze
    Minze
    FémininAge : 29Messages : 39

    Sam 24 Mar 2018 - 16:01

    merci !
    Abby Reever
    Abby Reever
    FémininAge : 32Messages : 146

    Sam 5 Mai 2018 - 20:42

    génial ! c'est ce que je cherchais ! Merci !
    avatar
    Sanaa
    FémininAge : 30Messages : 157

    Jeu 12 Juil 2018 - 7:49

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 8:21