Bouton j'aime dans un post

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Bouton j'aime dans un post

Message par fedaykin44 Lun 4 Avr 2016 - 2:35

Détails techniques


Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://castel-caladan.forumactif.org

Description du problème

Bonjour,
Afin de rendre le vote plus claire dans un post, je voudrais modifier l'apparence des boutons.
Je voudrai que les symboles + et - qui sont à droite soit remplacés, le + par un bouton (si possible jaune) avec le mot "j'aime", à coté du bouton "citer" et supprimer complètement le symbole -
De plus je voudrais que dans le bas du post sur la droite une petite ligne "Les membres qui ont aimés: le pseudo,etc..."soit mise avec une tabulation de droite à gauche
J’espère que quelqu'un pourra m'aider
Merci


Dernière édition par fedaykin44 le Lun 11 Avr 2016 - 3:52, édité 1 fois
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par fedaykin44 Mer 6 Avr 2016 - 16:46

Up, svp
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par Miettes Mer 6 Avr 2016 - 16:53

Coucou Smile

Dans ton template "viewtopic_body", c'est ce morceau de code qui correspond aux votes :
Code:
<!-- BEGIN switch_vote_active -->
            <div class="vote gensmall">
               <!-- BEGIN switch_vote -->
               <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
               <!-- END switch_vote -->

               <!-- BEGIN switch_bar -->
               <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                  <!-- BEGIN switch_vote_plus -->
                  <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                  <!-- END switch_vote_plus -->

                  <!-- BEGIN switch_vote_minus -->
                  <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                  <!-- END switch_vote_minus -->
               </div>
               <!-- END switch_bar -->

               <!-- BEGIN switch_no_bar -->
               <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
               <!-- END switch_no_bar -->

               <!-- BEGIN switch_vote -->
               <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
               <!-- END switch_vote -->
            </div>
            <!-- END switch_vote_active -->

Du coup, tu peux remplacer sans soucis les "+" et "-" par des images Smile
Miettes

Miettes
*****

Féminin
Messages : 590
Inscrit(e) le : 01/09/2008

http://tambouille-raleuses.forumactif.com/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par fedaykin44 Mer 6 Avr 2016 - 17:13

Merci, miettes, mais comme tu l'a peut-être vu par le nombres de posts que j'écris sur le forum, je suis proche de zéro pour modifier les templates et le css
Si tu pouvais m'expliquer en détail, je t'en serais reconnaissant
Merci
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par Peggy06 Ven 8 Avr 2016 - 15:42

Bonjour, fedaykin44,
Dans la partie du template "viewtopic_body" qu'a donné Miettes, il faut aller ligne 155 là vous remplacez cette partie
Code:
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
par :
Code:
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img title="J’aime" src=" http://img15.hostingpics.net/pics/979390poucehaut.gif " alt="J’aime" /></a></div>
Puis à la ligne 175 par :
Code:
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"><img title="J’aime pas" src=" http://img15.hostingpics.net/pics/888598poucebas.gif " alt="J’aime pas" /></a></div>
Maintenant, vous pouvez modifier l'image et le texte dans la partie "img" dans VOTE_PLUS et VOTE_MINUS
Ex : <img title="J’aime pas" src=" https://2img.net/r/hpimg15/pics/888598poucebas.gif " alt="J’aime pas" /></a></div>
Ensuite dans Affichage, Couleurs, Feuille de style CSS, vous ajoutez
Code:
.vote {
        width: 25px; /*-- largeur de l'image choisie --*/
    }
Ici, l'image choisie plus haut a une largeur de 25px, on met donc une valeur de 25px.
Si votre image a une largeur de 35px, pensez à adapter ce code en modifiant 25px par 35px
Bon courage @++


Dernière édition par Peggy06 le Ven 8 Avr 2016 - 15:50, édité 1 fois (Raison : problème pour afficher les codes (lol))
Peggy06

Peggy06
****

Messages : 323
Inscrit(e) le : 24/10/2014

http://evasionentrenous.forumactif.org/
Peggy06 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par fedaykin44 Ven 8 Avr 2016 - 19:04

