Images en ligne / Hors ligne sans JS

Coucou

Dans ce tutoriel, nous allons voir comment indiquer grâce à une image si un membre est en ligne ou non et ça, sans utiliser la moindre ligne de javascript ^^

Pré-requis :

• Avoir accès aux templates,
  
• Avoir préparé les images "en ligne" et "hors ligne" (idéalemment, de la même taille ).

Cette astuce fonctionne pour toutes les versions de forum.


Eh bien oui Quelque soit la version de ton forum, tout se passe (ou une grosse partie) dans ce template.

Nous allons donc commencer par l'ouvrir en allant dans : Panneau d'administration > Affichage > Templates > Général.

Dans ce template, il faut savoir qu'il existe une variable ForumActif qui ajoute la classe "online" si un membre est en ligne. Cette variable est la suivante :

Code:

{postrow.displayed.ONLINE_IMG_NEW}

C'est grâce à elle que nous allons pouvoir différencier nos images "en ligne" et "hors ligne".

Pour cela, on va placer ce bout de code dans le template à l'endroit où l'on veut afficher l'image de "statut" :

Code:

<div class="online-offline {postrow.displayed.ONLINE_IMG_NEW}"></div>

Par exemple, j'ai tout simplement décidé de remplacer ceci :

Code:

{postrow.displayed.ONLINE_IMG}

par ça

Code:

<div class="online-offline {postrow.displayed.ONLINE_IMG_NEW}"></div>

On sauvegarde et on publie.


Evidemment, si on s'arrête là, rien ne change, pire même, nous n'avons plus l'image "en ligne". Pas de panique :p Nous allons régler ça en CSS

Pour cela, nous allons aller dans Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS et voici la CSS à y mettre :

Code:

/***--- Images "en ligne" / "hors ligne" ---***/
.online-offline{
  background: transparent url('URL image hors ligne') no-repeat 0 0; /* Image "hors ligne" */
  display: inline-block;
  height: Npx; /* Hauteur des images */
  width: Npx; /* Largeur des images */
}

.online-offline.online {
  background: transparent url('URL image en ligne') no-repeat 0 0; /* Image "en ligne" */
}

N'oublie pas de remplacer les indications par tes propres valeurs.

Par exemple, dans mon cas :
• Image "en ligne"

Code:

https://i71.servimg.com/u/f71/20/05/19/39/enlign10.png

• Image "hors ligne"

Code:

https://i71.servimg.com/u/f71/20/05/19/39/hors-l10.png

et ma CSS :

Code:


/***--- Images "en ligne" / "hors ligne" ---***/
.online-offline{
  background: transparent url('https://i71.servimg.com/u/f71/20/05/19/39/hors-l10.png') no-repeat 0 0; /* Image "hors ligne" */
  display: inline-block;
  height: 20px; /* Hauteur des images */
  width: 80px; /* Largeur des images */
}

.online-offline.online {
  background: transparent url('https://i71.servimg.com/u/f71/20/05/19/39/enlign10.png') no-repeat 0 0; /* Image "en ligne" */
}


Pour certaines versions, il va falloir annuler le style par défaut du "online".


Voilà la CSS à ajouter :

Code:

/*** Annule style par défaut du "en ligne" ***/
.online:not(.online-offline){
  background: transparent !important;
}

Et on sauvegarde.


Voilà la CSS à ajouter :

Code:

/*** Annule style par défaut du "en ligne" ***/
.online:before{
 display: none;
}

Et on sauvegarde.


Voilà la CSS à ajouter :

Code:

/*** Annule style par défaut du "en ligne" ***/
.online .post-author-status {
    display: none;
}

Et on sauvegarde.

---

C'est tout Facile non ?