Connexion
Derniers sujets*
» [EDGE] Auto suggestion de la recherche
par tenrev Ven 22 Jan 2021 - 15:13
» [EDGE] Coloriser la cellule vue dans la liste des sujets ....
par tenrev Mar 19 Jan 2021 - 21:31
» [TOUTES VERSIONS] Utiliser les variables utilisateur/forum
par tenrev Mer 30 Déc 2020 - 16:29
» [PHPBB3] Faire un menu déroulant dans le titre d'un forum ou d'un sous forum
par tenrev Mar 29 Déc 2020 - 12:04
» [PHPBB3] Afficher un bouton de navigation sur le premier et le dernier message
par tenrev Mar 29 Déc 2020 - 11:48
» [TOUTES VERSIONS] Toutes versions Bouton générateur d'iframes
par tenrev Mar 29 Déc 2020 - 11:46
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par tenrev Mar 29 Déc 2020 - 11:43
» [AWESOMEBB] Ajouter un bouton "S'enregistrer" en haut du forum
par Milouze14 Dim 27 Déc 2020 - 8:39
» [AWESOMEBB] Coloriser les cases Annonces & Notes
par Milouze14 Mer 23 Déc 2020 - 8:17
» [PHPBB2] Séparer les messages
par fanny Lun 21 Déc 2020 - 17:51
» [PHPBB2] Mettre en résolu via la réponse rapide
par fred9545 Dim 20 Déc 2020 - 10:48
» [PHPBB2]Supprimer le tag "Re" sur les messages
par fanny Dim 13 Déc 2020 - 22:22
» [PHPBB2] Mettre une couleur de fond dans le profil des messages
par fanny Dim 13 Déc 2020 - 13:26
» [EDGE] Afficher les forums de la catégorie dans la liste des sujets
par clost Sam 12 Déc 2020 - 10:27
» [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum
par Quad Daniel Sam 12 Déc 2020 - 8:53
» [TOUTES VERSIONS] Faire clignoter le chiffre ou le nombre de notification(s) dans la toolbar
par fanny Ven 11 Déc 2020 - 14:32
» [PHPBB2] Afficher un message en haut de sujet lorsqu'il est verrouillé
par fanny Jeu 10 Déc 2020 - 10:36
» [PHPBB2] Effet loupe sur chaque message
par fanny Jeu 10 Déc 2020 - 10:11
» [TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page
par fanny Mer 9 Déc 2020 - 8:27
» [PHPBB2]Afficher les statistiques dans la liste des membres
par fanny Mar 8 Déc 2020 - 9:26
par tenrev Ven 22 Jan 2021 - 15:13
» [EDGE] Coloriser la cellule vue dans la liste des sujets ....
par tenrev Mar 19 Jan 2021 - 21:31
» [TOUTES VERSIONS] Utiliser les variables utilisateur/forum
par tenrev Mer 30 Déc 2020 - 16:29
» [PHPBB3] Faire un menu déroulant dans le titre d'un forum ou d'un sous forum
par tenrev Mar 29 Déc 2020 - 12:04
» [PHPBB3] Afficher un bouton de navigation sur le premier et le dernier message
par tenrev Mar 29 Déc 2020 - 11:48
» [TOUTES VERSIONS] Toutes versions Bouton générateur d'iframes
par tenrev Mar 29 Déc 2020 - 11:46
» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par tenrev Mar 29 Déc 2020 - 11:43
» [AWESOMEBB] Ajouter un bouton "S'enregistrer" en haut du forum
par Milouze14 Dim 27 Déc 2020 - 8:39
» [AWESOMEBB] Coloriser les cases Annonces & Notes
par Milouze14 Mer 23 Déc 2020 - 8:17
» [PHPBB2] Séparer les messages
par fanny Lun 21 Déc 2020 - 17:51
» [PHPBB2] Mettre en résolu via la réponse rapide
par fred9545 Dim 20 Déc 2020 - 10:48
» [PHPBB2]Supprimer le tag "Re" sur les messages
par fanny Dim 13 Déc 2020 - 22:22
» [PHPBB2] Mettre une couleur de fond dans le profil des messages
par fanny Dim 13 Déc 2020 - 13:26
» [EDGE] Afficher les forums de la catégorie dans la liste des sujets
par clost Sam 12 Déc 2020 - 10:27
» [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum
par Quad Daniel Sam 12 Déc 2020 - 8:53
» [TOUTES VERSIONS] Faire clignoter le chiffre ou le nombre de notification(s) dans la toolbar
par fanny Ven 11 Déc 2020 - 14:32
» [PHPBB2] Afficher un message en haut de sujet lorsqu'il est verrouillé
par fanny Jeu 10 Déc 2020 - 10:36
» [PHPBB2] Effet loupe sur chaque message
par fanny Jeu 10 Déc 2020 - 10:11
» [TOUTES VERSIONS] Afficher des boutons pour le haut et le bas de page
par fanny Mer 9 Déc 2020 - 8:27
» [PHPBB2]Afficher les statistiques dans la liste des membres
par fanny Mar 8 Déc 2020 - 9:26
Les statistiques du forum
[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
- Milouze14Fondateur

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 153](https://i.servimg.com/u/f86/11/26/21/37/153.png)
Au clic:
![[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar 232](https://i.servimg.com/u/f86/11/26/21/37/232.png)
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 115](https://i.servimg.com/u/f35/11/26/21/37/115.png)
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

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 154](https://i.servimg.com/u/f86/11/26/21/37/154.png)
Cliquez sur

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


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


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

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;}
Voila, c'est tout pour le moment

Un soucis direction l'entraide

https://www.milouze14.com/f14-entraide-forumactif
Dernière édition par Milouze14 le Ven 23 Oct 2020 - 8:09, édité 8 fois
- InvitéInvité
Merci Philippe 

- InvitéInvité
Bonjour,
Je trouve cette astuce superbe. C'est très pratique de voir qui est en ligne non pas pour épier mais pour savoir qu'on est pas tout seul. Un coup de cœur pour ce petit bijoux !!!
Merci pour ce magnifique partage
Je trouve cette astuce superbe. C'est très pratique de voir qui est en ligne non pas pour épier mais pour savoir qu'on est pas tout seul. Un coup de cœur pour ce petit bijoux !!!
Merci pour ce magnifique partage
- InvitéInvité
Merci beaucoup !
- Emc2Milouzien
Merci beaucoup !
- JackymiMembre regretté
Merci beaucoup !
- mariokMembre regretté
Merci beaucoup !
- photoclicMilouzien
Merci beaucoup !
- photoclicMilouzien
Dommage que je ne puisse pas intervenir dans les templates.
- NeptuniaMilouzien
Bon, bah allons-y pour décortiquer ce tuto !!
- photoclicMilouzien
Bonsoir Neptunia.
Ceci a déjà été traité par Philippe et fonctionne très bien.
Je ne sais plus où cela a été rangé, mais tu devrais le retrouver facilement.
Ceci a déjà été traité par Philippe et fonctionne très bien.
Je ne sais plus où cela a été rangé, mais tu devrais le retrouver facilement.
- photoclicMilouzien
ça y est j'ai retrouvé, c'est Là.
- NeptuniaMilouzien
Mdr !
Si je m'intéresse à ce tuto, c'est pour me servir de base de départ pour confectionner un widget "Anniversaire(s) du jour"
Si je m'intéresse à ce tuto, c'est pour me servir de base de départ pour confectionner un widget "Anniversaire(s) du jour"
- photoclicMilouzien



- Milouze14Fondateur

Ce forum n'a pas pour vocation d'apporter d'autre explication sur le tutoriel présent.
Si ce dernier n'est pas assez explicite:
Le forum d'entraide est prévu à cet effet.
Si ce dernier n'est pas assez explicite:
Le forum d'entraide est prévu à cet effet.
Hélène


NOUVELLE BARRE DE NAVIGATION
LES DERNIERES ASTUCES & DERNIERS MESSAGES
Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
- photoclicMilouzien
@Milouze14 a écrit:mon tit Serge,
Ce forum n'a pas pour vocation d'apporter d'autre explication sur le tutoriel présent.
Si ce dernier n'est pas assez explicite:
Le forum d'entraide est prévu à cet effet.
Bonsoir Philippe.
Je le trouve nickel ce sujet; aucune explication demandée

- Milouze14Fondateur


Et il me semble que c'est ton souhait

NOUVELLE BARRE DE NAVIGATION
LES DERNIERES ASTUCES & DERNIERS MESSAGES
Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
- photoclicMilouzien
En relisant, je crois que tu confonds avec la demande d'Hélène 
Pas d'aide supplémentaire de mon côté sur ce sujet l'ami

Pas d'aide supplémentaire de mon côté sur ce sujet l'ami

- Milouze14Fondateur


Désolé pour le dérangement mon tit Serge mais le retour de vacances est plus dur que je croyais


NOUVELLE BARRE DE NAVIGATION
LES DERNIERES ASTUCES & DERNIERS MESSAGES
Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
- photoclicMilouzien
Pas grave Philippe; un peu courtes ces vacances non?
Ravi de te retrouver en tout cas
Ravi de te retrouver en tout cas

- Milouze14Fondateur
Non, je préfère avoir des vacances ou je profite avec ma petite femme que des trucs qui durent des semaines ou l'on s'ennuie a mourir......
NOUVELLE BARRE DE NAVIGATION
LES DERNIERES ASTUCES & DERNIERS MESSAGES
Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
- photoclicMilouzien
cépafo

- SachaMilouzien
Merci beaucoup !
- fasciculariaMilouzien
Merci beaucoup !
- Tony LMilouzien
Merci beaucoup !
- dragon594Milouzien
Merci beaucoup !
- InvitéInvité
Merci beaucoup !
- WinaTicketsMilouzien
Merci beaucoup !
- 50ThierryMilouzien
Merci beaucoup !
- msfeettoesMilouzien
Merci beaucoup !
- petit coqMilouzien
Merci beaucoup !
- Ptite_PerleMilouzien
Coucou
Parfait comme toujours :) merci
Parfait comme toujours :) merci
- hamesashekMilouzien
Merci beaucoup !
- gigi60Milouzien
Merci beaucoup !
- ThunderTBMilouzien
Merci beaucoup !
Page 1 sur 2 • 1, 2
Sujets similaires internes ( 0 )
Aucun sujet
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum