Badge grado a destra del nome utente e online circle

Marko · 6 mar 2021

Oggi voglio condividere con voi questa bella modifica grafica, fattibile con poche righe di css, vi permetterà di far illuminare TUTTO l'avatar di un utente quando è online, e mettere i badge alle destra dell'username, invece che sull'avatar stesso.

esempio prima:

esempio dopo:

Da aggiungere nel pannello amministrazione/aspetto/css

@media (max-width: 768px) {
.PostUser-badges {
    position: relative;
    top: 0px;
    left: 0px;
    width: 32px;
}
}

.PostUser-badges.badges {
  float: none;
  width: auto;
  margin-left: 4px;
  top: -2px;
}
.PostUser-badges.badges li span {
  margin-left: 4px;
}
.PostUser .UserOnline {
  position: absolute;
  left: -87px;
  top: -3px;
  z-index: -1;
}
.PostUser .UserOnline .icon {
  font-size: 64px;
  border: 2px solid #fff;
  border-radius: 50%;
  line-height: 64px;
  box-shadow: 0 0px 3px 3px;
}

ed il codice per cambiare il colore del cerchio è il seguente:

.PostUser .UserOnline .fa-circle {
    color: green;
}

GGatsu · 12 mar 2021

Grazie per questo css. Ho notato che in user agent android/mobile, non viene visualizzato il cerchio colorato di verde quando si è online.
Mentre in desktop mode, si sovrapppongono i vari colori nel cerchio con il gruppo utente e il colore verde per chi è online.

Marko · 12 mar 2021

Gatsu puoi mandare uno screen per capire meglio?

se vuoi vederli anche su mobile puoi provare:

@media only screen and (max-width: 480px) {

.PostUser-badges {
    position: relative;
    top: 0px;
    left: 0px;
    width: 32px;
}


.PostUser-badges.badges {
  float: none;
  width: auto;
  margin-left: 4px;
  top: -2px;
}
.PostUser-badges.badges li span {
  margin-left: 4px;
}
.PostUser .UserOnline {
  position: absolute;
  left: -87px;
  top: -3px;
  z-index: -1;
}
.PostUser .UserOnline .icon {
  font-size: 64px;
  border: 2px solid #fff;
  border-radius: 50%;
  line-height: 64px;
  box-shadow: 0 0px 3px 3px;
}

}

GGatsu · 12 mar 2021

Marko Il problema riguarda solo per la mancata visualizzazione per chi è online, in modalita user agent Android.

In Desktop mode funziona ma i colori si sovrappongono, ecco degli screen.

https://ibb.co/NmnBhjk
https://ibb.co/tqxvV39

Marko · 12 mar 2021

Gatsu hai provato l'ultimo css che ho postato?

GGatsu · 12 mar 2021

Marko Si è uguale

Marko · 12 mar 2021

Faccio qualche prova

edit provato con le media query tipo a 320px?