Colorer un coeur quand on aime un message

[Illiana]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : https://witchwizzle.forumactif.com/

Description du problème

Bonjour / Bonsoir
Et merci d'avance pour votre attention !

Nous sommes actuellement en pleine MAJ sur WSOW, et je viens de lancer le système "j'aime", "j'aime pas" (enfin lui on ne l'active pas XD).

En faisant plusieurs tests, en lisant vos différents sujets ici et là, je n'ai malheureusement pas trouvé le moyen de changer l'image lorsque j'ai cliqué sur mon petit coeur.

Voici ce que ça donne à l'heure actuelle :

Et j'aimerais que l'image de mon petit coeur, une fois que j'ai aimé le message (par Rappeltout) je puisse avoir ce petit coeur là :

Il doit bien y avoir un code qui permette ça, mais je n'arrive pas à mettre la main dessus !
Alors je fais appel à votre aide, vous qui avez plus de connaissances *-*

Merci d'avance !

[Stefano123]

Bonjour, Illiana,

Moi aussi, j'avais fait une recherche à ce sujet, mais j'ai l'impression que cette image ne fait qu'un dans le bloc "j'aime".

Exemple : Quand personne n'a aimé, mon pouce est en marron !



Et quand un membre aime, le pouce est en vert !



Pour que ce pouce soit vert sur les "j'aime", j'ai collé ce code dans la feuille de style du CSS.

Code:

.fa_liked path {
  fill: #09bd3d;
}

Et pour modifier la dimension du pouce, j'ai aussi collé ceci.  Mais cette dimension est la même dans le bloc "j'aime".

Code:

.rep-button svg {
width: 20px;
  height: 20px;
}

Après, je ne suis pas sûr que mes codes correspondent avec votre forum ! Il faut essayer,

Ici, dans "Listing des Trucs & Astuces" vous pouvez personnaliser le Système "J'aime et je n'aime pas" :  Mais je pense que vous avez déjà visité, ⁣ 
https://forum.forumactif.com/t403563-personnalisations-du-systeme-j-aime-et-je-n-aime-pas

Bonne soirée et bon week-end.

Cordialement,

[Illiana]

Bonjour Stefano123

Alors, comme ce n'est plus le système de base, que j'ai remplacé le pouce par une autre image, j'ai tenté mais c'est resté pareil XD

Et oui j'ai épluché ce tuto de fond en comble, mais ça a pas fonctionné T.T

Merci pour ton aide !

['Christa]

Hello,

Pour qu'on puisse faire quoi que ce soit, c'est toujours mieux d'avoir le CSS et le HTML de la partie concernée.

Par défaut sur PhpBB2, le système des likes est cette partie du template viewtopic_body :

Code:

            <!-- BEGIN switch_likes_active -->
            <tr><td colspan="2">
               <div class="fa_like_div">
                  <!-- BEGIN switch_like_list -->
                  {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
                  <!-- END switch_like_list -->
                  <!-- BEGIN switch_dislike_list -->
                  {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
                  <!-- END switch_dislike_list -->
               <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                  <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
                  <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
               </button>
               <!-- BEGIN switch_dislike_button -->
               <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
                  <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
                  <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
               </button>
               <!-- END switch_dislike_button -->
            </div></td></tr>
            <!-- END switch_likes_active -->

Et ce qui nous intéresse le plus ici sera sans doute cette section là :

Code:

<button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
   <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"/></svg>
   <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
</button>

Lorsque quelqu'un clique sur le bouton "j'aime", le bouton en question se voit attribuer la classe fa-liked, ce qui permet ensuite de manipuler son contenu. Quand il s'agit d'un SVG, utiliser fill comme dans la solution de Stephano123 fonctionne, mais clairement ici soit ce n'est pas le cas, soit le code est différent.

[Illiana]

Bonjour 'Christa,

Voici le code que j'utilise (je vous montre juste le morceau de like du coup) :

Code:

<!-- BEGIN switch_likes_active -->
            <tr><td colspan="2">
               <div class="fa_like_div">
               <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                                          <img src="https://images2.imgbox.com/39/a2/efLW0MOp_o.png" alt="Pouce levé" />                  
               </button>
               <!-- BEGIN switch_dislike_button -->
               <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
                  <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"/></svg>
                  <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
               </button>
               <!-- END switch_dislike_button -->
                                          <!-- BEGIN switch_like_list -->
                  {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
                  <!-- END switch_like_list -->
                  <!-- BEGIN switch_dislike_list -->
                  {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
                  <!-- END switch_dislike_list -->
            </div></td></tr>
            <!-- END switch_likes_active -->

Comme je ne maitrise pas les balises de FA (ni le JS), j'avoue que je ne sais pas trop quoi modifier pour que l'image puisse changer.

[Illiana]

EEEETTTT j'ai eu un éclair de géni XD

Alors dans mon template que je viens de partager j'ai viré le "img".
Et j'ai mis ça dans mon CSS:

Code:

.rep-button, .rep-button:active, .rep-button:focus {
  background-color:var(--fond3)!important;
  background-image:url('https://images2.imgbox.com/39/a2/efLW0MOp_o.png');
  height:20px;
  width:20px;
  border:none;
  box-shadow:none;
}
 
.fa_liked {
  background-image:url('https://images2.imgbox.com/0b/f5/J6nIjgjp_o.png')!important;
}

C'est ptet moche, ptet pas ça que FA voudrait qu'on le fasse, mais ça fonctionne XD

Merci à vous pour avoir regardé mon soucis !

['Christa]

Hellow !

Du coup, on a le bout de code responsable du bouton "j'aime" :

Code:

<button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                                          <img src="https://images2.imgbox.com/39/a2/efLW0MOp_o.png" alt="Pouce levé" />                  
               </button>

Alors il existe plusieurs façons de gérer cette affaire mais je suis terriblement feignasse ce soir et j'ai la flemme d'expliquer des choses complexes pour une débutante. On va donc utiliser la technique de la flemme.

- En premier lieu, il te faut faire une nouvelle image pour ton bouton j'aime, et l'héberger, et récupérer son lien
- En second lieu, tu vas l'ajouter dans ton code sus-cité, à la suite de la première image :

Code:

<button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
    <img src="https://images2.imgbox.com/39/a2/efLW0MOp_o.png" alt="Pouce levé" />
    <img src="URL_IMAGE_COEURVERT" alt="J'ai aimé ce message" />                  
</button>

- En troisième lieu, tu vas rajouter ceci dans ton CSS :

Code:

.rep-button.fa_like img:nth-child(2), .rep-button.fa_liked img:nth-child(1) {display:none}

Et voilà, simple et efficace, même si pas nécessairement la solution la plus élégante.

(Edit : ta solution était effectivement l'alternative, simplement passer par une image de fond)