Icone "En Ligne" dans la Liste des Membres

Hello N.U. !


Après avoir discuter avec un membre phare de ce forum, on m'a conseillé de venir quémander un JS pour ma demande. J'ai codé ma liste des membres ici: http://onceuponadream.forumactif.org/memberlist  et j'aimerai pouvoir afficher l'icône "en ligne" (le même que celui qui apparaît sur les profils, dans un sujet), lorsqu'un membre est en ligne.

J'ai essayé en intégrant la balise correspondantes, dans le Templates de la Liste des Membres, mais l'on m'a dit que cela ne fonctionnerait pas. Ma demande ne serait possible que par un Javascript.

Ainsi, je voulais vous demander si quelqu'un serait apte et aurait le temps/l'envie de me coder cela ? Je ne m'y connais absolument pas en JS...


MERCI d'avance à celui/ceux qui s'attarderont sur ma demande.  

Hello ♥

J'ai bien envie de prendre cette demande de LS ! :)

Je ferai mon LS basé sur la liste des membres "non modifiées", mais pour tester, est ce que tu pourrais faire quelques petites modifications sur ton template ?

On va faire une première modification ici :

Code:

<a class="memb" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>

Pour rajouter une classe qui nous permettra de sélectionner l'élément :

Code:

<a class="memb js-member-link" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>

Ensuite, dans la div qui entoure toute la zone d'un membre, on va encore une fois rajouter une classe :

Code:

<div class="forum">

Et on met

Code:

<div class="forum js-member-block">

Normalement ça ne devrait rien changer, ça sera juste utile ensuite :)

Maintenant, on va aller rajouter un javacript (^-^)
PA > Affichage > Modules > Gestion des codes JS
Il est à activer sur toutes les pages, et on met dedans :


Ensuite pour personnaliser, tout se fait avec du CSS et du HTML

Par exemple, si j'ajoute dans mon CSS :

Code:

.is-online {
    box-shadow: 0 5px 8px -5px #24B1FF;
}

Ca me donnera une petite ombre en dessous des membres connectés → https://i.imgur.com/3GqoNBn.png

___

Si je veux plutôt styliser un élément à l'intérieur, je peux faire ça par exemple :

Code:

.is-online .contmemb {
    background: #002A40;
    color: white;
}

Ca va me colorer .contemb pour les membres connectés → https://i.imgur.com/us1m5mA.png

Le sélecteur signifie "Prend la classe contmemb qui se trouve dans l'élément avec la classe is-online"

Merci beaucoup de t'occuper de ma demande ! T'es géniale ! °Q°

Alors j'ai suivit ton tuto. Pour ma part, ce serait plus l'apparition d'un petit gif. (celui-ci: http://www.wilsongbordercollies.com/images/glitter.gif ) que je voudrais mettre. J'ai donc ajouter ce code:

Code:

.is-online .contmemb {
    background-image: url(http://www.wilsongbordercollies.com/images/glitter.gif);
    background-repeat: no-repeat; }

Ca fonctionne très bien, juste que mon p'tit gif s'affiche en haut à gauche de la div contmemb. J'aimerai qu'il se place en bas à droite (sur la même ligne que le MP). J'ai essayé des p'tits margin pour le déplacer comme je fais beaucoup (même si c'est sûrement risqué) sauf que ça ne bouge pas sa place ^^ Comment faire ? :)

En CSS pour placer le fond, on peut utiliser background-position :)

Par exemple :

Code:

background-position: bottom right;

On peut aussi mettre des valeurs directement en pixel :

Code:

background-position: 120px 40px;

En cherchant sur internet on peut trouver plein de manières différentes de l'utiliser, je te laisse jouer un peu avec :)

J'espère que cela te convient (^-^)
Je n'ai pas mis de crédit pour Never Utopia, car c'est toujours délicat pour les codes javascript comme ça (trouver où le mettre), mais pense à le rajouter quelque part. ♥

Merci beaucoup c'est parfait !
Le crédit est en bas du forum :)