Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB
 
AccueilAccueil  PortailPortail  Connexion  S'enregistrerS'enregistrer  
Le deal à ne pas rater :
One Piece : pas de tome Collector 25 ans prévu chez Glénat ?
Voir le deal

 

 [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar

Aller en bas 
2 participants
AuteurMessage
Milouze14
Fondateur

Milouze14



[PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar  Empty
MessageSujet: [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar    [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar  EmptyVen 8 Fév 2019 - 8:48

Hello les ami(e)s,

voilà une astuce qui affichera une miniature de l'avatar du membre sur le côté gauche de chaque message pour les membres.
Les invités verront un affichage traditionnel.



Allez on y les ami(e)s,
Comme d'habitude, l'astuce a été réalisé sur un template non modifié.




Si vous n'avez pas activé le plugin tooltipster

Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mettez un titre explicite.
Cochez sur les sujets.


Déposez ceci:
Code:


$(function() {
var Noconnect=_userdata["session_logged_in"] !== 1;
var Connect=_userdata["session_logged_in"] == 1;
var pub=$('div[id="p0"]').length;

$('div[class*="post--"] .inner').each(function(){
var invite=$(this).find('.postprofile:contains("Invité")').length;
var Membre=$(this).find('.postprofile a[href^="/u"]').text();
var Avatar=$(this).find('.postprofile a[href^="/u"] img').attr('src');
if(Membre&&Connect)
{
$(this).before('<a class="M14_PopUp"title="Voir le profil de '+Membre+'"><img class="M14_AvAtAr"src="'+Avatar+'"/></a><a class="M14_PopUpClose"title="Cacher le profil de '+Membre+'"><img class="M14_AvAtAr"src="'+Avatar+'"/></a>');
$('a.M14_PopUp').click(function(){
$(this).hide();$(this).next().show();
$(this).closest('div').find('.postbody').removeClass('M14_width').addClass('M14_remove_width');
$(this).closest('div').find('.postprofile').removeClass('M14_remove_width').addClass('M14_width');});
$('a.M14_PopUpClose').click(function(){
$(this).hide();$(this).prev().show();
$(this).closest('div').find('.postbody').removeClass('M14_remove_width').addClass('M14_width');
$(this).closest('div').find('.postprofile').removeClass('M14_width').addClass('M14_remove_width');});
}
else if(invite||Noconnect||pub)
{
$(this).closest('div[class^="post"]').addClass('M14_invitE');
}


});

});



Penser a cliquer sur le bouton Valid

Si vous utilisez tooltipster


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mettez un titre explicite.
Cochez sur toutes les pages.


Déposez ceci:
Code:

$(function() {
var Noconnect=_userdata["session_logged_in"] !== 1;
var Connect=_userdata["session_logged_in"] == 1;
var pub=$('div[id="p0"]').length;

$('div[class*="post--"] .inner').each(function(){
var invite=$(this).find('.postprofile:contains("Invité")').length;
var Membre=$(this).find('.postprofile a[href^="/u"]').text();
var Avatar=$(this).find('.postprofile a[href^="/u"] img').attr('src');
if(Membre&&Connect)
{
$(this).before('<a class="M14_PopUp"title="Voir le profil de '+Membre+'"><img class="M14_AvAtAr"src="'+Avatar+'"/></a><a class="M14_PopUpClose"title="Cacher le profil de '+Membre+'"><img class="M14_AvAtAr"src="'+Avatar+'"/></a>');
$('a.M14_PopUp').click(function(){
$(this).hide();$(this).next().show();
$(this).closest('div').find('.postbody').removeClass('M14_width').addClass('M14_remove_width');
$(this).closest('div').find('.postprofile').removeClass('M14_remove_width').addClass('M14_width');});
$('a.M14_PopUpClose').click(function(){
$(this).hide();$(this).prev().show();
$(this).closest('div').find('.postbody').removeClass('M14_remove_width').addClass('M14_width');
$(this).closest('div').find('.postprofile').removeClass('M14_width').addClass('M14_remove_width');});

 $('.M14_PopUp,.M14_PopUpClose').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
        });


}
else if(invite||Noconnect||pub)
{
$(this).closest('div[class^="post"]').addClass('M14_invitE');
}


});

});




Penser a cliquer sur le bouton Valid



Puis le style:


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposez ceci:
Code:

.M14_invitE .postprofile
{
visibility:visible!important;
opacity:1!important;
margin-left:0 !important;
-ms-transform: none !important;
-webkit-transform: none!important;
transform:none!important;
-webkit-transition:none!important;
-moz-transition:none!important;
-o-transition:none!important;
transition:none!important;
}
.M14_invitE .postbody{width:76%!important;}
div[class^="post"]:not(.M14_invitE) .inner .postprofile,
div[class^="post"]:not(.M14_invitE) .inner .postprofile.M14_remove_width
{
visibility:hidden;
opacity:0;
margin-right:-22%;
position: absolute;
font-size:0px;
}


div[class^="post"]:not(.M14_invitE) .inner .postprofile.M14_remove_width img{width:0px;height:0px;}
div[class^="post"]:not(.M14_invitE) .inner .postprofile.M14_width img{width:auto;height:auto;}
div[class^="post"]:not(.M14_invitE) .inner .postprofile.M14_width
{
visibility:visible;
opacity:1;
margin-right:0;
position:relative;
display:inherit;
font-size:inherit;
}
div[class^="post"]:not(.M14_invitE) .inner .postbody,
div[class^="post"]:not(.M14_invitE) .inner .postbody.M14_width{width:100%;}
div[class^="post"]:not(.M14_invitE) .inner .postbody.M14_remove_width{width:76%;}
div[class^="post"]:not(.M14_invitE) .inner .postbody,div[class^="post"]:not(.M14_invitE) .inner .postprofile
{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*La miniature de l avatar*/
img.M14_AvAtAr
{
  position: absolute;
  margin-left: -64px;
  width:32px;
  height:32px;
  border-radius:32px;
  border:2px solid #e54732;
  padding:4px;
background-color:#369FCF ;
  -webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/*Au survol de la miniature*/

img.M14_AvAtAr:hover
{
background-color:#e54732;
border:2px solid #369FCF;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
/*On donne un style au curseur*/
a[class^="M14_PopUp"]{cursor:pointer;}
/*on masque le conteneur de la fermeture*/
a.M14_PopUpClose{display:none;}




Penser a cliquer sur le bouton Valid


Dernière édition par Milouze14 le Mer 1 Déc 2021 - 4:09, édité 2 fois
Revenir en haut Aller en bas
https://www.milouze14.com
photoclic
Milouzien

avatar



[PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar  Empty
MessageSujet: Re: [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar    [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar  EmptyDim 10 Fév 2019 - 23:46

Merci beaucoup !
Revenir en haut Aller en bas
https://photoclic.forum-pro.fr/
Invité
Invité
Anonymous



[PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar  Empty
MessageSujet: Re: [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar    [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar  EmptyLun 18 Fév 2019 - 0:39

Merci beaucoup !
Revenir en haut Aller en bas
Contenu sponsorisé





[PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar  Empty
MessageSujet: Re: [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar    [PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar  Empty

Revenir en haut Aller en bas
 
[PHPBB3]Afficher/Masquer le profil avec miniature de l'avatar
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [PHPBB3] Intégrer des boutons en relation avec le profil du membre style barre de contact
» [PHPBB3] Afficher les champs du profil au clic sur l'avatar
» [PHPBB3]Afficher la majeure partie des variables avec un bouton sur l'éditeur
» [PHPBB2] Afficher les informations du profil des messages avec plusieurs infobulles
» [TOUTES VERSIONS] Afficher la partie profil de la toolbar en bas à gauche avec effet slide

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Astuces Forumactif :: Astuces Forumactif :: Les astuces Phpbb3-
Sauter vers: