-49%
Le deal à ne pas rater :
Coffret Hot Wheels Monster Trucks Circuit de course + petite voiture ...
25.49 € 49.99 €
Voir le deal

Aller en bas
Miettes
Miettes
Râleuse (Admin)
Informations :
► Présence aléatoire (Je passe quand je peux :p)
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2219
https://lectures-miettes.pvereecken.fr/

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

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 ?



_________________
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

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

Sam 16 Jan 2021 - 10:32
Hello !

Petite mise à jour Smile
On peut tout à fait ne pas mettre d'image et simplement de la CSS.
Il suffit de mettre votre CSS dans les classe.
Par exemple pour mettre un point vert aux personnes en ligne et un rouge aux personne hors ligne la CSS est la suivante :
Code:
/***---  "en ligne" / "hors ligne" ---***/
.online-offline{
    background: red;
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 25px;
}

.online-offline.online {
    background: green;
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 25px;
}

Et voilà Smile

EDIT :
Et pour mettre du texte à la place on va utiliser les pseudos éléments Wink
Code:
.online-offline::before{
content:"Hors ligne";
  color:red;
}

.online-offline.online::before {
content:"En ligne";
  color:green;
}

_________________
Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses