[PHPBB3] Avoir un Effet loupe sur chaque message sur la version [PHPBB3]

Messieurs Dame, je vous salue, ⁣

S'il vous plaît, existe-t-il une solution pour pouvoir mettre cet Effet loupe sur chaque message en version [Phpbb3] ?
Le tutoriel ci-dessous existe seulement pour la version en [Phpbb2]

https://www.milouze14.net/t28185-phpbb2-effet-loupe-sur-chaque-message?highlight=Loupe

Est-il possible aussi d'avoir cet Effet loupe sur l'index... J'exagère un peu, ⁣  

-------------------------

Pour pousser ma demande un peu plus loin :

Dans mon ordi, j'avais déjà un code sur cet effet loupe (zoom) et c'est de pouvoir mettre mon code dans le Javascript :

et un autre petit code à pouvoir mettre dans une template pour avoir un effet loupe sur une page : exemple du petit code :

Code:

<div class="zoom">contenu à zoomer</div>

Le code en CSS et en JavaScript d'un effet zoom (loupe), que je présente ci-dessous, il faut pratiquement tout modifier pour que ceci s'intègre dans la version [Phpbb3] forumactif.com de mon forum et j'ai du mal...

code Effet Zoom:

Merci par avance,

Cordialement,

@Freedom Sun,
Salut Stefano,
alors on va partir plutot d'un code html a placer dans le template et comme je ne sais pas ce que tu veux faire réellement:
Je me suis amusé a mettre un effet sur la ChatBox (haut de page) :

Il faudra donc l'activer temporairement pour voir l'effet.

J'ai donc placé le code html sur la chatbox dans le template index_body:

Affichage/Templates/Général/index_body

Recherches la variable de la chatbox du haut de page:

Code:

{CHATBOX_TOP}

Qui va être entourée par une div ayant la class zoom.


Remplaces le contenu par celui-ci:

Code:

<script>
  $(function(){
var zoom=$('div.zoom');
$('.open_Body').each(function(){
var a=$(this);
var b=$(this).next();
a.click(function(){
zoom.addClass('Effet_body');a.hide();b.show();
});
b.click(function(){
zoom.removeClass('Effet_body');a.show();b.hide();
});

});});
</script>
<div title="Agrandir le message" class="open_Body">
    <img src="http://img.xooimage.com/files115/4/5/1/zoom_i10-575522f.png" />
</div>
<div title="Réduire le message" class="close_Body" style="display: none;">
    <img src="http://img.xooimage.com/files112/1/0/3/zoom_o10-5755236.png" />
</div>
<div class="zoom">
{CHATBOX_TOP}
</div>

Pensez a enregistrer puis à valider en cliquant respectivement sur puis

Voir cette page pour être certain d'avoir validé votre template:

https://www.milouze14.net/h2-diverses-aides

Ensuite viennent les explications   :

Alors contrairement à la loupe sur les messages, on ne peut pas jouer avec les valeurs scales.
Il faut donc mettre la div ayant la class zoom avec des valeurs moindre et celle ayant reçue la class Effet_body ( au clic)
avec des valeurs plus importantes (valeur maximale sur le width à 100%) .


La feuille de style modifiée:


Dans la feuille de style:

Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


/***** DEBUT CSS ZOOM *****/

/*Le bouton pour l ouverture et fermeture de la fenetre*/
.open_Body,.close_Body{
  position: absolute;
   width: 16px;
   height: 16px;
   margin-top:-20px;
   right: 30px;
   cursor: pointer;
}

