Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

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


2 participants

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

Freedom Sun
Freedom Sun
https://rastaclub.forumactif.com/forum

MessageFreedom Sun Ven 27 Sep 2024 - 20:09

Messieurs Dame, je vous salue, ⁣ hinhin

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, ⁣mevoilou  

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

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,

Milouze14 et fred9545 aiment ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 28 Sep 2024 - 5:19

@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 Enregistr puis Ajout

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

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

Ensuite viennent les explications  MDR :

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 ok

Les rendus:

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

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


fred9545 et Freedom Sun aiment ce message

Freedom Sun
Freedom Sun
https://rastaclub.forumactif.com/forum

MessageFreedom Sun Sam 28 Sep 2024 - 12:02

Bonjour  @Milouze14 (Phil), hinhin

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]

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

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 :

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

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

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,  mevoilou

Merci d'avance,

Cordialement,


Milouze14 et fred9545 aiment ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 28 Sep 2024 - 19:22

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


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



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

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 ok  



Freedom Sun aime ce message

Freedom Sun
Freedom Sun
https://rastaclub.forumactif.com/forum

MessageFreedom Sun Dim 29 Sep 2024 - 1:40

Bonjour, hinhin

@Milouze14 (Phil),

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.

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 :

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

Exemple image Réduire le message :

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

----------

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 :

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

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

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

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

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

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

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

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,



















Milouze14 et fred9545 aiment ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 29 Sep 2024 - 7:11

@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 ok .

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:

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




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');

    });
    });




fred9545 et Freedom Sun aiment ce message

Freedom Sun
Freedom Sun
https://rastaclub.forumactif.com/forum

MessageFreedom Sun Dim 29 Sep 2024 - 11:33

Milouze14 a écrit:

Tu as des connaissances dans le codage aussi ?


Bonjour,  @Milouze14 (Phil)...  hinhin

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

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, Merci pour l'aide, Phil,  clin oeil

je met ceci en résolu...

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

Cordialement,


Dernière édition par Freedom Sun le Dim 29 Sep 2024 - 11:48, édité 3 fois

fred9545 aime ce message

Freedom Sun
Freedom Sun
https://rastaclub.forumactif.com/forum

MessageFreedom Sun Dim 29 Sep 2024 - 11:38




Ma demande:
[ [PHPBB3] Avoir un Effet loupe sur chaque message sur la version [PHPBB3] ] est désormais résolue ok



fred9545 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 29 Sep 2024 - 18:58

@Freedom Sun,

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

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 ok



Freedom Sun aime ce message

Freedom Sun
Freedom Sun
https://rastaclub.forumactif.com/forum

MessageFreedom Sun Dim 29 Sep 2024 - 19:33

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, hinhin

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

Prends soin de toi, à bientôt,

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 29 Sep 2024 - 19:44

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

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

Freedom Sun aime ce message

Freedom Sun
Freedom Sun
https://rastaclub.forumactif.com/forum

MessageFreedom Sun Dim 29 Sep 2024 - 20:00

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


Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 29 Sep 2024 - 20:06

Ok merci Stefano ok ,


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 Enregistr puis Ajout

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


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;
}


Freedom Sun aime ce message

Freedom Sun
Freedom Sun
https://rastaclub.forumactif.com/forum

MessageFreedom Sun Dim 29 Sep 2024 - 20:56

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

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

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

À bientôt.


Ma demande:
[ [PHPBB3] Avoir un Effet loupe sur chaque message sur la version [PHPBB3] ] est désormais résolue ok







Milouze14 aime ce message

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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