Boutons j'aime et je n'aime pas en infobulles

[cobain.]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aucune idée, je dirais depuis qu'on a modifier le css et le templates.
Lien du forum : https://light-up-the-moon.forumactif.com/

Description du problème

Bonjour, bonsoir,

Je viens par ici aujourd'hui car nous nous retrouvons face à une petite difficulté concernant les boutons like et dislike sur notre forum. Je ne sais pas si un tutoriel à été suivi puisque je ne suis pas à l'origine de la modification et la personne concerné ne nous répond plus, mais j'ai tenté de regarder et je n'ai pas trouver ou réussi à faire ce que nous souhaitions.

Notre but étant de faire apparaitre la liste des personnes ayant aimé ou non le message en infobulles au passage de la souris sur les icones (qui sont chez nous des images). Je n'arrive simplement pas à mettre en place les infobulles, j'ai bidouillé un peu mon code, mon css et le templates, mais en vain et comme je ne veux pas tout détruire, je me tourne vers vous. Je l'ai croisé sur plusieurs forums sous cette forme, je sais donc que c'est possible, mais je n'arrive pas à le mettre en place.

Je vous laisse ici le code templates et le css concerné et modifié, en espérant trouver une réponse à ma recherche. Merci par avance.

Code:

/******** Personnalisation des listes de pseudos ********/
 
/* Liste des pseudos qui aiment un message */
 
.likelist{
    color:#ccc;
    text-shadow:0 -1px 0 black;               
}
.likelist:hover,likelist:focus{
    background:rgba(0,0,0,.4);
    box-shadow:0 1px 0 rgba(255,255,255,.4);
}

likelist span{position:absolute;               
}
likelist span:hover{
    position:absolute;               
}

.fa_like_list{background-color: transparent; /* Couleur de fond de la liste */
  color: none; /* Couleur de la police d'écriture de la liste */
  font-family: Trebuchet MS; /* Police d'écriture de la liste */
  font-size: 11.4px; /* Taille de la police d'écriture de la liste */
}
.fa_like_list:hover{background-color: transparent; /* Couleur de fond de la liste */
  color: none; /* Couleur de la police d'écriture de la liste */
  font-family: Trebuchet MS; /* Police d'écriture de la liste */
  font-size: 11.4px; /* Taille de la police d'écriture de la liste */
}
 
.fa_like_list a {background-color: transparent; /* Couleur de fond de la liste */
    color: #000000; /* Couleur des pseudos de la liste */
    font-family: Trebuchet MS; /* Police d'écriture des pseudos de la liste */
    font-size: 11.4px; /* Taille de la police d'écriture des pseudos de la liste */
    text-decoration:none; /*Retire le soulignement des pseudos de la liste */
}
 
/* Liste des pseudos qui n'aiment pas un message */
 
.fa_dislike_list{background-color: transparent; /* Couleur de fond de la liste */
  color: none; /* Couleur de la police d'écriture de la liste */
  font-family: Trebuchet MS; /* Police d'écriture de la liste */
  font-size: 11.4px; /* Taille de la police d'écriture de la liste */
}
.fa_dislike_list:hover{background-color: transparent; /* Couleur de fond de la liste */
  color: none; /* Couleur de la police d'écriture de la liste */
  font-family: Trebuchet MS; /* Police d'écriture de la liste */
  font-size: 11.4px; /* Taille de la police d'écriture de la liste */
}
 
.fa_dislike_list a{background-color: transparent; /* Couleur de fond de la liste */
    color: #000000; /* Couleur des pseudos de la liste */
    font-family: Trebuchet MS; /* Police d'écriture des pseudos de la liste */
    font-size: 11.4px; /* Taille de la police d'écriture des pseudos de la liste */
    text-decoration:none; /*Retire le soulignement des pseudos de la liste */
}
 
 
.fa_like_div .rep-button,.fa_like_div .rep-button:active{box-shadow: none!important;}
.fa_like_div .rep-nb{border:none!important;}
/******** Personnalisation des textes des boutons ********/
 
/* Couleur du texte du bouton J'aime */
 
.fa_like {
  color: none;
  border:none;
}
 
/* Couleur du texte du bouton J'aime (active) */
 
.fa_liked {
  color: none;
  border:none;
}
 
/* Couleur du texte du bouton Je n'aime pas */
 
.fa_dislike {
  color: none;
  border:none;
}
 
/* Couleur du texte du bouton Je n'aime pas (active) */
 
