:before , :after d'un CSS en fonction d'un JS...

[Kaehlyth]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Salutations à tous et à toutes

Suite à l'aide apportée par Milouze14 concernant la possibilité de changer le message généré par une variable d'édition, Je voulais savoir comment faire en sorte qu'un code comme :

Code:

<div style="background: linear-gradient(to left, rgba(184, 145, 113, 0.19), rgba(4, 4, 4, 0.35));padding: 10px;margin-top: 10px;border-radius: 8px;position: relative;animation: rotateColors 5s linear infinite;">

que j'utilise actuellement sans l'animation, n'ajoute le : animation: rotateColors 5s linear infinite;" que lorsqu'une édition a été faite, pour attirer l'oeil sur cette édition ?

L'animation est un exemple très visuel mais ne sera pas appliqué sous ce code là, qui a déjà sa propre propriété/couleur beaucoup trop tape à l'oeil pour l'harmonie des messages.

J'ai connaissance d'un before:: et after:: en CSS, mais je n'ai aucune connaissance sur la combinaison possible avec un code JS...

Je vous remercie par avance,

belle soirée

[Kaehlyth]

Petit UP

[Kaehlyth]

Petit UP

[Milouze14]

Salut Kaehlyth ,
alors est-ce que le contenu du template est toujours le même suite à ton message ici:
https://forum.forumactif.com/t410294-changer-derniere-edition-par-commentaire-laisse#3416687

Code:

<div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                    </div>
                    <!-- END switch_signature -->
                  </div>
                <br />          
   <img src="https://zupimages.net/up/24/27/747x.png" style="max-width: 100%; height: auto; margin-right: 20px;" alt="Image HR"/><br />
                
        <!-- Première colonne avec l'image -->
<div style="display: flex; margin-top: -8px;">
<div style="flex: 0 0 auto; margin-right: 20px;">
<img src="https://zupimages.net/up/24/27/q1ke.png" style="max-width: 100%; height: auto; float: left; margin-top: 31px; margin-right: 0px;margin-left:10px;" alt="Image secondaire"/>
</div>
                  
<!-- Deuxième colonne avec le texte -->
    <div style="flex: 1; text-align: justify; position: relative;">
        <div class="message-container" style="background: linear-gradient(to left, rgba(184, 145, 113, 0.19), rgba(4, 4, 4, 0.35)); padding: 10px;margin-top:10px;border-radius: 8px;">
              <span class="gensmall M14_edit" style="display: block;">{postrow.displayed.EDITED_MESSAGE}</span></div>
