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

2 participants

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

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

Message par Kaehlyth Lun 8 Juil 2024 - 19:55

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 ::fete::

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

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Mer 10 Juil 2024 - 10:09

Petit UP Very Happy
Kaehlyth

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Ven 12 Juil 2024 - 18:54

Petit UP Embarassed
Kaehlyth

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Sam 13 Juil 2024 - 7:13

Salut Kaehlyth Wink ,
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  Very Happy  Very Happy  ) :

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:


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


Sans les parenthèses:

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

Et voila Wink



a++
Milouze14

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Sam 13 Juil 2024 - 8:06

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


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 :

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


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 !!!  thumleft )

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. Very Happy

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 */}

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

Merci à toi de ta patience !
Kaehlyth

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Sam 13 Juil 2024 - 8:42

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

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

a++
Milouze14

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Sam 13 Juil 2024 - 8:54

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
Kaehlyth

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Sam 13 Juil 2024 - 14:31

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é Wink  

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++
Milouze14

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Sam 13 Juil 2024 - 19:52

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... Rolling Eyes Rolling Eyes
Belle soirée à toi, je t'ai fournis la bestiole avec ton code dedans !



Dernière édition par Kaehlyth le Sam 13 Juil 2024 - 23:01, édité 1 fois (Raison : Edition pour le code)
Kaehlyth

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Sam 13 Juil 2024 - 19:56

Re,
pas de soucis, profites bien Wink .

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? :

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

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

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Dim 14 Juil 2024 - 8:01

Milouze14 a écrit:Re,
pas de soucis, profites bien Wink .

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? :

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

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

Coucou Milouze !

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

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Dim 14 Juil 2024 - 8:05

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:

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

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

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Dim 14 Juil 2024 - 8:08

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é ?
Kaehlyth

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Dim 14 Juil 2024 - 8:11

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 Wink .

a++
Milouze14

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Dim 14 Juil 2024 - 8:30

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 Wink
a++

Milouze14

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Dim 14 Juil 2024 - 8:42

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. Sad

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


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 ! Razz


Dernière édition par Kaehlyth le Dim 14 Juil 2024 - 8:46, édité 1 fois
Kaehlyth

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Dim 14 Juil 2024 - 8:44

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

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

.Edit_animation_first
{
}

a++
Milouze14

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Dim 14 Juil 2024 - 8:48

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

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 ! Embarassed
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 ? Laughing


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

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


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 Sorry
Kaehlyth

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Dim 14 Juil 2024 - 8:54

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 Wink

a++
Milouze14

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Dim 14 Juil 2024 - 8:56



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

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

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Dim 14 Juil 2024 - 8:59

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é Wink
On va suivre l'évolution Wink .
a++
Milouze14

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Kaehlyth Dim 14 Juil 2024 - 9:12

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.

Yes

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

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. ::pourtoi::

C'est résolu.
Kaehlyth

Kaehlyth
****

Messages : 204
Inscrit(e) le : 27/04/2022

https://albastrya.bbactif.com/
Kaehlyth a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: :before , :after d'un CSS en fonction d'un JS...

Message par Milouze14 Dim 14 Juil 2024 - 9:21

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 Wink .
de rien chère amie et merci pour les fleurs  ::fleur:: .

a++
Milouze14

Milouze14
***

Masculin
Messages : 181
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

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


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