.fa_disliked {
  color: none;
  border:none;
}
 
/******** Personnalisation avancée des boutons ********/
 
.rep-button, .rep-button:active, .rep-button:focus {background: transparent; /* Couleur de fond */
    border: none; /* Couleur de la bordure du bouton */
    border-radius: 0px; /* Bordure arrondis du bouton */
    box-shadow: 0; /* Ombre de la bordure du bouton */
    font-family: Trebuchet MS; /* Police d'écriture du bouton */
    font-size: 11.4px; /* Taille de la police d'écriture du bouton */
    font-weight: 700; /* Taille de la police grasse du bouton */
    height: 17px; /* Hauteur des boutons */
    text-transform: none; /* Pour mettre une majuscule aux noms des boutons */}

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
     
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
        {
            if( $(this).is(":visible") )
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
        });
        }
    }
    catch(e) { }
 
  return false;
};

//]]>
</script>

<table><tr><td><div id="1st">
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> 
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
  <!-- END switch_user_authreply --></div></td><td><div id="2nd">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
{NAV_CAT_DESC_SECOND}</div></td></tr></table>
       
     

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
  <tr align="right">
      <td class="catHead" colspan="2" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint"> </td>
              <td align="center" class="t-title">
                  <h1 class="cattitle"> {TOPIC_TITLE}</h1>
              </td>
              <td align="right" width="9%" class="browse-arrows">
                        <!-- BEGIN switch_isconnect -->
                        <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
                        <!-- END switch_isconnect -->
                        <a href="#bottom">{L_GOTO_DOWN}</a>
                    </td>
            </tr>
        </table>
      </td>
  </tr>
  <!-- BEGIN topicpagination -->
  <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END topicpagination -->
  {POLL_DISPLAY}
  <tr>
          <th class="thLeft" nowrap="nowrap" width="150px" height="26"><div id="aut">{L_AUTHOR}</div></th>
          <th class="thRight" nowrap="nowrap"><div id="mes">{L_MESSAGE}</div></th>
  </tr>
  <!-- BEGIN postrow -->
  <!-- BEGIN hidden -->
  <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
  </tr>
  <!-- END hidden -->
  <!-- BEGIN displayed -->
  <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"><div id="profil"><div id="onlinepro">{postrow.displayed.ONLINE_IMG}</div>
            <div id="rangpro"></div>
            {postrow.displayed.RANK_IMAGE}
        <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_AVATAR}<br /><br />
                          <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong><div id="pseudopro">{postrow.displayed.POSTER_NAME}</div></strong></span><div id="sep"></div><div id="promp">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG}</div><div id="sep"></div> 
                          <div id="infopro"><!-- BEGIN profile_field -->
                            <span class="ChampsProfil">{postrow.displayed.profile_field.LABEL} <sbn>{postrow.displayed.profile_field.CONTENT}</sbn>{postrow.displayed.profile_field.SEPARATOR}</span>
                          <!-- END profile_field --></div>
            {postrow.displayed.POSTER_RPG}
        </span><br />
        <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
            <div id="contactpro"><!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></div> </div></td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                                  <td><div id="titsuj"><span class="postdetails"><a href="#{postrow.displayed.U_POST_ID}"># {L_POST_SUBJECT} ☆ {postrow.displayed.POST_SUBJECT}</a>    <br>{postrow.displayed.POST_DATE}</span> 
               
                  <div id="optsuj">{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} 
                                 
            <tr>
              <td colspan="2" class="hr">
                  <!-- 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><img src="https://www.zupimages.net/up/21/08/pt1v.png"></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}"><span><img src="https://www.zupimages.net/up/21/08/jnhy.png"></span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}</button>
                    <!-- END switch_dislike_button --><!-- END switch_likes_active -->  <!-- BEGIN switch_likes_active --><div class="fa_like_div"><div class="text"><!-- 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}</div><!-- END switch_dislike_list --></div></div></div><!-- END switch_likes_active --></td> </tr>
            <tr>
              <td colspan="2">
                  <!-- 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 -->

                  <div class="postbody">
 
                    <div>{postrow.displayed.MESSAGE}</div>

                    <!-- BEGIN switch_attachments -->
                    <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                          <!-- BEGIN switch_post_attachments -->
                          <dl class="file">
                              <dt>
                                <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->

                                <!-- BEGIN switch_no_dl_att -->
                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                          </dl>
                          <!-- END switch_post_attachments -->
                        </dd>
                    </dl>
                    <!-- END switch_attachments -->

                    <div class="clear"></div>
                    <!-- BEGIN switch_signature -->
                    <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                    </div>
                    <!-- END switch_signature -->
                          <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>                         
      </td>
              </tr></table>
  <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
        <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
      </td>
  </tr>
  <!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
  </tr>
  <!-- END first_post_br -->
  <!-- END displayed -->
  <!-- END postrow -->
  <!-- BEGIN no_post -->
  <tr align="center">
      <td class="row1" colspan="2" height="28">
        <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
  </tr>
  <!-- END no_post -->
  <tr align="right">
      <td class="catBottom" colspan="2" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint"> </td>
              <td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td>
              <td align="right" nowrap="nowrap" width="9%" class="browse-arrows">
                        <!-- BEGIN switch_isconnect -->
                        <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
                        <!-- END switch_isconnect -->
                        <a href="#top">{L_BACK_TO_TOP}</a>
                    </td>
            </tr>
        </table>
      </td>
  </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
  <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
  </tr>
  <!-- BEGIN switch_user_logged_in -->
  <!-- BEGIN watchtopic -->
  <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
  </tr>
  <!-- END watchtopic -->
  <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
  <tr>
      <td class="catBottom" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
              <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
            </tr>
        </table>
      </td>
  </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
  <tr>
      <td class="catBottom" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
              <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
            </tr>
        </table>
      </td>
  </tr>
  <tr>
      <td class="row2 postbody" valign="top">
        <!-- BEGIN link -->
        » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
        <!-- END link -->
      </td>
  </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
  <tbody>
      <tr>
        <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                  <tr>
                    <td valign="top">
                        <div class="cattitle"> {L_FORUM_RULES}</div>
                    </td>
                  </tr>
              </tbody>
            </table>
        </td>
      </tr>
      <tr>
        <td class="row1 clearfix">
            <table>
              <tr>
                  <!-- BEGIN switch_forum_rule_image -->
                  <td class="logo">
                    <img src="{RULE_IMG_URL}" alt="" />
                  </td>
                  <!-- END switch_forum_rule_image -->
                  <td class="rules postbody">
                    {RULE_MSG}
                  </td>
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
        <!-- BEGIN switch_user_logged_in -->
        <a name="quickreply"></a>
        {QUICK_REPLY_FORM}<br />
        <!-- END switch_user_logged_in -->
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
        <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
        <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <!-- BEGIN show_permissions -->
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  <!-- END show_permissions -->
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
        <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a> 
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
        </span>
      </td>

      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

      <!-- BEGIN moderation_panel -->
      <td align="center">
        <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
        <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
  </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
        <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
        </form>
      </td>
  </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

