[Discu Prep Tuto] Modifier la visualisation de la présence en ligne

Code:

.online:before{
    background: transparent url('http://pvereecken.fr/zenpub/zp2017/img/online.png') no-repeat 0 0;
    border-radius: 0;
    height: 25px;
    width: 139px;
    z-index: 100;
}

• Login : Tambouille
• Mot de passe : mdpTambouille2019

Afficher / Masquer :

Afficher / Masquer :

Image de statut en ligne

Bonjour le forum

Dans sa version de base l'image du statut du membre en ligne est toujours positionnée sur la partie droite du forum. Et ce indépendamment de l'affichage du profil sur les messages (à droite ou à gauche)
Avec cette astuce nous allons voir comment avoir cette image de statut positionnée au bon endroit, que le profil se trouve à droite ou à gauche.

Ceci se passe en 3 étapes, c'est parti !

1/ On supprime l'image de base

Pour ce faire on va placer un code dans la feuille de style (CSS)
Panneau d'administration >> Affichage >> Images et couleurs >> Couleurs >> Feuille de style CSS
On place ce code

Code:

.online:before{display: none}

Avec ce code l'image de la version ne sera pas affichée (display: none)

On Valide

2/ On ajoute une class dans le topic

On se rend au topic wiewtopic_body
Panneau d'administration >> Affichage >> Templates >> Général

Dans le template on cherche et on trouve ceci

Code:

<!-- div class="online2"></div-->

juste après on y dépose ceci

Code:

<img class="membreonline">

Cette class va permettre d'afficher l'image avec le script qui suit

On Enregistre et on Publie le template

3/ Le script

Pour ajouter un script sur le forum il faut se rendre ici

Panneau d'administration >> Modules >> HTML & JAVASCRIPT >> Gestion des codes Javascript
Avant tout on s'assure que la gestion des codes javascripts soit bien activée
Activer la gestion des codes Javascript : OUI et on Enregistre au besoin

Ensuite on va créer un nouveau javascript et lui donner un nom avec un placement
Nom : Image online (ou autre, vous décidez)
Placement : Sur les sujets (obligatoire)

On dépose ce code

Code:

$(function(){
var statut='https://2img.net/i/fa/responsive/icons/mini/online.png';
$('div[class*="post--"]').each(function(){
var a=$(this).hasClass('online');
if(a){$(this).find('img[class="membreonline"]').attr('src',statut).attr('title',' Membre en ligne');}
});});

Pour changer l'image de présence en ligne il faut coller son url ici

Code:

var statut='https://2img.net/i/fa/responsive/icons/mini/online.png';

il faut remplacer ceci https://2img.net/i/fa/responsive/icons/mini/online.png par l'url de votre image
La taille de l'image doit être de 16px par 16px max
Au passage de la souris sur l'image sera inscrit "Membre en ligne" ceci est modifiable dans le script ici

Code:

attr('title',' Membre en ligne');

Ensuite on Valide


Voilou, tout est prêt pour la personnalisation du statut en ligne sur votre forum modernBB