Derniers sujets*
» [AWESOMEBB]Ajouter la pagination des sujets précédents et suivants
par Milouze14 Aujourd'hui à 8:30

» [TOUTES VERSIONS] Auto suggestion des membres sur les tags
par Milouze14 Hier à 14:27

» [TOUTES VERSIONS] Sauvegarder le contenu de l'éditeur
par Sick.l.Offrande Mar 4 Mai 2021 - 12:42

» [TOUTES VERSIONS]Mise en place automatique décorations
par photoclic Lun 3 Mai 2021 - 20:39

» [TOUTES VERSIONS] Afficher une belle infobulle au survol des boutons J aime
par Chéryl Lun 3 Mai 2021 - 12:37

» [BESTOF][PHPBB3] Couleurs des Pseudos dans la liste des likers
par Milouze14 Lun 3 Mai 2021 - 10:15

» [TOUTES VERSIONS] Afficher les likes seulement sur les messages des autres membres et plus encore
par Roza Dim 2 Mai 2021 - 16:08

» [EDGE]Afficher la majeure partie des variables avec un bouton sur l'éditeur
par Stefano36 Dim 25 Avr 2021 - 23:49

» [TOUTES VERSIONS] Installer MESSENGER Forumactif sur votre forum (Version Française)
par sunshinette Sam 24 Avr 2021 - 15:40

» [BESTOF][PHPBB3] Nouveau message après édition
par Milouze14 Sam 24 Avr 2021 - 11:44

» [PHPBB2] Couleur spécifique aux membres d'un rang dans les messages
par Roza Ven 23 Avr 2021 - 11:07

» [MODERNBB] Supprimer l'effet scroll sur la barre de navigation
par Milouze14 Lun 12 Avr 2021 - 7:56

» [MODERNBB]Retirer les crochets des groupes dans le Qeel
par Serah Sam 10 Avr 2021 - 22:48

» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par Stefano36 Mer 31 Mar 2021 - 21:57

» [PHPBB2] Afficher le nombre de message privé non lus sur la toolbar etc
par Constellation Mer 31 Mar 2021 - 1:59

» [PHPBB2] Remplacer le mot Invité
par Constellation Mer 31 Mar 2021 - 1:37

» [TOUTES VERSIONS] Héberger du css dans une page html comme sur la feuille de style
par Constellation Mer 31 Mar 2021 - 1:31

» [TOUTES VERSIONS]Message de confirmation de fermeture de la page pour les membres distraits
par Constellation Mer 31 Mar 2021 - 1:24

» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
par Constellation Mer 31 Mar 2021 - 1:14

» [TOUTES VERSIONS] Modifier les textes de la barre de navigation
par Constellation Mar 30 Mar 2021 - 22:53

Les statistiques du forum
Nous avons 470 membres enregistrés

L'utilisateur enregistré le plus récent est Garrett

Nos membres ont posté un total de 25325 messages dans 1292 sujets

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

Page 1 sur 2 1, 2  Suivant

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

Message n°10
Milouze14
Milouze14
Fondateur

https://www.milouze14.com

MessageMilouze14 Lun 2 Mai 2016 - 9:07

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 153

Au clic:
[TOUTES VERSIONS] Afficher les membres connectés sous la toolbar 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 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 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;}




Voila, c'est tout pour le moment clin oeil .
Un soucis direction l'entraide hinhin
https://www.milouze14.com/f14-entraide-forumactif



Dernière édition par Milouze14 le Ven 23 Oct 2020 - 8:09, édité 8 fois
Message n°20
Anonymous
Invité
Invité

MessageInvité Lun 2 Mai 2016 - 9:48

Merci Philippe clin oeil
Message n°30
Anonymous
Invité
Invité

MessageInvité Lun 2 Mai 2016 - 11:17

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
Message n°40
Anonymous
Invité
Invité

MessageInvité Lun 2 Mai 2016 - 11:27

Merci beaucoup !
Message n°50
Emc2
Emc2
Milouzien

http://polisetsophia.forumactif.org/

MessageEmc2 Mar 28 Juin 2016 - 21:54

Merci beaucoup !
Message n°60
Jackymi
Jackymi
Membre regretté

http://www.skywebforum.com/

MessageJackymi Jeu 30 Juin 2016 - 14:45

Merci beaucoup !
Message n°70
mariok
mariok
Membre regretté

http://www.amarid.net

Messagemariok Mar 5 Juil 2016 - 8:21

Merci beaucoup !
Message n°80
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Ven 15 Juil 2016 - 16:15

Merci beaucoup !
Message n°90
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Dim 17 Juil 2016 - 13:10

Dommage que je ne puisse pas intervenir dans les templates.
Message n°100
Neptunia
Neptunia
Milouzien

https://www.galaxie-series.net/

MessageNeptunia Dim 7 Aoû 2016 - 13:47

Bon, bah allons-y pour décortiquer ce tuto !!
Message n°110
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Dim 7 Aoû 2016 - 19:39

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.
Message n°120
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Dim 7 Aoû 2016 - 19:50

ça y est j'ai retrouvé, c'est Là.
Message n°130
Neptunia
Neptunia
Milouzien

https://www.galaxie-series.net/

MessageNeptunia Dim 7 Aoû 2016 - 20:09

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"
Message n°140
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Dim 7 Aoû 2016 - 20:23

ptderire ptderire ptderire
Message n°150
Milouze14
Milouze14
Fondateur

https://www.milouze14.com

MessageMilouze14 Mar 9 Aoû 2016 - 19:24

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


Hélène coucou pourra continuer à t'aider sur le sujet que tu auras créé mon ami clin oeil


NOUVELLE BARRE DE NAVIGATION


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Message n°160
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Aoû 2016 - 19:32

@Milouze14 a écrit:coucou 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 MDR
Message n°170
Milouze14
Milouze14
Fondateur

https://www.milouze14.com

MessageMilouze14 Mar 9 Aoû 2016 - 19:34

ptderire je sais mais pour avoir une aide il faut passer par l'entraide mon tit Serge impeccable .

Et il me semble que c'est ton souhait clin oeil


NOUVELLE BARRE DE NAVIGATION


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Message n°180
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Aoû 2016 - 19:37

En relisant, je crois que tu confonds avec la demande d'Hélène ptderire

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

Message n°190
Milouze14
Milouze14
Fondateur

https://www.milouze14.com

MessageMilouze14 Mar 9 Aoû 2016 - 19:40

pasvuT hum comment te dire, ben je suis navré ptderire .

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


NOUVELLE BARRE DE NAVIGATION


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Message n°200
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Aoû 2016 - 19:51

Pas grave Philippe; un peu courtes ces vacances non?

Ravi de te retrouver en tout cas hinhin
Message n°210
Milouze14
Milouze14
Fondateur

https://www.milouze14.com

MessageMilouze14 Mar 9 Aoû 2016 - 19:53

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


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Message n°220
avatar
photoclic
Milouzien

https://photoclic.forum-pro.fr/

Messagephotoclic Mar 9 Aoû 2016 - 19:57

cépafo impeccable
Message n°230
Sacha
Sacha
Milouzien

https://amis-pub.forumactif.com/

MessageSacha Dim 25 Sep 2016 - 20:51

Merci beaucoup !
Message n°240
fascicularia
fascicularia
Milouzien

https://altitudetropicale.forums-actifs.com/

Messagefascicularia Dim 2 Oct 2016 - 21:51

Merci beaucoup !
Message n°250
avatar
Tony L
Milouzien

https://diamant-mandarin-evo.superforum.fr/

MessageTony L Mer 19 Oct 2016 - 22:41

Merci beaucoup !
Message n°260
dragon594
dragon594
Milouzien

https://dragon-graphisme59.forumactif.org/

Messagedragon594 Lun 7 Nov 2016 - 18:26

Merci beaucoup !
Message n°270
Anonymous
Invité
Invité

MessageInvité Jeu 17 Nov 2016 - 21:26

Merci beaucoup !
Message n°280
WinaTickets
WinaTickets
Milouzien

Avertissement : 50/100
https://www.pmturf.com/

MessageWinaTickets Dim 4 Déc 2016 - 13:16

Merci beaucoup !
Message n°290
50Thierry
50Thierry
Milouzien

http://www.gps-sne.com/

Message50Thierry Ven 9 Déc 2016 - 3:08

Merci beaucoup !
Message n°300
msfeettoes
msfeettoes
Milouzien

Avertissement : 50/100
https://feetloverfeets.forumactif.com/

Messagemsfeettoes Ven 14 Avr 2017 - 11:57

Merci beaucoup !
Message n°310
avatar
petit coq
Milouzien

Messagepetit coq Ven 2 Juin 2017 - 20:30

Merci beaucoup !
Message n°320
Ptite_Perle
Ptite_Perle
Milouzien

https://forumcrea.forumactif.org/

MessagePtite_Perle Mar 1 Aoû 2017 - 16:28

Coucou

Parfait comme toujours :) merci
Message n°330
hamesashek
hamesashek
Milouzien

http://3arb-way.a7larab.net/

Messagehamesashek Mar 12 Déc 2017 - 0:53

Merci beaucoup !
Message n°340
gigi60
gigi60
Milouzien

https://lacaverneagigi.forums-actifs.com/

Messagegigi60 Jeu 24 Mai 2018 - 8:08

Merci beaucoup !
Message n°350
avatar
ThunderTB
Milouzien

http://hockeyfederation.forumgratuit.org/forum

MessageThunderTB Jeu 23 Aoû 2018 - 22:29

Merci beaucoup !

Page 1 sur 2 1, 2  Suivant

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

Sujets similaires internes ( 0 )
Aucun sujet

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à Milouzien ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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