[MODERNBB] Modifier la visualisation de la présence en ligne

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 template

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

Dans le template on cherche et on trouve ceci

Code:



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

Une autre méthode, sans javascript

Hello !

Aujourd'hui je viens vous apporter une autre méthode pour changer ce "point vert" sans javascript. On peut le remplacer par du texte, une image, on peut le déplacer, etc. C'est parti !

Comprendre la CSS de base du bouton

De base, voilà à quoi ressemble la présente en ligne (le rond en haut à droite) :

Spoiler:

Tout d'abord, on va essayer de comprendre chaque ligne de la CSS de base de ce point vert Wink

Voilà la CSS de base commentée pour la comprendre

Code:: .online { position: relative; /* Ici, on dit que la balise ayant la class "online" doit être une position de référence. */ } .online::before { /* On met en forme ce qu'il y a juste avant la class "online" */ background-color: #93F037; /* Ici, c'est la couleur verte du fond */ border-radius: 10px; /* Ici, on arrondit le contenu pour lui donner sa forme bien ronde */ content: "";/* Ici on signifie juste qu'il n'y a aucun contenu (ça sera du vide donc) */ display: block;/* Ici, on lui dire de se comporter comme un bloc (comme ça on peut lui affecter des dimensions, etc) */ height: 10px;/* On règle la hauteur du point */ width: 10px;/* Là on règle sa largeur */ position: absolute;/* On lui dit de se mettre en position absolute par rapport à notre object de référence (qui est la classe Online) */ right: 9px;/* On le place à 9px de la droite */ top: 9px;/* Et à 9px du haut */ }

Voilà comment est créé ce bouton "En ligne". On va voir maintenant comment en faire absolument tout ce qu'on veut Smile

Annuler la CSS de base et mettre la sienne

Si on veut une image

Si on veut une image à la place de la couleur, qui se place au dessus de l'avatar et au milieu de notre colonne, on va mettre cette CSS que j'ai commenté pour bien expliquer.
Ici j'ai utiliser une image basique, tu peux mettre absolument tout ce que tu veux Smile

N'oublies pas de mettre à jour l'URL de ton image ainsi que les dimensions voulues pour ton bloc.

Code:: .online::before { display: block; /*ça ça ne change pas on lui demande d'être un bloc */ background: url('https://2img.net/i/fa/subsilver/icon_online_fr.gif') no-repeat; /* On installe notre image de fond et on interdit la répétition */ background-position: center;/* On place notre image de fond au centre */ width: 170px; /*on lui indique notre largeur de bloc (généralement la largeur de la colonne) */ position:relative; /* on lui enlève la position absolue */ top: auto; /* On annule la position par rapport au haut */ right: auto; /* On annule la position par rapport à la droite */ content: ""; /* On laisse le content vide */ height: 20px; /*on règle la hauteur du bloc */ margin: 0 auto 10px; /*on centre notre bloc sur la largeur et on lui met une marge en dessous de 10px */ border-radius:0; /*on enlève l'arrondie */ }

Et voilà le rendu :

Spoiler:

Si on veut du texte

Si on veut simplement écrire du texte, voilà ce que notre CSS donnera.
N'oublies pas de mettre à jour les couleurs, tailles, polices, etc.

Code:: .online::before { display: block; /*ça ça ne change pas on lui demande d'être un bloc */ background: #174217; /* On met une couleur de fond de notre choix */ width: 170px; /*on lui indique notre largeur de bloc (généralement la largeur de la colonne) */ position:relative; /* on lui enlève la position absolue */ top: auto; /* On annule la position par rapport au haut */ right: auto; /* On annule la position par rapport à la droite */ content: "Je suis en ligne"; /* On met le texte souhaité dans le content */ height: 40px; /*on règle la hauteur du bloc */ margin: 0 auto 10px; /*on centre notre bloc sur la largeur et on lui met une marge en dessous de 10px */ border-radius:0; /*on enlève l'arrondie */ /* Mise en page de notre texte */ font-size:20px; line-height:40px; text-align:center; font-family: "comic sans ms"; color:#000000; }

Ce qui donne :

Spoiler:

Et voilà ! Tout est géré en CSS et tu peux faire absolument ce que tu veux Smile

Si tu as des questions, n'hésite pas à les poser !

[MODERNBB] Modifier la visualisation de la présence en ligne

[MODERNBB] Modifier la visualisation de la présence en ligne

Re: [MODERNBB] Modifier la visualisation de la présence en ligne

Post-It des Râleuses