<script type="text/javascript">
$('.M14_edit').each(function(){
  $(this).html($(this).html().replace(/\Dernière édition par/g,"<span class='Edit_first'>Une note hors-jeu à votre attention a été laissée par").replace(/\(/g,"</span><br />("));
});
</script>
</div>
                </div>  


Surtout cette div avec comme class:

Code:

 <div class="message-container">

Si je comprend bien tu veux avoir cette apparence seulement si il  ya une édition?

Dans ce cas supprime le style de cette div:

Code:

     <div class="message-container" style="background: linear-gradient(to left, rgba(184, 145, 113, 0.19), rgba(4, 4, 4, 0.35)); padding: 10px;margin-top:10px;border-radius: 8px;">

Pour la laisser dépourvue d'affichage:

Code:

<div class="message-container">

Dans ce cas, on peut modifier le script (toujours dans le template afin d'avoir aussi une class lors d'une édition
Et dans ce cas on ajoute une class (Edit_animation) à la div citée

Il ne te reste plus qu'à ajoutée dans ta feuille de style l'animation que tu désires:

Code:


.Edit_animation
{

}


Pour cela remplace le script que je t'ai donné ici:
https://forum.forumactif.com/t410294-changer-derniere-edition-par-commentaire-laisse#3416747

Code:

<script type="text/javascript">
$('.M14_edit').each(function(){
  $(this).html($(this).html().replace(/\Dernière édition par/g,"<span class='Edit_first'>Une note hors-jeu à votre attention a été laissée par").replace(/\(/g,"</span><br />(").replace(/\Raison/g,"Commentaires Hors-jeu"));
});
</script>

Par celui-ci:

Code:

<script type="text/javascript">
$('.M14_edit').each(function(){
  $(this).html($(this).html().replace(/\Dernière édition par/g,"<span class='Edit_first'>Une note hors-jeu à votre attention a été laissée par").replace(/\(/g,"</span><br />(").replace(/\Raison/g,"<span class='Edit_last'>Commentaires Hors-jeu</span>"));
});
</script>

Ou celui-ci sans les parenthèses:

Code:


<script type="text/javascript">
$('.M14_edit').each(function(){
  $(this).html($(this).html().replace(/\Dernière édition par/g,"<span class='Edit_first'>Une note hors-jeu à votre attention a été laissée par").replace(/\(/g,"</span><br />").replace(/\)/g,"").replace(/\Raison/g,"<span class='Edit_last'>Commentaires Hors-jeu</span>"));
});
</script>


L'édition commentée aura désormais cette class qui va nous servir en cas d'édtion sur le script déposé sur les sujets.


Ensuite sur mon message :
https://forum.forumactif.com/t410294-changer-derniere-edition-par-commentaire-laisse#3416596

Ou je mentionne le script a déposer sur les sujets:

Code:

 
$(function(){$(function(){
$('.Edit_first').each(function(){
 $(this).html($(this).html().replace(/\s\le\s/g,"<i style='display:none;'>le").replace(/fois/g,"</i>"));
});});});

Remplace le tout par:

Code:


$(function(){$(function(){
$('.Edit_first').each(function(){
 $(this).html($(this).html().replace(/\s\le\s/g,"<i style='display:none;'>le").replace(/fois/g,"</i>"));
});});});

$(function(){$(function(){
$('.gensmall.M14_edit').find('.Edit_last').each(function(){
var a=$(this).length;
  if(a)
  {
    $(this).closest('.message-container').addClass('Edit_animation');
  }
});})});


Le rendu: avec ma css de base (vraimeent de base      ) :

Code:

.Edit_animation{border:6px solid darkred;background: linear-gradient(to left, rgba(184, 145, 113, 0.19), rgba(4, 4, 4, 0.35)); padding: 10px;margin-top:10px;border-radius: 8px;}

Le visuel avec parenthèses:





Sans les parenthèses:



Et voila



a++

[Kaehlyth]

Merci Milouze pour tes explications pour comprendre aussi comment tu as fait.  


EDIT 1 après aperçu d'une boulette que j'ai faite: C'est niquel !  J'ai eu des gros soucis d'yeux allumés sur les codes mais je reviens vers toi car du coup, ce n'est pas exactement ce que je souhaitais :




En fait, cet effet ne doit apparaître que pour la dernière note que je viens de mettre, pas les anciennes.
(D'ailleurs c'est génial car les notes que je n'ai pas remplisse, donc 0 édition sur un post, reste sans cadre rouge et je n'ai plus les parenthèses !!!   )

Est-ce que cela est possible ou trop compliqué de le faire ?

Si jamais ce n'est pas possible, je peux trouver une alternative CSS pour que ce soit affiché sans que cela ne choque.

Code:

  .Edit_animation {position: relative;padding: 16px; /* 10px de padding + 6px de bordure */margin-top: 10px;background: linear-gradient(to left, rgba(184, 145, 113, 0.19), rgba(4, 4, 4, 0.35));
border-radius: 8px; /* Rayon de bordure pour le contenu */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), /* Ombre intérieure */0 0 15px rgba(0, 0, 0, 0.4); /* Ombre extérieure */overflow: hidden; /* Pour que le pseudo-élément ne dépasse pas les bords arrondis */}
  .Edit_animation::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;border: 6px solid transparent;
  border-image: url('https://jooinn.com/images/wood-panel-texture-6.jpg') 30 round; /* Image de bordure en bois */border-radius: 8px; /* Rayon de bordure pour l'effet de cadre en bois */
  pointer-events: none; /* Pour que le pseudo-élément soit ignoré par les interactions de la souris */}

Merci à toi de ta patience !

[Milouze14]

Re,
alors je ne comprends pas le fait de ne pas toucher les autres éditions !!
Tu peux préciser stp chère amie .

Je verrais ta réponse dans la soirée désormais.

a++

[Kaehlyth]

Bien sûr, prenez le temps qu'il faut sur les demandes loufoques qu'on vous propose !

Ce que j'entendais, c'était sur sur le même principe qu'un nouveau message qui est posté avec ses effets de nouvelles images et couleurs , ce soit le cas pour la dernière édition faite !

A savoir :

Post A - édité
post B - pas édité
Post C - dernière édition -  cadre rouge

De telle sorte à attirer l'oeil !

Ou encore :


Post A - édité
post B - pas édité
Post C - dernière édition -  cadre rouge
Post D - pas édité
Post E - pas édité

Merci à toi

Belle journée

[Milouze14]

Re,
Alors rapidement car je suis avec mon téléphone.
L’édition se verra seulement si il y a une édition avec un commentaire.
Avec l’astuce donnée précédemment.
Tu dois avoir juste un effet sur un message si il y a eut une édition avec un commentaire.
Tu as le contenu du template stp !

Post A - édité
post B - pas édité
Post C - dernière édition -  cadre rouge

Actuellement
Post A et Post B doit être invisible.
Post C est le seul concerné  

Edit: alors pour le post A :

Tu peux editer et supprimer tout le contenu des scripts  dans la gestion des scripts:

Code:


$(function(){$(function(){
$('.Edit_first').each(function(){
 $(this).html($(this).html().replace(/\s\le\s/g,"<i style='display:none;'>le").replace(/fois/g,"</i>"));
});});});
 
$(function(){$(function(){
$('.gensmall.M14_edit').find('.Edit_last').each(function(){
var a=$(this).length;
  if(a)
  {
    $(this).closest('.message-container').addClass('Edit_animation');
  }
});})});


Remplaces par ceux-ci:

Code:


$(function(){$(function(){
$('.Edit_first').each(function(){
 $(this).html($(this).html().replace(/\s\le\s/g,"<i style='display:none;'>le").replace(/fois/g,"</i>"));
});});});
 
$(function(){$(function(){
$('.message-container').each(function(){
var a=$(this).find('.Edit_last').length;
var b=$(this).find('.Edit_first').length;
if(a&&b)
{
$(this).addClass('Edit_animation');
}
if(!a&&b)
{
$(this).addClass('Edit_animation_first');
}
  
});})});


Puis la css:

Code:


.Edit_animation_first
{
}



a++

[Kaehlyth]

Coucou !

Je suis en famille et ne peux pas tester de suite, je te remercie en tout cas !

Je te présente mon template. Sache que celui-ci n'est pas propre, je ne suis douée pour faire des trucs vraiment clean...
Belle soirée à toi, je t'ai fournis la bestiole avec ton code dedans !

[Milouze14]

Re,
pas de soucis, profites bien .

J'ai édité mon message précédent pour le script afin d'intégrer le Post A et Post B
Autre chose cette image est en relation avec l'édition et doit elle être affichée si il n'y a pas d'édition? :



On voit cela demain.
Bonne soirée .
a++

[Kaehlyth]

Re,
pas de soucis, profites bien .

J'ai édité mon message précédent pour le script afin d'intégrer le Post A et Post B
Autre chose cette image est en relation avec l'édition et doit elle être affichée si il n'y a pas d'édition? :



On voit cela demain.
Bonne soirée .
a++

Coucou Milouze !

Non j'avais tenté de voir si cela faisait "joli" à voir mais finalement c'est pas si joli que ça . J'attends que vous regardez l'ensemble du code avant d'installer le code de hier ?

[Milouze14]

Coucou Kaehlyth,

alors on peut supprimer cette image alors du code html ?

Sinon,tu peux déjà avancer avec les modifications apportées sur mon message:
https://forum.forumactif.com/t410331-before-after-d-un-css-en-fonction-d-un-js#3416838


Et celle-ci:



Doit elle etre affichée seulement si il y a édition ?
a++

[Kaehlyth]

Oui tout à fait.
J'installe ça à la fraîche et andiamo.

J'avais édité cette nuit le code que j'ai tenté de mettre au propre, j'avais un peu honte du Bronx dedans... Est-ce celui sur lequel vous travaillez pour plus de clarté ?

[Milouze14]

Re,
ok merci,
oui je travaille juste sur la partie de l'édition afin de ne rien afficher tant qu'il n'y a pas d'édition .

a++

[Milouze14]

Re,
alors, j'ai supprimé les divs inutiles et tout inséré dans la div ayant cette class (message-container ):


Ton template dans sa totalité:

Code:

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
  //<![CDATA[
  var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
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>

<!-- BEGIN switch_push_direct_send -->
<div id="push-answer" class="jqmWindow"></div>
<script src="{JQUERY_DIR}jqmodal/jqmodal.js" type="text/javascript"></script>
<script>
  //<![CDATA[
  $(document).ready(function() {
      $('#push-answer').jqm({toTop: true});

      $('#push-bell').click(function () {
        return sendWebPush({TOPIC_ID});
      });

      function sendWebPush(tId) {
        $.get("/ajax_push.php?topicID=" + tId).done(showPushAnswer);
      }

      function showPushAnswer(data) {
        $('#push-answer').html(data).jqmShow();
        $('.jqmOverlay').bgiframe();
        $('#push-answer').bgiframe();
      }
  });
  //]]>
</script>
<!-- END switch_push_direct_send -->

<table width="100%" border="0" cellspacing="2" cellpadding="0"style="display:none;">
  <tr>
      <td align="left" valign="middle" nowrap="nowrap">
        <span class="nav">
        <!-- 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>&nbsp;&nbsp;&nbsp;
        <!-- 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 -->
        </span>
      </td>
      <td class="nav" valign="middle" width="100%">
        <span class="nav">
                <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}
            </span>
      </td>
      <td align="right" valign="bottom" nowrap="nowrap" width="100%"style="display:none;">
        <!-- BEGIN switch_twitter_btn -->
        <span id="twitter_btn" style="margin-left: 6px; ">
                <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </span>
        <!-- END switch_twitter_btn -->

        <!-- BEGIN switch_fb_likebtn -->
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
        <!-- END switch_fb_likebtn -->

        <span class="gensmall bold">
            <!-- BEGIN switch_plus_menu -->
            &nbsp;
            <div id="addthis-toolbar" style="display: inline-block;">
              <div class="btn-floating-left" tabindex="100">
                  {L_SHARE}
              </div>
              <div class="addthis-toolbar-btn" style="display:none;">
                  {switch_plus_menu.SOCIAL_BUTTONS}
              </div>
            </div>
            &nbsp;|&nbsp;
            <script type="text/javascript">//<![CDATA[
              var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
              var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
              var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
              var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
              var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
              insert_plus_menu('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
              //]]>
            </script>
            {switch_plus_menu.JS_SOCIAL_BUTTONS}
            <!-- END switch_plus_menu -->
        </span>
      </td>
  </tr>
</table>

<table class="forumline" width="99%" border="0" cellspacing="1" cellpadding="0" style="margin-left:6px;border-radius:44px;">
  <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"style="display:none">&nbsp;</td>
              <td align="center" class="t-title">
                <h1 class="cattitle">&nbsp;<div class="mp_titre">{TOPIC_TITLE}</div><!-- BEGIN switch_push_direct_send --><span id="push-bell" title="{switch_push_direct_send.L_PUSH_SEND}" style="display:none"></span><!-- END switch_push_direct_send --></h1>
              </td>
              <td align="right" width="9%" class="browse-arrows" style="display:none">
                        <!-- BEGIN switch_isconnect -->
                        <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;
                        <!-- END switch_isconnect -->
                        <a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;
                    </td>
            </tr>
        </table>
      </td>
  </tr>
  <tr>
      <td class="row1" colspan="2" style="background: none; box-shadow: none;"><span class="gensmall">{POSTERS_LIST}</span></td>
  </tr>
  <!-- BEGIN topicpagination -->
  <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"style="background: none;box-shadow: none;padding: 0 0 10px;"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END topicpagination -->
  {POLL_DISPLAY}
  <tr style="display:none">
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap">{L_MESSAGE}</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="multi_post 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="188px" align="center;">
      <a name="{postrow.displayed.U_POST_ID}"></a>
 
 
      <!----------------------------------------------- DEBUT AFFICHAGE PROFIL -->
 
      <div class="post_onlin">{postrow.displayed.ONLINE_IMG}</div>
      <div class="name_prof name">
        <span class="multi_pseudo">{postrow.displayed.POSTER_NAME}</span>
      </div>
      <div class="rank">
        <div class="rang_perso">{postrow.displayed.POSTER_RANK}</div>
      </div>
 
      <div class="mess_pro_bloc_avatar">
        <div class="englob">
            <div class="imgp"><span class="multi_avatar">{postrow.displayed.POSTER_AVATAR}</span><span class="multi_hoveravatar"></span></div>
         
     
        <div id="container">
          <nav>
              <span class="is-active"></span>
              <a class="home active" href=""><i class="fas fa-user"></i></a>
              <a class="inventaire" href="" title="Inventaire"><i class="fas fa-sack-dollar"></i></a>
              <a class="perso_stats" href="" title="Points de Pouvoir"><i class="fas fa-dice-d20"></i></a>
              <a class="perso_code" href="" title="Affinité élémentaire"><i class="fas fa-hands-holding-circle"></i></a>
              <a class="note" href="" title="Statistiques"><i class="fas fa-hand-fist"></i></a>
          </nav>
          <div class="pages">
            <div class="comp comp-home is-active">
            <div class="mess_pro_avatar_txt">
                  <div class="infosp" align="center">
                      <div class="champs_profil">
                              <!-- BEGIN profile_field -->
                              <span class="champ_profil">{postrow.displayed.profile_field.LABEL}
                              <span class="champ_contenu">{postrow.displayed.profile_field.CONTENT}</span>
                              </span>{postrow.displayed.profile_field.SEPARATOR}
                              <!-- END profile_field -->
                      </div>
                 
                      <div class="contact_profil">         
                              {postrow.displayed.PROFILE_IMG}{postrow.displayed.PM_IMG}
                      </div>
                  </div>
                   
                </div>
            </div>
            <div class="comp comp-inventaire">
                <header>
                    <h1>Inventaire</h1>
                </header>
                <section>
                    <div class="profile_inventaire">
                    <!-- BEGIN profile_field -->
                    <div class="profile_inventaire_content"><script type="text/javascript">document.write(`{postrow.displayed.profile_field.LABEL}`.replace(" : ",""));</script> <span class="hover-content">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR} </div>
                    <!-- END profile_field -->
                    </div>
                </section>
            </div>
            <div class="comp comp-stats">
                <header>
                    <h1>Points de pouvoir</h1>
                </header>
                <section>
                  <div class="profile_stats">
                    <!-- BEGIN profile_field -->
                    <div class="profile_stats_content"><script type="text/javascript">document.write(`{postrow.displayed.profile_field.LABEL}`.replace(" : ",""));</script> <span class="hover-content">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR} </div>
                    <!-- END profile_field -->
                  </div>
                </section>
            </div>
            <div class="comp comp-code">
                <header>
                    <h1>Affinité élémentaire</h1>
                </header>
                <section>
                    <div class="profile_code">
                    <!-- BEGIN profile_field -->
                    <div class="profile_code_content"><script type="text/javascript">document.write(`{postrow.displayed.profile_field.LABEL}`.replace(" : ",""));</script> <span class="hover-content">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR} </div>
                    <!-- END profile_field -->
                  </div>
                </section>
            </div>
            <div class="comp comp-note">
                <header>
                    <h1>Statistiques</h1>
                </header>
                <section>
                    <div class="profile_notes">
                    <!-- BEGIN profile_field -->
                    <div class="profile_notes_content"><script type="text/javascript">document.write(`{postrow.displayed.profile_field.LABEL}`.replace(" : ",""));</script> <span class="hover-content">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR} </div>
                    <!-- END profile_field -->
                  </div>
                </section>
            </div>
          </div>
        </div>
          </div>
      </div>
   
   
      <div class="infobulle_avatar postdetails">
        <div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="bouton-profil">
          <img alt="profil+" src="https://i.servimg.com/u/f44/20/41/07/60/rpg11.png"/>
        </div>
        <div class="profil-cache" id="rpcache" style="display: none">
          {postrow.displayed.POSTER_RPG}<br />
        </div>

      </div>
   
   
      <script type="text/javascript">$('nav').find('a').click(function(e) {
                              e.preventDefault();
    $('nav').find('a.active').removeClass('active');
    $(this).addClass('active');
    if($('a.active').is('.inventaire')) {
        $('span.is-active').css('left','20%');
    } else if($('a.active').is('.perso_stats')) {
        $('span.is-active').css('left','40%');
    } else if($('a.active').is('.perso_code')) {
        $('span.is-active').css('left','60%');
    } else if($('a.active').is('.note')) {
        $('span.is-active').css('left','80%');
    } else {
        $('span.is-active').css('left','0%');
    }
    if($('.inventaire').is('.active')) {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-inventaire').addClass('is-active');
    } else if($('.perso_stats').is('.active')) {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-stats').addClass('is-active');
    } else if($('.perso_code').is('.active')) {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-code').addClass('is-active');
    } else if($('.note').is('.active')) {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-note').addClass('is-active');
    } else {
        $('.pages').find('.is-active').removeClass('is-active');
        $('.comp-home').addClass('is-active');
    };
});</script>
   
      <!---------------------{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />
      ------------------------ FIN AFFICHAGE PROFIL -->
 
    </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%">
        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
          <tr><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" class="HR-sujet"/>
            <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" class="HR-sujet2"/>
            <img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" class="HR-sujet3"/>
              <td><span class="postdetails">a conté l'histoire suivante : {postrow.displayed.POST_DATE}</span></td>
              <td valign="top" nowrap="nowrap" class="post-options">
                  {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>
              <td colspan="2" class="hr">
                  <hr />
              </td>
            </tr>
            <tr height="100%" valign="top">
              <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 -->
                </div><br/> 
  <img src="https://zupimages.net/up/24/27/747x.png" style="max-width: 100%;margin-bottom:6px;" alt="Image HR"/>

  <div class="message-container">
<span class="gensmall M14_edit" style="display: block; z-index: 2;">{postrow.displayed.EDITED_MESSAGE}</span>
     
 
<script type="text/javascript">
$('.M14_edit').each(function(){
  $(this).html($(this).html().replace(/\Dernière édition par/g,"<span class='Edit_first'>Une note hors-jeu à votre attention a été laissée par").replace(/\(/g,"</span><br />").replace(/\)/g,"").replace(/\Raison/g,"<span class='Edit_last'>Commentaires Hors-jeu</span>"));
});
</script>
    </div>

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

<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 -->
</table>


<!------------------------------------------ DEBUT INFOS ET MODERATION CACHEES ----------------------------->
<table class="forumline gensmall infocash" border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:none;">
          <tr>
         
            <td colspan="3">
              <table width="100%" border="0" cellpadding="0" width="100%" cellspacing="0">
                <tr>
                  <td class="row1" valign="middle" width="100%" align="center"style="background:none;box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.5);">
                    {PAGE_NUMBER}
                    <!-- BEGIN topicpagination -->
                    <br/>{PAGINATION}
                    <!-- END topicpagination -->
                  </td>
                  <td class="row1" align="right" valign="middle"style="background: none;box-shadow: none;">
                    <a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a>
                  </td>
                </tr>
              </table>
            </td>
         
          </tr>
          <tr>
         
            <td class="row2" valign="top"style="background: none;box-shadow: none;">
              <!-- BEGIN show_permissions -->
              <div id="topic_permissions">{S_AUTH_LIST}</div>
              <!-- END show_permissions -->
            </td>
         
            <td align="center" class="row1 t-title"style="background: none;box-shadow: none;">
              <div class="cattitle">{TOPIC_TITLE}</div>
              <div 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}
              </div>
            </td>
         
            <td class="row2"style="background: none;box-shadow: none;">
              <!-- BEGIN switch_user_logged_in -->
              <!-- BEGIN watchtopic -->
              <div id="topic_watch">{S_WATCH_TOPIC}</div>
              <!-- END watchtopic -->
              <!-- END switch_user_logged_in -->
              <div class="topic_mod_boutons">{S_TOPIC_ADMIN}</div>

            </td>
         
          </tr>
</table>
<table class="forumline gensmall infocash" border="0" cellpadding="0" width="100%" cellspacing="0" id="info_close" style="display:'';">
          <tr>
            <td class="row1" valign="middle" align="center" width="100%"style="background: none;box-shadow: none;">
              {PAGE_NUMBER}
              <!-- BEGIN topicpagination -->
              <br/>{PAGINATION}
              <!-- END topicpagination -->
            </td>
            <td  class="row1" align="right" valign="middle">
              <a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a>
            </td>
          </tr>
</table>
<!------------------------------------------ FIN INFOS ET MODERATION CACHEES ----------------------------->


<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="display:none;">
  <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="80"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <td class="row2" colspan="2" align="center" valign="top"width="80"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
      <!-- BEGIN topicpagination -->
    <td class="row1" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td><td class="row1" align="right" valign="top"></td>
      <!-- END topicpagination -->
  </tr>
</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">&nbsp;{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:'';background: none;box-shadow: none;margin: 1px 0px 1px 0px">
  <tr>
      <td class="catBottom" height="28">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        </table>
      </td>
  </tr>
  <tr>
      <td class="row2 postbody" valign="top">
        <!-- BEGIN link -->
        »&nbsp;<a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" title="{promot_trafic.link.TITLE}">{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="98%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px;background: none;box-shadow: none;padding: 0 0 10px;">
  <tbody>
      <tr>
        <td class="catBottom">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                  <tr>
                    <td valign="top">
                        <div class="cattitle">&nbsp;{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 -->


   
<!------------------------------------------ DEBUT REPONSE RAPIDE ----------------------------->

<!-- BEGIN switch_user_logged_in -->

<div id="rep-rapide">
<table class="forumline noprint" width="100%" border="0" cellspacing="1" cellpadding="0" style="background: linear-gradient(to left, rgba(184, 145, 113, 0.19), rgba(4, 4, 4, 0.35));">
  <tr class="post">
    <td width="150" class="row2" valign="top"><br/>
      <div class="englob"style="margin-left:10px;">
        <div class="imgp">
          <!--insertion ici de l avatar via javascript-->
        </div>
        <div class="infosp" align="center">
          <!--Arrière de l avatar via javascript-->
        </div>
      </div>
    </td>
 
<td class="row2" width="100%">
    <div class="name_prof name"><span class="multi_pseudo">Missive Rapide : Quels songes voulez-vous conter ?</span>
  <img src="https://2img.net/zupimages.net/up/24/28/7oin.png" border="0" style="margin-top: 3px;"/>
      </div>
  <a name="quickreply"></a>
  <div>
    {QUICK_REPLY_FORM}
  </div>

</td>
 
  </tr>
  </table>
</div>

<!-- END switch_user_logged_in -->

<!------------------------------------------ FIN REPONSE RAPIDE ----------------------------->



<form style="display:none;margin-top:-50px;" 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" style="box-shadow: none;">
  <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY} >
        <span class="nav" style="margin-top:-50px;">
            <!-- 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>&nbsp;&nbsp;&nbsp;
            <!-- 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}:&nbsp;{S_JUMPBOX_SELECT}&nbsp;<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">&nbsp;</span>
      </td>
      <!-- END moderation_panel -->
  </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
              <form style="display:none; white-space:nowrap;" 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}" />
                {S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" />
              </form>
<!-- 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 -->
<br /><br />

Il faut donc ajouter ce style dans ta CSS .
Le margin-left avec comme valeur 80px correspond à l'espace qui va recevoir la petite image qui va être gérée par le script.
Le max-width avec comme valeur correspond à la taille maximale du conteneur.

Code:


.message-container
{
margin-left:80px;
max-width: 90%;
}

Ensuite le script à éditer , supprimes le contenu et inséres celui-ci:

Code:


$(function(){$(function(){
$('.Edit_first').each(function(){
 $(this).html($(this).html().replace(/\s\le\s/g,"<i style='display:none;'>le").replace(/fois/g,"</i>"));
});});});
 
$(function(){$(function(){
$('.message-container').each(function(){
var a=$(this).find('.Edit_last').length;
var b=$(this).find('.Edit_first').length;
var c='<img src="https://zupimages.net/up/24/27/q1ke.png" style="float: left; margin-top: 31px;" alt="Image secondaire"/>';
if(a&&b)
{
$(this).before(c);
$(this).addClass('Edit_animation');
 
}
if(!a&&b)
{
$(this).before(c);
$(this).addClass('Edit_animation_first');
}
 
});})});



Dans le script tu as cette ligne:

Code:

var c='<img src="https://zupimages.net/up/24/27/q1ke.png" style="float: left; margin-top: 31px;" alt="Image secondaire"/>';

Tu peux jouer avec le style si besoin
a++

[Kaehlyth]

Je viens donc de prendre étape par étape :

- remplacer dans la gestion JS le code par celui que vous m'avez dit de mettre, le voici :

Code:

$(function(){$(function(){
$('.Edit_first').each(function(){
 $(this).html($(this).html().replace(/\s\le\s/g,"<i style='display:none;'>le").replace(/fois/g,"</i>"));
});});});
 
$(function(){$(function(){
$('.message-container').each(function(){
var a=$(this).find('.Edit_last').length;
var b=$(this).find('.Edit_first').length;
if(a&&b)
{
$(this).addClass('Edit_animation');
}
if(!a&&b)
{
$(this).addClass('Edit_animation_first');
}
  
});})});

J'ai remplacé mon template par celui que vous venez de mettre.
J'ai changé le javascript dans le template et ...

c'est revenu à zéro.




Voici mon CSS de base d'avant qui n'a pas bougé puisque les class existent toujours :



EDIT : Cela fonctionne, encore une fois, le matin j'ai les yeux collés !

[Milouze14]

Re,
je viens de regarder ton forum et à priori, tu n'as pas valider les modifications apportées dans ton template .

Tu as aussi cette CSS a ajouter si pas de commentaire:

Code:


.Edit_animation_first
{
}


a++

[Kaehlyth]

Re,
je viens de regarder ton forum et à priori, tu n'as pas valider les modifications apportées dans ton template .

Tu as aussi cette CSS a ajouter si pas de commentaire:

Code:


.Edit_animation_first
{
}


a++

Je ne valide jamais pour voir en =tt1 car je suis une boulette, la preuve en est au-dessus !
Par contre, c'est parce que j'avais utilisé votre vieux JS de hier soir, forcément, ça ne marchait pas. Etonnant n'est-ce pas ?


Par contre maintenant j'ai validé et voici le résultat : j'ai deux images ?




Et pour : .Edit_animation_first{}  -> Donc en gros, je peux en CSS dire de masquer des choses ? C'est à dire ? Remplace-t-il : .Edit_animation::before ?
Désolé, j'ai du mal à la comprennette mais ça ne vient pas de vous, j'ai des difficultés

[Milouze14]

Re,
alors pour :

Code:

 .Edit_animation_first{}

C'est la css si il y a eut une édition sans donner de raison.

Code:

.Edit_animation{}

C'est la css si il y a édition avec une raison .

Remplace-t-il : .Edit_animation::before ?

Non , c'est un style à part

a++

[Kaehlyth]

D'accord, je vais devoir dire d'afficher rien du tout ... à méditer sur comment s'y prendre maintenant !
Par contre, en effet pas d'animation pour la dernière édition.

Je dois surement trifouiller le CSS après avoir réglé la double image.

[Milouze14]

Re,

Je dois surement trifouiller le CSS après avoir réglé la double image.

Non , c'est ton template qui n'est pas validé
On va suivre l'évolution .
a++

[Kaehlyth]

D'accord !

Donc même si on se met en mode "visualiser" donc =TT1, le forum n'affiche pas forcément l'ensemble des modifications ?
En effet, le code semble fonctionner et plus de double image.





Vous avez parfaitement compris ma demande et vous avez été patient parce que je suis une boulette de l'infini !
Par contre, j'ai appris que pour des désirs un peu farfelu, si on n'est pas fort en JS, on peut aller se brosser ! Alors merci énormément d'avoir cette connaissance et de tous nous aider à votre hauteur.

Concernant cette partie de votre code, il est parfaitement fonctionnel, vous méritez des fleurs.

C'est résolu.

[Milouze14]

Re,
je ne passe jamais par ce biais là pour les templates, je valide directement mes modifications en prenant soin de faire des sauvegarde au préalable .
de rien chère amie et merci pour les fleurs   .

a++