Merci peggy06,ça m'a déjà beaucoup avancé
par contre quelque soit l'image que je met (la tienne compris), elle déborde sur la droite
Comment faire pour la recadrer sur la gauche, svp?
Par hasard, vous savez comment remplacer la barre de vote par une phrase (celle que j'ai dis dans mon premier post)?
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par Peggy06 Ven 8 Avr 2016 - 19:35

Pour la recadrer, modifier le CSS que j'ai donné et mettre
Code:
/*DIMENSION IMAGE " J'AIME" VIEWTOPIC_BODY*/
.vote {
        width: 25px; /*-- largeur de l'image choisie --*/
right: 10px;
    }
Augmenter les pixels "right" si ce n'est pas suffisant, pour les mettre plus à gauche.
Pour supprimer le bouton - , mettre dans le CSS
Code:
  /*-- retrait du bouton de vote négatif dans les messages --*/
    .vote .vote-button, .vote-no-bar {
      display:none;
    }
    .vote .vote-button:first-child {
        display:block;
    }
Pour la barre de vote, c'est laquelle ? je n'ai pas compris.


Peggy06

Peggy06
****

Messages : 323
Inscrit(e) le : 24/10/2014

http://evasionentrenous.forumactif.org/
Peggy06 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par fedaykin44 Ven 8 Avr 2016 - 20:09

Avec le nouveau code, le bouton se décale bien sur la gauche mais il revient à l'écriture normal (plus d'image) et il reste collé au cadre à droite et quand je change right: 10px; il reste à la même place
Si je change: /*-- largeur de l'image choisie --*/, il refuse le code et dis qu'il manque un }
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par Peggy06 Ven 8 Avr 2016 - 20:20

Il ne faut pas toucher à /*-- largeur de l'image choisie --*/ c'est juste pour indiquer à quoi correspond le code. Je ne comprends pas que ça ne fonctionne pas, car je suis en phpBB3 aussi et je l'ai fait avant de vous le donner et chez moi ça marche, n'y a t-il pas un problème dans le template viewtopic_body, parfois lorsque l'on fait un copie/coller il y a des erreurs, contrôlez.
Peggy06

Peggy06
****

Messages : 323
Inscrit(e) le : 24/10/2014

http://evasionentrenous.forumactif.org/
Peggy06 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par fedaykin44 Sam 9 Avr 2016 - 1:05

Non rien à faire, j'aire remis le template a zéro et tout refais
Pour la bouton - c'est bon
La barre verte apparais verticalement sur la droite quand on clic sur le +, elle est rouge avecle -
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par fedaykin44 Sam 9 Avr 2016 - 3:30

Ok c'est tout bon, j'ai tout refais, j'ai du faire une erreur
C'est possible de mettre le bouton au niveau de la ligne: citer, éditer, etc... juste au dessus, toujours à droite?
Pour la barre vertical qui apparais quand on clic sur le bouton, vous savez comment la remplacer par une ligne (en bas à droite) qui indiquerais dans le post qui à cliqué sur le bouton j'aime, dans le style: "Le(s) membre(s) qui à(ont) aimé(s): le pseudo,etc...", et après le 5eme membres: ",et X autres ont aimées"
En tout cas, merci d'avoir pris le temps de m'aider Very Happy
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par Peggy06 Sam 9 Avr 2016 - 17:30

Bonjour, fedaykin44,
J'ai trouvé un sujet intéressant et donc j'ai fait des modifs que voici
Créer un javascript que vous appelez comme bon vous semble
Code:
$(function(){
        $('.vote').each(function(){
            var nb = $('.vote-bar').attr('title').match(/[0-9]{1,}\s/);
            if(nb == 1){
                $('.vote-bar').html('<p>'+nb+'a aimé votre message</p>');
            }else{
                $('.vote-bar').html('<p>'+nb+'ont aimé votre message</p>');
            };
            $('.vote-bar').removeAttr('title');
        });
    });
Puis changer le CSS
Code:
/*DIMENSION IMAGE " J'AIME" VIEWTOPIC_BODY*/
.vote {
        width: 25px; /*-- largeur de l'image choisie --*/
margin-right: 20px;
  margin-top: -50px;
    }
