Système de J'aime et Je n'aime pas

Forum gratuit : Le forum des forums actifs :: Vous et Forumactif... :: ressources pour utilisateurs forumactif :: Questions/Réponses fréquentes

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

  • 0

Tutoriel Système de J'aime et Je n'aime pas

Message par Luzz Ven 10 Juil 2020 - 11:43

Système de J'aime et Je n'aime pas
A l'instar de nombreux réseaux sociaux comme Facebook, Twitter, Instagram et bien d'autres, Forumactif propose nativement le système de J'aime ou Je n'aime pas un message posté par un membre. Ce système est activé par défaut lors de la création d'un forum et sur toutes les versions proposées, dont la version mobile moderne. Ce nouveau système est indépendant du système de votes et n’a aucun lien avec le système de réputation.

Présentation de la fonctionnalité


Grâce à ce système de J'aime (Like) ou Je n'aime pas (Dislike), les membres d'un forum peuvent mettre un « J’aime » ou éventuellement un « Je n’aime pas » sur chaque message publié et voir qui l'a aimé (ou ne l'a pas aimé) selon les nombreux réglages proposés dans le Panneau d'administration.

Système de J'aime et Je n'aime pas 25-06-20

Paramétrages de la fonctionnalité


Panneau d'administration  Général  Messages et Emails - Configuration
Voir illustration :

Activer le système de J'aime et Je n'aime pas


Trois possibilités sont offertes aux administrateurs :

  1. Activer les deux boutons (J'aime et Je n'aime pas) : En cochant Oui, les membres auront la possibilité d'aimer ou de ne pas aimer un message ;
    Voir illustration :

  2. Activer seulement le bouton J'aime : En cochant Seulement le "J'aime", les membres n'auront que la possibilité d'aimer un message ;
    Voir illustration :

  3. Ne pas activer le système sur le forum : En cochant Non, le système sera désactivé sur votre forum.
    Voir illustration :


Afficher les membres qui ont aimé et pas aimé


Trois possibilités sont offertes aux administrateurs :

  1. Afficher les membres qui ont aimé et pas aimé : En cochant Oui, le pseudo des membres ayant aimé ou non un message sera affiché sous les boutons ;
    Voir illustration :

  2. Afficher uniquement les membres ayant aimé un message : En cochant Seulement le "J'aime", le pseudo des membres ayant aimé un message sera affiché sous le(s) bouton(s) ;
    Voir illustration :

  3. Ne pas afficher les membres qui ont aimé et pas aimé : En cochant Non, aucun pseudo ne sera affiché en fonction des réactions des membres.
    Voir illustration :


Recevoir les notifications Push liées à cette fonctionnalité


Pour pouvoir utiliser cette nouvelle fonctionnalité, il convient d'activer le protocole HTTPS et d'encoder intégralement votre forum en UTF-8. Il s'agit de requis imposés par la technologie.

Profil  Notifications

En fonction du paramétrage du système (se conférer au point 2 de ce tutoriel), une voire deux ligne(s) peu(ven)t apparaître laissant le choix au membre de recevoir ou non des notifications Push. Une notification Push est alors envoyée aux membres ayant souscrit à ces notifications via leur navigateur web ou mobile. Pour plus d'explications, reportez-vous au tutoriel [Le fonctionnement des notifications].

Voir illustration :

Ces notifications apparaissent également pour le membre dans l’onglet "Notifications" de la ToolBar du forum :

Voir illustration :


Spécificités de la fonctionnalité


Si le système est activé et que certains forums ou sous-forums sont accessibles aux invités, ces derniers pourront voir les boutons J'aime et/ou Je n'aime pas et le nombre de réactions associées. Toutefois, les invités ne peuvent pas réagir aux messages. Si ces derniers cliquent sur l'un des boutons, une popup s'affichera :

Système de J'aime et Je n'aime pas 25-06-30

Personnalisations de la fonctionnalité


Pour personnaliser les différentes options de cette fonctionnalité, nous vous invitons à lire :

Tuto Personnaliser le système de J'aime et Je n'aime pas

Ce tutoriel a été rédigé par le Staff du Forum des Forums,
Et en particulier par Luzz, no_way, Pinguino, en coopération avec Bipo et Neptunia.

Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.


Dernière édition par Luzz le Ven 14 Aoû 2020 - 14:53, édité 4 fois
Luzz

Luzz
Adminactive
Adminactive

Autre / Ne pas divulguer
Messages : 5298
Inscrit(e) le : 25/10/2007

https://forum.forumactif.com
Luzz a été remercié(e) par l'auteur de ce sujet.

Tutoriel Re: Système de J'aime et Je n'aime pas

Message par Luzz Ven 10 Juil 2020 - 11:43

Système de J'aime et Je n'aime pas - Modifications des templates

Pour les forums ayant des templates modifiés avant le 22 juin 2020

Afin que le système de "J'aime" fonctionne de façon optimale sur le forum, les administrateurs ayant personnalisé l'un des templates viewtopic_body, viewcomments_body et overall_header doivent prendre en considération les modifications ci-dessous. Seul le fondateur du forum est habilité à en modifier les templates.

Si vous ne voyez pas de template viewcomments_body dans votre liste de templates, c’est que vous n’utilisez pas le module Blog et ne l’avez pas activé dans votre Panneau d'administration. Dans ce cas, aucun changement n'est nécessaire.

Système de J'aime et Je n'aime pas Copy-c10 Sommaire :

  1. Modifications à apporter sur les templates pour les forums en version PhpBB2 ;
  2. Modifications à apporter sur les templates pour les forums en version PhpBB3 ;
  3. Modifications à apporter sur les templates pour les forums en version PunBB ;
  4. Modifications à apporter sur les templates pour les forums en version Invision ;
  5. Modifications à apporter sur les templates pour les forums en version ModernBB ;
  6. Modifications à apporter sur les templates pour les forums en version AwesomeBB ;
  7. Modifications à apporter sur les templates pour la version mobile moderne.


Modifications à effectuer sur la version PhpBB2


Modification du template overall_header


Panneau d'administration  Affichage  Templates - Général - overall_header

Après :

Code:
<!-- END switch_login_popup -->

Ajoutez :

Code:
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
  <table class="forumline" width="{LIKE_POPUP_WIDTH}" height="{LIKE_POPUP_HEIGHT}" border="0" cellspacing="1"
        cellpadding="0">
      <tr height="25">
        <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
        </td>
      </tr>
      <tr height="{LIKE_POPUP_MSG_HEIGHT}">
        <td class="row1" align="left" valign="top">
            <div id="like_popup_buttons">
              <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}"/>
                  <input type="button" class="mainoption" value="{L_REGISTER}"
                        onclick="parent.location='{U_REGISTER}';"/>
                  <input id="like_popup_close" type="button" class="button" value="{L_LIKE_CLOSE}"/>
              </form>
            </div>
            <span class="genmed">{LIKE_POPUP_MSG}</span>
        </td>
      </tr>
  </table>
