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;
}