/*MODIFIER BARRE REPUTATION DANS MESSAGES*/
.vote .vote-bar-plus { 
 background-image: url("http://i56.servimg.com/u/f56/18/15/68/65/coeur_10.jpg");
width: 28px;
  height: 25px !important;
}
    .vote .vote-bar{
        width:165px;height:auto;
        padding-right:5px;
        float:right;
        text-align:right;
        border:none;
        font-size:10px;
        margin-top: 25px;
    }
    /*-- RETRAIT DU BOUTON DE VOTE NEGATIF DANS LES MESSAGES --*/
    .vote .vote-button, .vote-no-bar {
      display:none;
    }
    .vote .vote-button:first-child {
        display:block;
    }

Ensuite modifier les px margin-top si ce n'est pas la hauteur désirée.
Vous me direz si cela va, car j'en ai trouvé un autre plus discret qui affiche juste le nombre de votes, sans passer par le template.
Quand à avoir les noms des membres, impossible, ils avaient fait un sondage pour l'appliquer et ça été refusé par la majorité. Peut-être qu'un jour ça reviendra.
A bientôt.
Peggy06

Peggy06
****

Messages : 323
Inscrit(e) le : 24/10/2014

http://evasionentrenous.forumactif.org/
Peggy06 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par fedaykin44 Sam 9 Avr 2016 - 17:46

Je vais tester les codes et je reviens
Merci
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par fedaykin44 Dim 10 Avr 2016 - 4:40

Pour le bouton j'aime, ça marche
Par contre pour la phrase, elle s'affiche bien, mais il y a un problème d'alignement
Il faudrait qu'elle s'affiche automatiquement à la fin du post car le marging-top ne fonctionne pas
Cela descend bien la phrase mais si le texte est cout cela agrandis le post démesurément et si le texte est plus long alors la phrase recommence à chevaucher le texte
J'ai essayé de régler la hauteur du texte avec ce code css
Code:
.postbody .clearfix {
  padding-bottom: 10px;
}
Mais ça le fais aussi avec la phrase "x a aimé votre message"
Je ne sait pas trop comment ça marche mais peut-être que l'on peut mettre le code dans le template à la place de celui-ci
Code:
<p class="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a></p>
si tu peut régler ce problème, alors ce sera bon
Merci
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bouton j'aime dans un post

Message par Peggy06 Dim 10 Avr 2016 - 11:13

Bonjour, fedaykin44,
Pourquoi as-tu mis la phrase "x a aimé votre message" , il faut mettre le javascript exactement comme indiqué sinon ça beugue, j'ai essayé moi aussi de modifier et ça le fait.
Code:
$(function(){
        $('.vote').each(function(){
            var nb = $('.vote-bar').attr('title').match(/[0-9]{1,}\s/);
            if(nb == 1){
                $('.vote-bar').html('<p>'+nb+'a aimé votre message</p>');
            }else{
                $('.vote-bar').html('<p>'+nb+'ont aimé votre message</p>');
            };
            $('.vote-bar').removeAttr('title');
        });
    });
Ou bien essayer dans CSS d'augmenter dans ".vote .vote-bar" le width: 165px
A++ .
Peggy06

Peggy06
****

Messages : 323
Inscrit(e) le : 24/10/2014

http://evasionentrenous.forumactif.org/
Peggy06 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par fedaykin44 Lun 11 Avr 2016 - 3:52

Je n'ai pas rajouté le x sur le code, c'est juste pour indiquer x:nombre de like
Sinon après plusieurs essais de positionnement, tout marche impeccable
Je vous remercie beaucoup pour votre aide
Je passe le message en résolu
A+
fedaykin44

fedaykin44
***

Messages : 184
Inscrit(e) le : 28/03/2016

http://castel-caladan.forumactif.org
fedaykin44 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton j'aime dans un post

Message par Peggy06 Lun 11 Avr 2016 - 9:02

Bonjour, fedaykin44,
Il n'y a pas de quoi, si l'on peut s'entraider entre membres car le staff n'a pas toujours le temps de tout gérer. Je suis contente que ça marche et en plus j'apprends à me perfectionner à coder car j'étais ignorante et depuis que je suis sur FA je me suis drôlement améliorée.
À bientôt, peut-être pour un autre problème. Laughing
Peggy06

Peggy06
****

Messages : 323
Inscrit(e) le : 24/10/2014

http://evasionentrenous.forumactif.org/
Peggy06 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum