Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
Le deal à ne pas rater :
ASOS : -20% en plus sur les articles soldés
Voir le deal

Aller en bas
Miettes
Miettes
Râleuse (Admin)
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2159

Images en ligne / Hors ligne sans JS Empty Images en ligne / Hors ligne sans JS

le Mar 28 Avr 2020 - 15:24

Toutes versions

Images "En ligne"/"Hors ligne" sans javascript

Coucou Smile

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 ^^

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

Idea Cette astuce fonctionne pour toutes les versions de forum.

Le template "viewtopic_body"

Eh bien oui Smile 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>

Idea 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>

Arrow On sauvegarde et on publie.

Quelques lignes de CSS

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 Smile

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" */
}

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

Idea 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" */
}

Cas spécifiques

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

phpBB3

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

Arrow Et on sauvegarde.

ModernBB

Voilà la CSS à ajouter :
Code:
/*** Annule style par défaut du "en ligne" ***/
.online:before{
 display: none;
}

Arrow Et on sauvegarde.

AwesomeBB

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

Arrow Et on sauvegarde.




C'est tout Crazy Facile non ?



_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses