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 du moment : -61%
-140€ sur la Table à manger STARLIGHT ...
Voir le deal
89.99 €

 

 [TOUTES VERSIONS] Afficher les membres connectés sous la toolbar

Aller en bas 
+15
Ptite_Perle
petit coq
msfeettoes
50Thierry
WinaTickets
dragon594
Tony L
fascicularia
Sacha
Neptunia
photoclic
mariok
Jackymi
Emc2
Milouze14
19 participants
Aller à la page : Précédent  1, 2
AuteurMessage
Milouze14
Fondateur

Milouze14



[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar - Page 2 Empty
MessageSujet: [TOUTES VERSIONS] Afficher les membres connectés sous la toolbar   [TOUTES VERSIONS] Afficher les membres connectés sous la toolbar - Page 2 EmptyLun 2 Mai 2016 - 9:07

Rappel du premier message :

coucou ,

Incompatible avec la barre de navigation flottante les ami(e)s.

l'astuce consiste a afficher les membres connectés sur toutes les pages du forum en étant connecté.

On aura un slide qui sera semi masqué affichant le nombre de connectés puis au clic affichera le nom des Pseudos .
Ce même slide sera mémorisé selon le choix de l'utilisateur.


L'aperçu imagé:

[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar - Page 2 153

Au clic:
[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar - Page 2 232

Pour que l'astuce fonctionne, on va se servir des widgets du forum , si vous ne désirez pas les utiliser il faudra donc masquer ces derniers à l'aide de la C.S.S.
Dans le cas ou vous désirez garder vos Widgets affichés il faudra alors
dans le template qui va être modifié déposer un display :none .

La toolbar devra être en position fixed:
[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar - Page 2 115


Bref je vais vous expliquer tout cela dans l'astuce:





On va placer le widget concerné sur le forum:

Modules/Gestion des widgets du forum/Options générales des widgets du forum



Afficher les widgets du forum : Oui

Largeur colonne 1 (gauche) : donnez une largeur en px

Cliquez sur  Enregistr

Ensuite plus bas faites un glisser du widget "Qui est en ligne" dans la colonne de gauche
comme ceci:

[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar - Page 2 154

Cliquez sur  Enregistr

Notre Widget étant placé on va intervenir dans le template concerné.

Dans le template mod_whoisonline
Affichage/Templates/Portail/mod_whoisonline


Recherchez cette variable:
Code:

{LOGGED_IN_USER_LIST}

Supprimez et remplacez par:
Code:

   <span id="M14_total_userList">{LOGGED_IN_USER_LIST}</span>



Tout à la fin du template:
déposez ce script:

Code:


<script>
  $(function(){
var M14_totUser= function() {
  var a=$('#M14_total_userList a[href^="/u"]').length;
var e=$('#M14_total_userList').html();
$('.M14_Fa_List_open span').html("<span id=M14_num>("+ a +")</span>");
$('.M14_Fa_List span').html("<span class=M14_num>("+ a +")</span><span class=M14_text>"+ e +"</span>");
};
M14_totUser();
});
</script>





Pensez à enregistrer puis à valider en cliquant respectivement sur  Enregistr  puis Ajout

Dans le template overall_header:
Affichage/Templates/Général/ overall_header

Juste avant ce commentaire :

Code:

<!-- BEGIN hitskin_preview -->

Déposez ceci:
Code:
<!-- BEGIN switch_user_logged_in -->
  <div id="M14_totUserList"><span class="M14_Fa_List">Membres connectés:<span></span></span>
<span class="M14_Fa_List_close"style="display:none;"title="Masquer les membres connectés">
<img src="http://i86.servimg.com/u/f86/11/26/21/37/arrow-18.png"/></span>
<span class="M14_Fa_List_open"title="Afficher les membres connectés">
  
<img src="http://i86.servimg.com/u/f86/11/26/21/37/arrow-17.png"/> <span></span> </span>
</div>
  <!-- END switch_user_logged_in -->

Pensez à enregistrer puis à valider en cliquant respectivement sur  Enregistr  puis Ajout



Puis on va placer le script pour le slide avec mémorisation du choix de l'utilisateur,
c'est à dire que le slide restera soit ouvert ou fermé.

Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.

Déposez ceci:
Code:


$(function () {
$('.M14_Fa_List_open').click(function(){
$(this).fadeOut();
$('.M14_Fa_List_close').delay('400').fadeIn();
$('#M14_totUserList').animate({ left: '0%'});
window.localStorage && localStorage.setItem('M14_TotaLUSER',1)
});
$('.M14_Fa_List_close').click(function(){
$('#M14_totUserList').animate({ left: '100%'});
$('.M14_Fa_List_open').delay('400').fadeIn();
window.localStorage && localStorage.removeItem('M14_TotaLUSER')
});
window.localStorage && localStorage.getItem('M14_TotaLUSER') && (
$('#M14_totUserList').css({"left": "0%"}),
$('.M14_Fa_List_open').hide(),
$('.M14_Fa_List_close').show()
)
});

Pensez a cliquer sur le bouton &nbsp;Valid




Le slide est opérationnel , il ne reste plus qu'a choisir si vous désirez garder les widgets affichés et de cacher simplement le widget "Qui est en ligne".

Pour cacher le widget de la version ppbb2:

Tout au début remplacez ceci:
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

Par ceci:
Code:
<table id="M14_none_Forum"class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">




Pour cacher le widget de la version ppbb3:
Tout au début remplacez ceci:
Code:

<div class="module">

Par:
Code:

<div id="M14_none_Forum"class="module">

Pour cacher le widget de la version Invision:
Tout au début remplacez ceci:
Code:

<div class="module borderwrap">

Par:
Code:
<div id="M14_none_Forum"class="module borderwrap">


Pour cacher le widget de la version Punbb

Tout au début remplacez ceci:
Code:
<div class="module main">


Par :
Code:
<div id="M14_none_Forum"class="module main">


Ensuite il ne reste plus qu'à déposer donner du style à tout çà
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:



/*Le conteneur*/
#M14_totUserList
{
position:fixed;
width:100%;/*on donne une largeur maximale*/
left:100%;
right:0%;
margin-top: -1px;
height: 30px;/*on donne une hauteur de 30px*/
background-color: #333333;/*on donne une couleur de fond identique a la toolbar*/
font-size:11px;/*on donne une taille de police*/
color:white;/*on donne une couleur de police*/
z-index: 999;
}
/*Le bloc des membres connectes*/
.M14_Fa_List
{
overflow-y:auto;
margin-left: 10px;/*on decale de 10px sur la gauche*/
top: 5px;/*on decale de 5px sur la hauteur*/
position: relative;
font-family:Verdana,Arial,Helvetica,sans-serif;
}
/*On donne une couleur identique au conteneur suppression virgule*/
#M14_totUserList  .M14_text{color: #333;}
#M14_totUserList .M14_num{color:white;font-size:11px;}

/*On positionne les Pseudos*/
#M14_totUserList  a[href^="/u"] , #M14_totUserList  a[href^="/u"]  span
{
margin-top:5px;/*on decale de 5px sur la hauteur*/
margin-left:5px;/*on decale de 5px sur la gauche*/
text-decoration:none !important;/*On supprime le surlignement*/
color:white !important;/*on donne une couleur de police*/
}

/*On donne un style au curseur et dimensions images*/
.M14_Fa_List_open img, .M14_Fa_List_close img
{
cursor:pointer;/*on donne un style au curseur*/
width:24px;/*on informe la largeur de l image*/
height:24px;/*on informe la hauteur de l image*/
margin: 3px;
}
/*Le bouton d ouverture*/
.M14_Fa_List_open
{
background-color: #333333;/*On donne une couleur de fond  identique au conteneur*/
height:30px;/*on donne une hauteur identique au conteneur*/
width:80px;/*on donne une largeur a la hauteur*/
margin-left: -80px;/*on affiche le bouton avec une negativite de -80px*/
float:left;/*on positionne le bouton a gauche*/
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;  
}
/*Le bouton de fermeture*/
.M14_Fa_List_close
{
background-color: #333333;/*On donne une couleur de fond  identique au conteneur*/
height:30px;/*on donne une hauteur identique au conteneur*/
width:30px;/*on donne une largeur a la hauteur*/
position: absolute;
right:32px;/*on positionne le bouton a 32px de la droite*/
}
/*La notification de membre en ligne*/
.M14_Fa_List_open span span#M14_num
{
font-size:11px;/*on donne une taille de police*/
color:white;
margin: 5px 5px 5px -5px;
cursor:pointer;
position:absolute;
}

Dans le cas ou vous n'aviez pas de widgets auparavant:

Ajoutez à la C.S.S ceci:
Code:
/*on supprime les widgets*/
#left{display:none;}

Dans le cas ou vous aviez déjà des widgets:

Ajoutez à la C.S.S ceci:
Code:
/*on masque le widget Qui est en ligne*/
#left #M14_none_Forum{display:none;}





Dernière édition par Milouze14 le Lun 29 Nov 2021 - 16:45, édité 9 fois
Revenir en haut Aller en bas
https://www.milouze14.com

AuteurMessage
chrisnvidia
Milouzien

chrisnvidia



[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar - Page 2 Empty
MessageSujet: Re: [TOUTES VERSIONS] Afficher les membres connectés sous la toolbar   [TOUTES VERSIONS] Afficher les membres connectés sous la toolbar - Page 2 EmptyMar 4 Déc 2018 - 20:42

Merci beaucoup !
Revenir en haut Aller en bas
https://sos-pc.forumactif.org/
 
[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar
Revenir en haut 
Page 2 sur 2Aller à la page : Précédent  1, 2
 Sujets similaires
-
» [TOUTES VERSIONS] Afficher le rang dans la toolbar
» [TOUTES VERSIONS] Afficher le nombre de script(s) disponible dans le welcome(Toolbar)
» [TOUTES VERSIONS] Afficher le logo de votre forum dans la toolbar
» [TOUTES VERSIONS]Afficher un message aux membres ayant moins de X messages
» [TOUTES VERSIONS] Afficher les différentes parties du P.A sous forme de widgets à gauche

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