[cobain.]

petit up, personne pour me guider ?

[Invité]

Hello cobain.,

alors on peut faire quelque chose mais le résultat se fera seulement si la page a était actualisé.
Pour une meilleure compréhension , lorsque tu cliqueras sur les images "J'aime" ou "J'aime pas" représentés par des images, tu n'auras aucun effet.

Voilà dans un premier temps,ensuite j'ai revu ton template afin d'attribuer des class aux deux images des likes.
J'ai positionné les résultats des likes au dessus des images afin d'avoir un rendu d'infobulle.
Pour avoir quelque chose de correcte , on aura une opacité et un hauteur.
Donc sur le message, tu auras un vide en haut de 20px et ceci est normal et on ne pourra pas faire autrement chère amie.

Remplaces donc tout le contenu par celui-ci:

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
    
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
        {
            if( $(this).is(":visible") )
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
              $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
        });
        }
    }
    catch(e) { }
 
  return false;
};

//]]>
</script>

<table><tr><td><div id="1st">
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
  <!-- END switch_user_authreply --></div></td><td><div id="2nd">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
{NAV_CAT_DESC_SECOND}</div></td></tr></table>
      
    

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
  <tr align="right">
      <td class="catHead" colspan="2" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint"> </td>
              <td align="center" class="t-title">
                  <h1 class="cattitle"> {TOPIC_TITLE}</h1>
              </td>
              <td align="right" width="9%" class="browse-arrows">
                        <!-- BEGIN switch_isconnect -->
                        <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
                        <!-- END switch_isconnect -->
                        <a href="#bottom">{L_GOTO_DOWN}</a>
                    </td>
            </tr>
        </table>
      </td>
  </tr>
  <!-- BEGIN topicpagination -->
  <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END topicpagination -->
  {POLL_DISPLAY}
  <tr>
          <th class="thLeft" nowrap="nowrap" width="150px" height="26"><div id="aut">{L_AUTHOR}</div></th>
          <th class="thRight" nowrap="nowrap"><div id="mes">{L_MESSAGE}</div></th>
  </tr>
  <!-- BEGIN postrow -->
  <!-- BEGIN hidden -->
  <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
  </tr>
  <!-- END hidden -->
  <!-- BEGIN displayed -->
  <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"><div id="profil"><div id="onlinepro">{postrow.displayed.ONLINE_IMG}</div>
            <div id="rangpro"></div>
            {postrow.displayed.RANK_IMAGE}
        <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_AVATAR}<br /><br />
                          <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong><div id="pseudopro">{postrow.displayed.POSTER_NAME}</div></strong></span><div id="sep"></div><div id="promp">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG}</div><div id="sep"></div>
                          <div id="infopro"><!-- BEGIN profile_field -->
                            <span class="ChampsProfil">{postrow.displayed.profile_field.LABEL} <sbn>{postrow.displayed.profile_field.CONTENT}</sbn>{postrow.displayed.profile_field.SEPARATOR}</span>
                          <!-- END profile_field --></div>
            {postrow.displayed.POSTER_RPG}
        </span><br />
        <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
            <div id="contactpro"><!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></div> </div></td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                                  <td><div id="titsuj"><span class="postdetails"><a href="#{postrow.displayed.U_POST_ID}"># {L_POST_SUBJECT} ☆ {postrow.displayed.POST_SUBJECT}</a>    <br>{postrow.displayed.POST_DATE}</span>
              
                  <div id="optsuj">{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}
                                
            <tr>
              <td colspan="2" class="hr">
                  <!-- 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 style="margin-top: 32px;">
                  <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><img src="https://www.zupimages.net/up/21/08/pt1v.png"class="M14_img_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}">
                    <span><img src="https://www.zupimages.net/up/21/08/jnhy.png"class="M14_img_dislike"/></span>
                    {postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}</button>
                  </div>
                    <!-- END switch_dislike_button -->
                  <!-- END switch_likes_active -->  
                  <!-- BEGIN switch_likes_active -->              
                  
                  
                </div><br />
              <!-- END switch_likes_active -->
                    </td> </tr>
                  
            <tr>
              <td colspan="2">
                  <!-- 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 -->
                <br />
                  <div class="postbody">
 
                    <div>{postrow.displayed.MESSAGE}</div>

                    <!-- BEGIN switch_attachments -->
                    <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                          <!-- BEGIN switch_post_attachments -->
                          <dl class="file">
                              <dt>
                                <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                <!-- BEGIN switch_dl_att -->
                                <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_dl_att -->

                                <!-- BEGIN switch_no_dl_att -->
                                {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                          </dl>
                          <!-- END switch_post_attachments -->
                        </dd>
                    </dl>
                    <!-- END switch_attachments -->

                    <div class="clear"></div>
                    <!-- BEGIN switch_signature -->
                    <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                    </div>
                    <!-- END switch_signature -->
                          <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>                        
      </td>
              </tr></table>
  <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
        <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
      </td>
  </tr>
  <!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
  </tr>
  <!-- END first_post_br -->
  <!-- END displayed -->
  <!-- END postrow -->
  <!-- BEGIN no_post -->
  <tr align="center">
      <td class="row1" colspan="2" height="28">
        <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
  </tr>
  <!-- END no_post -->
  <tr align="right">
      <td class="catBottom" colspan="2" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="9%" class="noprint"> </td>
              <td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td>
              <td align="right" nowrap="nowrap" width="9%" class="browse-arrows">
                        <!-- BEGIN switch_isconnect -->
                        <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
                        <!-- END switch_isconnect -->
                        <a href="#top">{L_BACK_TO_TOP}</a>
                    </td>
            </tr>
        </table>
      </td>
  </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
  <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
  </tr>
  <!-- BEGIN switch_user_logged_in -->
  <!-- BEGIN watchtopic -->
  <tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
  </tr>
  <!-- END watchtopic -->
  <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
  <tr>
      <td class="catBottom" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
              <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
            </tr>
        </table>
      </td>
  </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
  <tr>
      <td class="catBottom" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
              <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
            </tr>
        </table>
      </td>
  </tr>
  <tr>
      <td class="row2 postbody" valign="top">
        <!-- BEGIN link -->
        » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
        <!-- END link -->
      </td>
  </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
  <tbody>
      <tr>
        <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                  <tr>
                    <td valign="top">
                        <div class="cattitle"> {L_FORUM_RULES}</div>
                    </td>
                  </tr>
              </tbody>
            </table>
        </td>
      </tr>
      <tr>
        <td class="row1 clearfix">
            <table>
              <tr>
                  <!-- BEGIN switch_forum_rule_image -->
                  <td class="logo">
                    <img src="{RULE_IMG_URL}" alt="" />
                  </td>
                  <!-- END switch_forum_rule_image -->
                  <td class="rules postbody">
                    {RULE_MSG}
                  </td>
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
        <!-- BEGIN switch_user_logged_in -->
        <a name="quickreply"></a>
        {QUICK_REPLY_FORM}<br />
        <!-- END switch_user_logged_in -->
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
        <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
        <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <!-- BEGIN show_permissions -->
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                  <!-- END show_permissions -->
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
  <tr>
      <td style="margin:0; padding: 0;" colspan="2">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
            <tbody>
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                  <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
              </tr>
            </table>
        </td>
      </tr>
  </tbody>
        </table>
      </td>
  </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
        <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
        </span>
      </td>

      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

      <!-- BEGIN moderation_panel -->
      <td align="center">
        <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
        <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
  </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
        <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
        </form>
      </td>
  </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>


Penses a enregistrer puis à valider en cliquant respectivement sur  puis



En complément de ta css:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


/*LES INFOBULLES POSITIVES ET NEGATIVES*/
p.fa_like_list,p.fa_dislike_list
{
  opacity:0;
  height:20px;
  line-height:20px;
  transition: opacity 0.5s ease-in-out;
  margin-top: 6px;
  padding:2px;
  min-width: 10%;
  width:auto;
  max-width:80%;
  border-radius:6px;
  position:absolute;
}
/*INFOBULLES POSITIVES*/
p.fa_like_list{border:1px solid darkgreen;color:darkgreen;}
/*LES PSEUDOS INFOBULLES POSITIVES*/
p.fa_like_list a[href^="/u"]{color:darkgreen!important;}
/*LA PETITE FLECHE INFOBULLES POSITIVES*/
p.fa_like_list:before
{
  content:"";
 position:absolute;
 height : 0;
 width : 0;
 border-top : 8px solid darkgreen;
 border-right :5px solid transparent;
 border-left : 3px solid transparent;  
/*on deplace le petit triangle si besoin en modifiant la valeur*/
  margin-top: 22px;
margin-left: 10px;
}
/*INFOBULLES NEGATIVES*/
p.fa_dislike_list{border:1px solid darkred;color:darkred;}
/*LES PSEUDOS INFOBULLES POSITIVES*/
p.fa_dislike_list a[href^="/u"]{color:darkred!important;}
/*LA PETITE FLECHE INFOBULLES NEGATIVES*/
p.fa_dislike_list:before
{
  content:"";
 position:absolute;
 height : 0;
 width : 0;
 border-top : 8px solid darkred;
 border-right :5px solid transparent;
 border-left : 3px solid transparent;  
/*on deplace le petit triangle si besoin en modifiant la valeur*/
margin-top: 22px;
margin-left: 60px;
}
 


Penses à cliquer sur le bouton

La css est commentée pour d'éventuelles modifications!!

Les rendus:
Pour les likes positifs tout sera de couleur verte:
Pour les likes négatifs tout sera de couleur rouge:
Tu pourras modifier cela dans la feuille de style .






Puis le script qui fera l'animation:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher  Sur les sujets

Déposes ceci:

Code:


$(function(){
$('.fa_like_div').each(function(){
var $this=$(this);
var like=$(this).find('p.fa_like_list').find('a[href^="/u"]').length;
var dislike=$(this).find('p.fa_dislike_list').find('a[href^="/u"]').length;
if(like)
{$this.find('img.M14_img_like').hover(function(){
$this.find('p.fa_like_list').css('opacity','1');}, function(){$this.find('p.fa_like_list').css('opacity','0');
});}
if(dislike){
$this.find('img.M14_img_dislike').hover(function(){
$this.find('p.fa_dislike_list').css('opacity','1');}, function(){$this.find('p.fa_dislike_list').css('opacity','0');
});}});});



Penses à cliquer sur le bouton VALIDER

Et voilou chère amie .

a++

[cobain.]

Merci beaucoup, j'ai même compris comment ça fonctionnait donc très pratique pour modifier de mon côté ! C'est tout bon pour nous.