</div>
<!-- END switch_like_popup -->

Modification du template viewcomments_body


Panneau d'administration  Affichage  Templates - Général - viewcomments_body

Remplacez :

Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">

Par :

Code:
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%" colspan="2">
 <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

Puis, remplacez :

Code:
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
 </td>
 </tr>
 <tr>

Par :

Code:
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
 </td>
 </tr>
 <tr height="100%" valign="top">

Ensuite, après :

Code:
<div class="signature_div">
 {postrow.displayed.SIGNATURE}
 </div>

Ajoutez :

Code:
                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
              </td>
            </tr>
            <!-- BEGIN switch_likes_active -->
            <tr>
              <td colspan="3">
                  <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 -->
                    <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}">
                          <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>
                  </div>
              </td>
            </tr>
            <!-- END switch_likes_active -->

Enfin, après :

Code:
<div class="postbody">
 {comment.displayed.MESSAGE}

Ajoutez :

Code:
                        <!-- BEGIN switch_likes_active -->
                        <div class="fa_like_div">
                          <!-- BEGIN switch_like_list -->
                          {comment.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
                          <!-- END switch_like_list -->
                          <!-- BEGIN switch_dislike_list -->
                          {comment.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
                          <!-- END switch_dislike_list -->
                          <button class="rep-button {comment.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{comment.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{comment.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>{comment.displayed.switch_likes_active.L_LIKE}</span>{comment.displayed.switch_likes_active.COUNT_VOTE_LIKE}
                          </button>
                          <!-- BEGIN switch_dislike_button -->
                          <button class="rep-button {comment.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{comment.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>{comment.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{comment.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
                          </button>
                          <!-- END switch_dislike_button -->
                        </div>
                        <!-- END switch_likes_active -->

Modification du template viewtopic_body


Panneau d'administration  Affichage  Templates - Général - viewtopic_body

Remplacez :

Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">

Par :

Code:
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%" colspan="2">
 <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

Ensuite, remplacez :

Code:
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
 </td>
 </tr>
 <tr>

Par :

Code:
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
 </td>
 </tr>
 <tr height="100%" valign="top">

Enfin, après :

Code:
<div class="clear"></div>
 <!-- BEGIN switch_signature -->
 <div class="signature_div">
 {postrow.displayed.SIGNATURE}
 </div>
 <!-- END switch_signature -->

Ajoutez :

Code:
                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
              </td>
            </tr>
            <!-- BEGIN switch_likes_active -->
            <tr><td colspan="2"><div class="fa_like_div">
              <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 -->
              </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}">
                  <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 -->
        </table>
        <!-- BEGIN switch_likes_active -->

        <!-- END switch_likes_active -->

Modifications à effectuer sur la version PhpBB3


Modification du template overall_header


Panneau d'administration  Affichage  Templates - Général - overall_header

Après :

Code:
<!-- END switch_login_popup -->

Ajoutez :

Code:
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
  <div class="h3">{SITENAME}</div>
  {LIKE_POPUP_MSG}
  <div id="like_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}"/>
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
        <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
      </form>
  </div>
</div>
<!-- END switch_like_popup -->

Modification du template viewcomments_body


Panneau d'administration  Affichage  Templates - Général - viewcomments_body

Après :

Code:
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </dd>
 </dl>
 </div>
 
 <div class="clear"></div>

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <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="13px" height="13px" 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="13px" height="13px" 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>
 <!-- END switch_likes_active -->

Enfin, après :

Code:
<!-- END switch_attachments -->
 {comment.displayed.EDITED_MESSAGE}
 </div>
 </div>

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <!-- BEGIN switch_like_list -->
 {comment.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {comment.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 <button class="rep-button {comment.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{comment.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{comment.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" 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>{comment.displayed.switch_likes_active.L_LIKE}</span>{comment.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {comment.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="13px" height="13px" 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>{comment.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{comment.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 </div>
 <!-- END switch_likes_active -->

Modification du template viewtopic_body


Panneau d'administration  Affichage  Templates - Général - viewtopic_body

Après :

Code:
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </dd>
 </dl>
 </div>
 
 <div class="clear"></div>

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <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="13px" height="13px" 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="13px" height="13px" 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>
 <!-- END switch_likes_active -->

Modifications à effectuer sur la version PunBB


Modification du template overall_header


Panneau d'administration  Affichage  Templates - Général - overall_header

Après :

Code:
<!-- END switch_login_popup -->

Ajoutez :

Code:
<!-- BEGIN switch_like_popup -->
<div id="like_popup" class="module main" style="z-index: 10000 !important;">
  <div id="like_popup_title" class="main-head">
      <div class="h3">{SITENAME}</div>
  </div>
  <div class="main-content">
      {LIKE_POPUP_MSG}
      <div id="like_popup_buttons">
        <form action="{S_LOGIN_ACTION}" method="get">
            <input type="submit" class="button2" value="{L_LOGIN}"/>
            <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
            <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
        </form>
      </div>
  </div>
</div>
<!-- END switch_like_popup -->

Modification du template viewcomments_body


Panneau d'administration  Affichage  Templates - Général - viewcomments_body

Après :

Code:
{postrow.displayed.SIGNATURE_NEW}
 </div>
 <!-- END switch_signature -->

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <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 -->
 </div>
 <!-- END switch_likes_active -->

Ensuite, après :

Code:
<div class="postfoot clearfix">
 <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </div>

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div profile_{postrow.displayed.PROFILE_POSITION}">
 <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="13px" height="13px" 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="13px" height="13px" 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>
 <!-- END switch_likes_active -->

Ensuite, après :

Code:
{comment.displayed.EDITED_MESSAGE}
 </p>
 </div>

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <!-- BEGIN switch_like_list -->
 {comment.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {comment.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 </div>
 <!-- END switch_likes_active -->

Enfin, après :

Code:
{comment.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 </div>
 <!-- END switch_likes_active -->
 </div>
 </div>
 
 <div class="postfoot clearfix">

Ajoutez :

Code:
                  <!-- BEGIN switch_likes_active -->
                    <div class="fa_like_div">
                        <button class="rep-button {comment.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{comment.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{comment.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                            <svg width="13px" height="13px" 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>{comment.displayed.switch_likes_active.L_LIKE}</span>{comment.displayed.switch_likes_active.COUNT_VOTE_LIKE}
                        </button>
                        <!-- BEGIN switch_dislike_button -->
                        <button class="rep-button {comment.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
                            <svg width="13px" height="13px" 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>{comment.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{comment.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
                        </button>
                        <!-- END switch_dislike_button -->
                    </div>
                    <!-- END switch_likes_active -->

Modification du template viewtopic_body


Panneau d'administration  Affichage  Templates - Général - viewtopic_body

Après :

Code:
{postrow.displayed.SIGNATURE_NEW}
 </div>

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <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 -->
 </div>
 <!-- END switch_likes_active -->

Enfin, après :

Code:
<div class="postfoot">
 <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
 </div>

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div profile_{postrow.displayed.PROFILE_POSITION}">
 <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="13px" height="13px" 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="13px" height="13px" 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>
 <!-- END switch_likes_active -->

Ce tutoriel a été rédigé par le Staff du Forum des Forums,
Et en particulier par Luzz, no_way, Pinguino, en coopération avec Bipo et Neptunia.

Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.


Dernière édition par Luzz le Mar 21 Juil 2020 - 10:08, édité 1 fois
Luzz

Luzz
Adminactive
Adminactive

Autre / Ne pas divulguer
Messages : 5298
Inscrit(e) le : 25/10/2007

https://forum.forumactif.com
Luzz a été remercié(e) par l'auteur de ce sujet.

Tutoriel Re: Système de J'aime et Je n'aime pas

Message par Luzz Ven 10 Juil 2020 - 11:43

Système de J'aime et Je n'aime pas - Modifications des templates


Modifications à effectuer sur la version Invision


Modification du template overall_header


Panneau d'administration  Affichage  Templates - Général - overall_header

Après :

Code:
<!-- END switch_login_popup -->

Ajoutez :

Code:
<!-- BEGIN switch_like_popup -->
<div id="like_popup" class="module borderwrap" style="z-index: 10000 !important;">
  <div id="like_popup_content">
      <div id="like_popup_background">
        <div id="like_popup_title" class="maintitle"><h3>{SITENAME}</h3></div>
        <div class="box-content">
            {LIKE_POPUP_MSG}
            <div id="like_popup_buttons">
              <form action="{S_LOGIN_ACTION}" method="get" target="_parent">
                  <input type="submit" class="button" value="{L_LOGIN}"/>
                  <input type="button" class="button" value="{L_REGISTER}"
                        onclick="parent.location='{U_REGISTER}';"/>
                  <input id="like_popup_close" type="button" class="button" value="{L_LIKE_CLOSE}"/>
              </form>
            </div>
        </div>
      </div>
  </div>
</div>
<!-- END switch_like_popup -->

Modification du template viewcomments_body


Panneau d'administration  Affichage  Templates - Général - viewcomments_body

Après :

Code:
<div id="sig{postrow.displayed.U_POST_ID}" class="signature_div">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <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}">
 <svg width="17px" height="17px" 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="#fff"></path></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="17px" height="17px" 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="#fff"/></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>
 <!-- END switch_likes_active -->

Enfin, après :

Code:
<!-- END switch_vote_active -->
 {comment.displayed.MESSAGE}

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <button class="rep-button {comment.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{comment.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{comment.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
 <svg width="17px" height="17px" 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="#fff"></path></svg>
 <span>{comment.displayed.switch_likes_active.L_LIKE}</span>{comment.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {comment.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <svg width="17px" height="17px" 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="#fff"/></svg>
 <span>{comment.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{comment.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {comment.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {comment.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 </div>
 <!-- END switch_likes_active -->

Modification du template viewtopic_body


Panneau d'administration  Affichage  Templates - Général - viewtopic_body

Après :

Code:
<br />
 <div id="sig{postrow.displayed.U_POST_ID}" class="signature_div">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <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}">
 <svg width="17px" height="17px" 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="#fff"></path></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="17px" height="17px" 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="#fff"/></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 -->
 <p class="fa_like_list">{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}</p>
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 <p class="fa_dislike_list">{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}</p>
 <!-- END switch_dislike_list -->
 </div>
 <!-- END switch_likes_active -->

Modifications à effectuer sur la version ModernBB


Modification du template overall_header


Panneau d'administration  Affichage  Templates - Général - overall_header

Après :

Code:
<!-- END switch_login_popup -->

Ajoutez :

Code:
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
  <div class="h3">{SITENAME}</div>
  <div id="like_popup_message">
        {LIKE_POPUP_MSG}
  </div>
  <div id="like_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}"/>
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
        <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
      </form>
  </div>
</div>
<!-- END switch_like_popup -->

Modification du template viewcomments_body


Panneau d'administration  Affichage  Templates - Général - viewcomments_body

Remplacez :

Code:
<!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-thumbsup"></a>
 <!-- END switch_vote -->
 
 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-thumbsdown"></a>
 <!-- END switch_vote -->

Par :

Code:
<!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-plus-circled"></a>
 <!-- END switch_vote -->
 
 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-minus-circled"></a>
 <!-- END switch_vote -->

Ensuite, après :

Code:
<div id="sig{postrow.displayed.U_POST_ID}" class="signature_div">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <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}">
 <i class="ion-thumbsup"></i>
 <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}">
 <i class="ion-thumbsdown"></i>
 <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>
 <!-- END switch_likes_active -->

Enfin, après :

Code:
<div style="display:none"></div>
 <div class="content clearfix">
 {comment.displayed.MESSAGE}

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <div class="fa_like_div">
 <button class="rep-button {comment.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{comment.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{comment.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
<i class="ion-thumbsup"></i>
 <span> {comment.displayed.switch_likes_active.L_LIKE}</span>{comment.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </button>
 <!-- BEGIN switch_dislike_button -->
 <button class="rep-button {comment.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
 <i class="ion-thumbsdown"></i>
 <span> {comment.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{comment.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </button>
 <!-- END switch_dislike_button -->
 <!-- BEGIN switch_like_list -->
 {comment.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
 <!-- END switch_like_list -->
 <!-- BEGIN switch_dislike_list -->
 {comment.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
 <!-- END switch_dislike_list -->
 </div>
 <!-- END switch_likes_active -->

Modification du template viewtopic_body


Panneau d'administration  Affichage  Templates - Général - viewtopic_body

Remplacez :

Code:
<!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-thumbsup"></a>
 <!-- END switch_vote -->
 
 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-thumbsdown"></a>
 <!-- END switch_vote -->

Par :

Code:
<!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-plus-circled"></a>
 <!-- END switch_vote -->
 
 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-minus-circled"></a>
 <!-- END switch_vote -->

Enfin, après :

Code:
<div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>

Ajoutez :

Code:
<!-- BEGIN switch_likes_active -->
 <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}">
 <i class="ion-thumbsup"></i>
 <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}">
 <i class="ion-thumbsdown"></i>
 <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>
 <!-- END switch_likes_active -->

Modifications à effectuer sur la version AwesomeBB


Modification du template overall_header


Panneau d'administration  Affichage  Templates - Général - overall_header

Après :

Code:
<body id="top">

Ajoutez :

Code:
<!-- BEGIN switch_like_popup -->
<div id="like_popup" class="block-subtle" style="z-index: 10000 !important;">
    <div class="headline">
        {SITENAME}
        <button title="{L_LIKE_CLOSE}" id="like_popup_close"><i class="material-icons">close</i></button>
    </div>
    <div id="like_popup_message">
        {LIKE_POPUP_MSG}
    </div>
    <br>
    <div id="like_popup_buttons">
        <form action="{S_LOGIN_ACTION}" method="get">
            <input type="submit" value="{L_LOGIN}" class="btn btn-default">
            <input type="button" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" class="btn btn-default">
        </form>
    </div>
</div>
<!-- END switch_like_popup -->

Modification du template viewcomments_body


Panneau d'administration  Affichage  Templates - Général - viewcomments_body

Remplacez :

Code:
 <!-- BEGIN switch_signature -->
        <div id="sig{postrow.displayed.U_POST_ID}" class="signature_div">{postrow.displayed.SIGNATURE_NEW}</div>
        <!-- END switch_signature -->
        <div id="profile{postrow.displayed.U_POST_ID}" class="block-footer">
            <div class="block-post-details">
                <div class="block-post-avatar avatar-default">

Par :

Code:

 <!-- BEGIN switch_signature -->
 <div id="sig{postrow.displayed.U_POST_ID}" class="signature_div">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 <!-- BEGIN switch_likes_active -->
 <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}">
 <span class="rep-cat">
 <i class="material-icons">thumb_up</i>
 {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </span>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>
 </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}">
 <span class="rep-cat">
 <i class="material-icons">thumb_down</i>
 {postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </span>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>
 </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>
 <!-- END switch_likes_active -->
 <div id="profile{postrow.displayed.U_POST_ID}" class="block-footer">
 <div class="block-post-details">
 <div class="block-post-avatar avatar-default">

Ensuite, après :

Code:
{comment.displayed.MESSAGE}

Ajoutez :

Code:

                <!-- BEGIN switch_likes_active -->
                <div class="fa_like_div">
                    <button class="rep-button {comment.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{comment.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{comment.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                        <span class="rep-cat">
                            <i class="material-icons">thumb_up</i>
                            {comment.displayed.switch_likes_active.COUNT_VOTE_LIKE}
                        </span>
                        <span>{comment.displayed.switch_likes_active.L_LIKE}</span>
                    </button>
                    <!-- BEGIN switch_dislike_button -->
                    <button class="rep-button {comment.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{comment.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
                        <span class="rep-cat">
                            <i class="material-icons">thumb_down</i>
                            {comment.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
                        </span>
                        <span>{comment.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>
                    </button>
                    <!-- END switch_dislike_button -->
                    <!-- BEGIN switch_like_list -->
                    {comment.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
                    <!-- END switch_like_list -->
                    <!-- BEGIN switch_dislike_list -->
                    {comment.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
                    <div class="clear"></div>
                    <!-- END switch_dislike_list -->
                </div>
                <!-- END switch_likes_active -->

Modification du template viewtopic_body


Panneau d'administration  Affichage  Templates - Général - viewtopic_body

Remplacez :

Code:
                              <span><a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></span>
                            </h2>
                            <div class="mobile-hide post-buttons">
                                <ul>
                                    <li class="btn-thank">

Par :

Code:

 <span class="post-heading-wrap">
 <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>
 <span class="post-date">{postrow.displayed.POST_DATE_NEW}</span>
 </span>
 </h2>
 <div class="mobile-hide post-buttons">
 <ul>
 <li class="btn-thank">

Puis, remplacez :

Code:

                                                </p>
                                                <!-- END switch_no_comment -->
                                                <!-- BEGIN switch_no_dl_att -->
                                                <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                                <!-- END switch_no_dl_att -->
                                                <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
                                            </dd>
                                            <!-- END switch_post_attachments -->
                                        </dl>
                                    </div>
                                    <!-- END switch_attachments -->
                                    <!-- BEGIN switch_signature -->
                                    <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                                    <!-- END switch_signature -->
                                </div>
                                <div class="post-footer">
                                    <!-- BEGIN switch_vote_active -->
                                    <div class="vote">
                                        <!-- BEGIN switch_vote -->
                                        <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up">
                                            <i class="material-icons">thumb_up</i>
                                        </a>
                                        <!-- END switch_vote -->

Par :

Code:
 </p>
 <!-- END switch_no_comment -->
 <!-- BEGIN switch_no_dl_att -->
 <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
 <!-- END switch_no_dl_att -->
 <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
 </dd>
 <!-- END switch_post_attachments -->
 </dl>
 </div>
 <!-- END switch_attachments -->
 <!-- BEGIN switch_signature -->
 <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
 </div>
 <div class="post-footer<!-- BEGIN switch_likes_active --> likes-active<!-- END switch_likes_active --><!-- BEGIN switch_vote_active --> vote-active<!-- END switch_vote_active -->">
 <!-- BEGIN switch_likes_active -->
 <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}">
 <span class="rep-cat">
 <i class="material-icons">thumb_up</i>
 {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 </span>
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>
 </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}">
 <span class="rep-cat">
 <i class="material-icons">thumb_down</i>
 {postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 </span>
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>
 </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>
 <!-- END switch_likes_active -->
 <!-- BEGIN switch_vote_active -->
 <div class="vote">
 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up">
 <i class="material-icons">add_circle_outline</i>
 </a>
 <!-- END switch_vote -->

Ensuite, remplacez :

Code:
                                      <!-- BEGIN switch_vote -->
                                        <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down">
                                            <i class="material-icons">thumb_down</i>
                                        </a>
                                        <!-- END switch_vote -->

Par :

Code:

 <!-- BEGIN switch_vote -->
 <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down">
 <i class="material-icons">remove_circle_outline</i>
 </a>
 <!-- END switch_vote -->

Enfin, remplacez :

Code:

                                        <!-- BEGIN switch_no_bar -->
                                        <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                                        <!-- END switch_no_bar -->
                                    </div>
                                    <!-- END switch_vote_active -->
                                    <span class="post-date">{postrow.displayed.POST_DATE_NEW}</span>
                                </div>
                            </div>
                            <aside class="post-aside">
                                <div class="post-author-status"></div>
                                <div class="post-author">

Par :

Code:

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
 <!-- END switch_no_bar -->
 </div>
 <!-- END switch_vote_active -->
 </div>
 </div>
 <aside class="post-aside">
 <div class="post-author-status"></div>
 <div class="post-author">

Modifications à effectuer sur la version mobile moderne


Modification du template overall_header


Panneau d'administration  Affichage  Templates - Version mobile - overall_header

Après :

Code:
<body id="mpage-body-modern">

Ajoutez :

Code:
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
    <div id="like_popup_inner">
        <div id="like_popup_content" class="box">
            <div class="headline">
                {SITENAME}
                <button title="{L_LIKE_CLOSE}" id="like_popup_close"><i class="material-icons">close</i></button>
            </div>
            <div id="like_popup_message">
                {LIKE_POPUP_MSG}
            </div>
            <br>
            <div id="like_popup_buttons">
                <form action="{S_LOGIN_ACTION}" method="get">
                    <input type="submit" value="{L_LOGIN}" class="btn">
                    <input type="button" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" class="btn">
                </form>
            </div>
        </div>
    </div>
</div>
<!-- END switch_like_popup -->

Modification du template viewtopic_body


Panneau d'administration  Affichage  Templates - Version mobile - viewtopic_body

Remplacez le code suivant :

Code:
{postrow.displayed.EDITED_MESSAGE}
        <ul class="post-buttons">
            <li>{postrow.displayed.EDIT_IMG}</li>

Par le code suivant :

Code:
{postrow.displayed.EDITED_MESSAGE}
 <!-- BEGIN switch_likes_active -->
 <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 -->
 </div>
 <!-- END switch_likes_active -->
 <ul class="post-buttons">
 <!-- BEGIN switch_likes_active -->
 <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}">
 <i class="material-icons">thumb_up</i>
 {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
 <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>
 </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}">
 <i class="material-icons">thumb_down</i>
 {postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
 <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>
 </button>
 <!-- END switch_dislike_button -->
 <!-- END switch_likes_active -->

Enfin, ajoutez le code suivant :

Code:
<li>{postrow.displayed.EDIT_IMG}</li>

Après le code :

Code:
<li>{postrow.displayed.DELETE_IMG}</li>

Ce tutoriel a été rédigé par le Staff du Forum des Forums,
Et en particulier par Luzz, no_way, Pinguino, en coopération avec Bipo et Neptunia.

Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.


Dernière édition par Luzz le Mar 21 Juil 2020 - 10:09, édité 1 fois
Luzz

Luzz
Adminactive
Adminactive

Autre / Ne pas divulguer
Messages : 5298
Inscrit(e) le : 25/10/2007

https://forum.forumactif.com
Luzz 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

Forum gratuit : Le forum des forums actifs :: Vous et Forumactif... :: ressources pour utilisateurs forumactif :: Questions/Réponses fréquentes

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