/*On place les transitions sur les messages*/
.zoom{
  width:60%;
  margin-left:20%;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
/*La fenetre agrandie*/
.Effet_body.zoom{
     /*on agrandit sur la largeur et la hauteur sur la plupart des navigateurs*/
   width:100%;
   /* on annule le margin left*/
  margin-left:0px;
   /*La couleur de fond*/
   background: white;
   /*La couleur de police*/
   color: black;
   /*La taille de police*/
   font-size: 14px !important;
   /*On donne un espace conséquent sur le haut et bas de page si besoin et peut etre supprime*/
   padding: 20px 0px 20px 0px;
   /*la couleur de bordure*/
   border:5px ridge #F36C0B;
   /*Les bordures arrondies sur la plupart des navigateurs*/
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   z-index: 999;
}
/***** FIN CSS ZOOM *****/



Penses à cliquer sur le bouton Valider


Le script est incorporé dans le template:

Code:

<script>
  $(function(){
var zoom=$('div.zoom');
$('.open_Body').each(function(){
var a=$(this);
var b=$(this).next();
a.click(function(){
zoom.addClass('Effet_body');a.hide();b.show();
});
b.click(function(){
zoom.removeClass('Effet_body');a.show();b.hide();
});

});});
</script>

Et voilou Stefano,

tu peux mettre ce script et le code html ou tu le souhaites mais il faudra surement l'adapter en fonction de l'endroit.

Si tu as besoin d'autres explications, n'hésites pas a demander

Les rendus:

Bonjour  @Milouze14 (Phil),

Merci du retour et d'avoir concocté le code.

Effectivement, j'ai un peu mangé mes phrases et n'ai pas dit exactement ce que je souhaitais réellement !
Désolé, car je ne savais pas comment m'y prendre...

Pour info, je n'utilise pas le Chat, il est désactivé, j'ai une catégorie discussion pour chatter.

Je ne souhaite pas que la loupe se trouve à l'extérieur, mais bel et bien à l'intérieur.

Ce que je souhaite réellement, c'est que cette loupe se trouve à la place de la croix, exemple ci-dessous.
Et que cet effet zoom s'ouvre de l'intérieur… Comme pour la version en [Phpbb2]



Exemple : dans la template "viewtopic_body", pouvoir mettre cette div :

Code:

<div class="zoom"></div>

Sur ce code :

Code:

{postrow.displayed.MESSAGE}

Ce qui donnerait :

Code:

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

----------------------------------

Et pour l'index, c'est la même chose

Exemple : dans la template "index_box", pouvoir mettre cette div :

Code:

<div class="zoom"></div>

Sur ce code :

Code:

{catrow.forumrow.FORUM_DESC}

Ce qui donnerait :

Code:

<div class="zoom">{catrow.forumrow.FORUM_DESC}</div>

Ou

De pouvoir mettre cette div directement dans la "Catégorie et forums"

Code:

<div class="zoom"> </div>

Exemple en image, où l'on peut apercevoir la div zoom mise à chaque extrémité de la description :



---------------------------

Trouver un moyen ci possible pour que ce script soit mis dans le JavaScript :

Code:

<script>
  $(function(){
var zoom=$('div.zoom');
$('.open_Body').each(function(){
var a=$(this);
var b=$(this).next();
a.click(function(){
zoom.addClass('Effet_body');a.hide();b.show();
});
b.click(function(){
zoom.removeClass('Effet_body');a.show();b.hide();
});

});});
</script>
<div title="Agrandir le message" class="open_Body">
    <img src="http://img.xooimage.com/files115/4/5/1/zoom_i10-575522f.png" />
</div>
<div title="Réduire le message" class="close_Body" style="display: none;">
    <img src="http://img.xooimage.com/files112/1/0/3/zoom_o10-5755236.png" />
</div>
<div class="zoom">
{CHATBOX_TOP}
</div>

Et que ceci soit dans le CSS bien entendu :
 

Code:

  /***** DEBUT CSS ZOOM *****/

    /*Le bouton pour l ouverture et fermeture de la fenetre*/
    .open_Body,.close_Body{
      position: absolute;
       width: 16px;
       height: 16px;
       margin-top:-20px;
       right: 30px;
       cursor: pointer;
    }

    /*On place les transitions sur les messages*/
    .zoom{
      width:60%;
      margin-left:20%;
       -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
       transition: all 0.5s ease-in-out;
    }
    /*La fenetre agrandie*/
    .Effet_body.zoom{
         /*on agrandit sur la largeur et la hauteur sur la plupart des navigateurs*/
       width:100%;
       /* on annule le margin left*/
      margin-left:0px;
       /*La couleur de fond*/
       background: white;
       /*La couleur de police*/
       color: black;
       /*La taille de police*/
       font-size: 14px !important;
       /*On donne un espace conséquent sur le haut et bas de page si besoin et peut etre supprime*/
       padding: 20px 0px 20px 0px;
       /*la couleur de bordure*/
       border:5px ridge #F36C0B;
       /*Les bordures arrondies sur la plupart des navigateurs*/
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
       z-index: 999;
    }
    /***** FIN CSS ZOOM *****/

Et cette div dans la template voulu :

Code:

<div class="zoom">contenu à zoomer</div>

En espérant Que je n'ai pas embrouillé tout le monde avec mon explication,  

Merci d'avance,

Cordialement,

@Freedom Sun,
alors Stefano,
dans un premier temps pour les messages:

Je vais repartir avec l'astuce phpbb2 présente ici.

Ce script fera l'affaire sans passer par le template.


Le script a cocher sur les sujets:

Code:

$(function(){
$('<li class="M14_open_Body"><img src="https://i.servimg.com/u/f19/11/26/21/37/zoom_i10.png"title="Agrandir le message"/></li><li class="M14_close_Body"style=display:none;"><img src="https://i.servimg.com/u/f19/11/26/21/37/zoom_o10.png"title="Réduire le message"/></li>').appendTo('.profile-icons');
});
    //AU CLIC SUR L IMAGE OUVERTURE ON ATTRIBUE UN IDENTIFIANT AU POSTBODY
    $(function(){
    $('.M14_open_Body').click(function(){
    //ON CACHE L IMAGE D OUVERTURE
    $(this).hide();
      $(this).next().show();
    //ON ATTRIBUE UN IDENTIFIANT AU POSTBODY
    $(this).closest('.postbody').find('.content').attr('id','M14_Effet_body');
    });
    });

    $(function(){
    //AU CLIC SUR L IMAGE DE FERMETURE
    $('.M14_close_Body').click(function(){
    //ON CACHE L IMAGE DE FERMETURE
    $(this).hide();
      $(this).prev().show();
    //ON SUPPRIME L IDENTIFIANT
    $(this).closest('.postbody').find('.content').removeAttr('id');

    });
    });


La css:

Code:

/*Le bouton pour l ouverture de la fenetre*/
.M14_open_Body,.M14_close_Body
{
width: 16px;
height: 16px;
right: 10px;
float: right;
cursor:pointer;
}

/*On place les transitions sur les messages*/
.content
{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*La fenetre agrandie*/
#M14_Effet_body.content
{
/*On donne une position relative*/
position: absolute;
margin-top:120px;
      width: 50%;
    margin-left: 5%;
/*La couleur de fond*/
background: white;
/*La couleur de police*/
color:black;
/*La taille de police*/
font-size:14px;
/*On donne un espace conséquent si besoin peut etre supprime*/
padding: 20px 30px 10px 10px;
/*on agrandit sur la largeur et la hauteur sur la plupart des navigateurs*/
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
  /*la couleur de bordure*/
border:2px solid #006699;
  /*Les bordures arrondies sur la plupart des navigateurs*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
  z-index:999;
}



Les aperçus:








Pour la description des forums:

Code:

{catrow.forumrow.FORUM_DESC}

Tu souhaites avoir le même effet ????
Es-tu certain cher ami car je ne vois pas d'utilité pour un simple texte !!!

Je regarde demain pour le reste  

Bonjour,

@Milouze14 (Phil),

Merci pour ce retour d'aide et de ta disponibilité, t'est vraiment sympa !
Quand tu auras besoin d'aide, n'hésite surtout pas à me demander, cela sera avec le plus grand plaisir.

Milouze14 a écrit:Tu souhaites avoir le même effet ????
Es-tu certain cher ami car je ne vois pas d'utilité pour un simple texte !!!

Effectivement cela ne servira pas à grand-chose... sauf avoir des zooms partout, lol

Alors ! je commence par où !  ...

J'ai installé l'effet zoom comme tu m'as présenté :

Exemple image Agrandir le message :



Exemple image Réduire le message :



----------

j'ai une petite demande :

L'effet zoom : quand la fenêtre s'ouvre, où qu’elle se ferme, dans la transaction, on voit trop à travers...
Est-il possible d'y rajouter une Opacité dans la transaction au moment que la fenêtre s'ouvre ou se ferme ?
exemple :

Code:

opacity: 0.9 !important;

Exemple en images, quand la fenêtre s'ouvre ou se ferme, on peut voir au travers la fenêtre :



----------------------

Désolé, si je chipote ou je me radote, ⁣

Dans cette fenêtre qui est assez conséquente, entre la fenêtre et l'icône, il y a peu de marge :



Et dans cette fenêtre peu conséquente entre la fenêtre et l'icône, il y a plus de mage :



Est-ce normale que toutes les fenêtre ont des mages différente entre le logo et la fenêtre ?
Pourtant le px ou % est réglé de la même façon !

En espérant que je me suis pas embrouiller dans c'est explications et que tu arrives à captés, car c'est un peut le bordel ce que je dis, il y en a de tout les sans !

Merci par avance,

Cordialement,

@Freedom Sun,
hello Stefano,

Merci pour ce retour d'aide et de ta disponibilité, t'est vraiment sympa ! clin oeil
Quand tu auras besoin d'aide, n'hésite surtout pas à me demander, cela sera avec le plus grand plaisir.

De rien c'est mon dada d'aider et j'aime le codage dans la limite de mes connaissances bien entendu .

Tu as des connaissances dans le codage aussi ?

Alors pour le visuel des messages effectivement il faut prendre en compte le contenu qui peut être conséquent.

Pour cela , j'ai tout envisagé ce matin et j'en conclus donc qu'il faut avoir une dimension unique
en position fixe (fixed en css) et sans transition car la transparence vient de cette transition.

Pour ta demande concernant l'ajout d'une opacité, tu ne peux pas ajouter une opacité sur un effet ou l'opacité n'existe pas de base.

Il faut avoir de base sur la div ayant la class postbody une opacité:
Exemple:
Pour avoir un effet admettons au survol:

Code:

.postbody{opactiy:0.6;}

Code:

.postbody:hover{opactiy:0.9;}

Bref, j'ai donc supprimé les transitions et positionné la fenêtre agrandie en position fixe.
Le cas échéant si le message contient beaucoup de texte ou image, un overflow viendra se greffer afin d'avoir un scroll sur la partie droite.

De plus le bouton de fermeture sera lui aussi en position fixe , ce qui est bien pratique pour les message conséquent car le bouton sera toujours affiché.

Ensuite et afin que le bouton soit accessible, j'ai revu l'affichage.
Au lieu d'afficher juste le message,on va agrandir l'ensemble avec les boutons edition etc etc:

Comme ceci:






La CSS revue presqu'en totalité :

Code:

/*Le bouton pour l ouverture de la fenetre*/
.M14_open_Body,.M14_close_Body
{
width: 16px;
height: 16px;
right: 10px;
float: right;
cursor:pointer;
}
/*on positionne le bouton de fermeture au dessus en position fixed*/
#M14_Effet_body .M14_close_Body{position:fixed;top:15%;right:10%;}

/*La fenetre agrandie */
#M14_Effet_body
{
position: fixed;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
padding:10px;
overflow:auto;
/*La couleur de fond*/
background-color: #d9d9d9;
/*La couleur de police*/
color:black;
/*La taille de police*/
font-size:14px;
  /*la couleur de bordure*/
border:2px solid #006699;
  /*Les bordures arrondies sur la plupart des navigateurs*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
 z-index:999;
}


Alors pour les explications de la fenêtre agrandie et en position fixed:

Tu as ces valeurs:

Code:


width: 80%;
height: 80%;
top: 10%;
left: 10%;


On demande une largeur de 80%
Il est donc essentiel de mettre un left à 10%
On demande une hauteur de 80%
Il est donc essentiel de mettre un top à 10%

Il n'y a pas de right ni bottom à 10%, et c'est volontaire car
ce n'est pas réellement necessaire


Ainsi que le script qui à lui aussi changé car on recherche désormais la div ayant la class postbody au lieu de la div ayant la class content.

Code:

$(function(){
$('<li class="M14_open_Body"><img src="https://i.servimg.com/u/f19/11/26/21/37/zoom_i10.png"title="Agrandir le message"/></li><li class="M14_close_Body"style="display:none;"title="Réduire le message"><img src="https://i.servimg.com/u/f19/11/26/21/37/zoom_o10.png"/></li>').appendTo('.profile-icons');
});
    //AU CLIC SUR L IMAGE OUVERTURE ON ATTRIBUE UN IDENTIFIANT AU POSTBODY
$(function(){
    $('.M14_open_Body').click(function(){
    //ON CACHE L IMAGE D OUVERTURE
    $(this).hide();
      $(this).next().show();
    //ON ATTRIBUE UN IDENTIFIANT AU POSTBODY
    $(this).closest('.postbody').attr('id','M14_Effet_body');
    });
    });

  $(function(){
    //AU CLIC SUR L IMAGE DE FERMETURE
    $('.M14_close_Body').click(function(){
    //ON CACHE L IMAGE DE FERMETURE
    $(this).hide();
      $(this).prev().show();
    //ON SUPPRIME L IDENTIFIANT
    $(this).closest('.postbody').removeAttr('id');

    });
    });

Milouze14 a écrit:

Tu as des connaissances dans le codage aussi ?

Bonjour,  @Milouze14 (Phil)...  

Avant toute chose, un grand merci de ton retour et de m'avoir concocté tout ça et du temps que tu y as passé, c'est vraiment appréciable de ta part...

Quand je dis que j'ai une petite, mais vraiment une petite connaissance sur le codage, c'est une mini infime, c'est sûr, par apport à toi Philippe, je suis une aiguille dans une botte de foin.
Tu es un tueur, tu as vraiment un don pour le codage, tu pourrais vraiment en faire ton métier, programmeur ou créer des sites pour des entreprises qui te rapporteraient énormément et le plaisir, car avant tout, il y a le plaisir de coder. Enfin, je dis ça !!

Bon revenons à nos moutons... Lol.

Pour la solution effet zoom 1 et 2,

désolé de te dire cela, je préfère la solution 1 : Pourquoi !!

La solution 1 : le zoom est agréable visuellement, le zoom prend seulement le message, mais !! Il y a quand même un mais !! Cette à dire que, quand la fenêtre est zoomée, le tittle de l'infobulle que j'ai inséré dans mon message reste sur place et ne suit pas la cadence, par contre, quand le zoom est réduit, normal, le tittle de l'infobulle suit bien la cadence.
Après, l'écart entre la fenêtre et l'icône du zoom, ce n'est vraiment pas un souci...

L'idée est géniale :
La solution 2 : prend toute la page avec les options et la signature. Je ne voudrais pas qu'elle soit inclue dans la fenêtre du zoom ainsi que le reste des Fonctions. Juste le message.  

Enfin, je vais arrêter de te bouffer ton temps et te laisser en paix pour que tu puisses profiter du reste de ton week-end.
Je vais garder bien au chaud tes codes, et je vais voir de mon côté comment je pourrais goupiller tout ça, pour que ça me convienne parfaitement.

En tout cas un grand, , Phil,  

je met ceci en résolu...

Prend soin de toi et de ton cercle et bon dimanche...

Cordialement,

@Freedom Sun,

tout d'abord merci pourles compliments c'est très apprécié cher ami .

L'idée est géniale :
La solution 2 : prend toute la page avec les options et la signature. Je ne voudrais pas qu'elle soit inclue dans la fenêtre du zoom ainsi que le reste des Fonctions. Juste le message.

Pas de soucis mais cela peut se masquer si besoin !!!

Enfin, je vais arrêter de te bouffer ton temps et te laisser en paix pour que tu puisses profiter du reste de ton week-end.

Tu ne bouffes pas mon temps Stefano, si besoin je laisse ce topic ouvert

Milouze14 a écrit:

L'idée est géniale :
La solution 2 : prend toute la page avec les options et la signature. Je ne voudrais pas qu'elle soit inclue dans la fenêtre du zoom ainsi que le reste des Fonctions. Juste le message.

Pas de soucis mais cela peut se masquer si besoin !!!

Rebonjour Phil,

Si c'est possible sans vouloir abuser, j'aimerais effectivement avoir cette solution de masque. Suivant ta disponibilité...
La seule fonction que je souhaite dans la fenêtre du zoom, c'est la loupe !

Prends soin de toi, à bientôt,

Alors dans un premier temps,
as-tu personnalisé ton template "viewtopic_body" .

Si oui merci de me le fournir car il va falloir intervenir dans ce dernier pour donner des class à tous les données figurantes dans ce dernier .

Je vais déjà travailler sur mon forum de tests phpbb3 pour voir tout cela

Phil, non, je n'ai pas personnalisé la template "viewtopic_body", j'ai juste mis à droite et gauche des tittle d'infobulle,
j'ai copié coller la template dans la catégorie Admin, et je rajouterais ces fonctions si besoin !
Et les Tutos pris ne concernent pas cette template !

Merci par avance,

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 type="text/javascript">
   $(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 -->

<h1 class="page-title">
   <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
   <!-- BEGIN switch_push_direct_send --> <span id="push-bell" title="{switch_push_direct_send.L_PUSH_SEND}"></span><!-- END switch_push_direct_send -->
</h1>
{POSTERS_LIST}
<div class="topic-actions">
   <div class="buttons">

      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img alt="down" title="Nouveu sujet" src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img alt="down" title="Répondre au message" src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
   </div>

   <div class="pathname-box">
      <p>
            <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}
        </p>
   </div>

   <p class="right"></p>

   <div class="pagination">
      {PAGE_NUMBER}
      <!-- BEGIN switch_plus_menu -->
       • 
      <div id="addthis-toolbar" style="display: inline-block; margin-right:5px;">
         <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>
       • 
      <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_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
        {switch_plus_menu.JS_SOCIAL_BUTTONS}
      <!-- END switch_plus_menu -->
   </div>
   <div class="clear"></div>
</div>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
    <!-- END switch_isconnect -->
    <a href="#bottom">{L_GOTO_DOWN}</a>
</p>
<div class="clear"></div>
{POLL_DISPLAY}

<!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_COUNT}">
         <div class="inner">
            <span class="corners-top"><span></span></span>
                          <p style="text-align:center">{postrow.hidden.MESSAGE}</p>                                                                            
            <div class="clear"></div>
            <span class="corners-bottom"><span></span></span>
                          </div>
      </div>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
         <div class="inner"><span class="corners-top"><span></span></span>
            <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
         <div class="postbody">

            <ul class="profile-icons">
               <li>{postrow.displayed.THANK_IMG}</li>
               <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
               <li>{postrow.displayed.QUOTE_IMG}</li>
               <li>{postrow.displayed.EDIT_IMG}</li>
               <li>{postrow.displayed.DELETE_IMG}</li>
               <li>{postrow.displayed.IP_IMG}</li>
               <li>{postrow.displayed.REPORT_IMG_NEW}</li>
            </ul>

            <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
            <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" /> {L_TOPIC_BY} {postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
            <div class="clearfix"></div>

            <!-- 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 style="display:none"></div>
            <div class="content clearfix">                                
                                  <div>{postrow.displayed.MESSAGE}</div>
                                    <!-- BEGIN switch_attachments -->
                  <dl class="attachbox">
                     <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                     <dd class="attachments">
                        <!-- BEGIN switch_post_attachments -->
                        <dl class="file clearfix">
                           <dt>
                              <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                           </dt>
                           <dd>
                              <!-- BEGIN switch_dl_att -->
                              <span><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}</span>
                              <!-- END switch_dl_att -->

                              <!-- BEGIN switch_no_dl_att -->
                              <span>{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}</span>
                              <!-- END switch_no_dl_att -->

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

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

                              <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                           </dd>
                        </dl>
                        <!-- END switch_post_attachments -->
                     </dd>
                  </dl>
                  <!-- END switch_attachments -->
            </div>
            {postrow.displayed.EDITED_MESSAGE}
            <!-- BEGIN switch_signature -->
                                 <br /><br /><br /><br /><br /><br /><br />   <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}"> <span style="color: #555454; margin-left: 10px; cursor: default;">Signature de l'auteur :</span><br />  {postrow.displayed.SIGNATURE_NEW}️ </div> <br /><br />
            <!-- END switch_signature -->
         </div>

         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>                                
               <dt>
                                                              {postrow.displayed.POSTER_AVATAR}                                        
                                          <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
               </dt>
               <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
               <dd {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">
                        {postrow.displayed.AWARDS}
               </dd>
               <dd class="award_more"></dd>
               <dd><br /></dd>
               <dd>
                  <!-- BEGIN profile_field -->
                  {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->
                  {postrow.displayed.POSTER_RPG}
               </dd>
               <dd><br /></dd>
               <dd>
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
               </dd>
            </dl>
         </div>

         <div class="clear"></div>

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

         <p class="right"><a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a></p>

         <span class="corners-bottom"><span></span></span></div>
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
   <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->

<p class="left-box">
    <!-- BEGIN switch_isconnect -->
    <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
    <!-- END switch_isconnect -->
    <a href="#top">{L_BACK_TO_TOP}</a>
</p>

<div class="clear"></div>

<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>

<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
   <span class="corners-top"><span></span></span>
   <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
   <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
   <span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
   <span class="corners-top"><span></span></span>
   <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
   <span class="ptrafic"> {PROMOT_TRAFIC_TITLE}</span>
   <div class="clear"></div>
   <div>
      <!-- BEGIN link -->
      » <a href="{promot_trafic.link.U_HREF}" title="{promot_trafic.link.TITLE}" >{promot_trafic.link.TITLE}</a><br />
      <!-- END link -->
   </div>
   <span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
   <span class="corners-top"><span></span></span>
   <div class="h3"> {L_FORUM_RULES}</div>
   <div class="clear"></div>
   <table class="postbody">
      <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules content">
            {RULE_MSG}
         </td>
      </tr>
   </table>
   <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<hr />

<div class="topic-actions">
   <div class="buttons">
      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img alt="down" title="Nouveu sujet" src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>   
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img alt="down" title="Répondre au message" src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
   </div>

   <div class="pathname-box">
      <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
   </div>

   <div class="pagination">
      {PAGE_NUMBER}
   </div>
</div>
<div class="clear"></div>

<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
   <label>{L_JUMP_TO}: </label>
   {S_JUMPBOX_SELECT} 
   <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
   <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}" />
   <label>{L_MOD_TOOLS}: </label>
   {S_SELECT_MOD}&nbsp;
   <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
   <div class="h3">{L_TABS_PERMISSIONS}</div>
   {S_AUTH_LIST}
<!-- END show_permissions -->
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

Ok merci Stefano ,


dans un premier temps,
avec le dernière astuce donnée,
tu peux ajouter cette CSS afin de masquer ce que l'on ne souhaite pas s'afficher:

Code:

/*on cache ce que l on ne souhaite pas s afficher*/
#M14_Effet_body .M14_topic_edit,#M14_Effet_body  .author, #M14_Effet_body h2.topic-title,
#M14_Effet_body ul.profile-icons li:not(.M14_close_Body),#M14_Effet_body .vote.gensmall,
#M14_Effet_body .signature_div

{
  display:none;
}


Cette class n'existe pas de base:

Code:

.M14_topic_edit

Dans ton template , recherche cette variable (edition d'un message) :

Code:

{postrow.displayed.EDITED_MESSAGE}

Supprimes et remplaces par:

Code:

<div class="M14_topic_edit">{postrow.displayed.EDITED_MESSAGE}</div>

Pensez a enregistrer puis à valider en cliquant respectivement sur puis

Voir cette page pour être certain d'avoir validé votre template:

https://www.milouze14.net/h2-diverses-aides

Ne donne pas de style à cette class Stefano car on verra l'apparence même si le membre n'a pas édité son message .


Puis tu peux modifier l'apparence de la fenêtre agrandie en diminuant les valeurs:

Code:

/*Le bouton pour l ouverture de la fenetre*/
.M14_open_Body,.M14_close_Body
{
width: 16px;
height: 16px;
right: 10px;
float: right;
cursor:pointer;
}
/*on positionne le bouton de fermeture au dessus en position fixed*/
#M14_Effet_body .M14_close_Body{position:fixed;top:28%;right:30%;}

/*La fenetre agrandie */
#M14_Effet_body
{
position: fixed;
width: 40%;
height: 40%;
top: 30%;
left:30%;
right:30%;
bottom:30%;
padding:10px;
overflow:auto;
/*La couleur de fond*/
background-color: #d9d9d9;
/*La couleur de police*/
color:black;
/*La taille de police*/
font-size:14px;
  /*la couleur de bordure*/
border:2px solid #006699;
  /*Les bordures arrondies sur la plupart des navigateurs*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
 z-index:999;
}


Merci phil pour ton retour, c'est super

Avec toutes ces infos de codes que tu m'as concocté, là, il y a moyen que je fasse un montage d'effet loupe à ma sauce...

Milouze14 a écrit:Ne donne pas de style à cette class Stefano car on verra l'apparence même si le membre n'a pas édité son message .

Message reçu, j'en prends bonne note...  

Une fois que j'aurais un bon moment bien disponible, je mettrais tout ça en place comme il le faut et que ceci fonctionnera correctement,
Ensuite, Je reviendrai dans l'astuce pour poser le tuto en questions (effet zoom) version [Phpbb3].
Ceci pourrait intéresser certains Admins également...

,   @Milouze14 (Phil), pour ce geste dans ta disponibilité... ⁣
Je met donc ceci en résolu pour ma part…

À bientôt.