Forum - RE: Avatar mit Status - Neue Version - 3

  <style>
.messageAvatar { 
  display: flex;
  justify-content: center;
  align-items: center;
  padding:10px;
}
.messageAvatar img {
  width: 120px !important;
  height: 120px !important;
  object-fit: cover; 
  border-radius: 50%; 
  box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4);
}
.messageAvatar:hover img {
  border-radius: 0% !important; 
}
.messageAvatar:hover .figure:before {
  top: 55px; 
  left: 55px;
}
.messageAvatar:hover span {
  /* display: none; */
}
 .messageAvatar .figure.gast + a > img {
  filter: grayscale(100%);
}
.figure {
  position: absolute; 
}
.figure:before {
  position: absolute;
  top: 35px; 
  left: 35px;
  /* top: 55px; */
  /* left: 55px; */
  z-index: 1;
  outline: solid 2px white;
  outline-offset: -4px;
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 50%;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25); 
}
.figure.online:before {
  background: #64A40B;
}
.figure.offline:before {
  background: #A02C2B;
}
.figure.gast:before {
  background: gray;
}
 .sidebarcontent .messageUser span img {
display:none;
} 
  .sidebarcontent strong {display: flex; justify-content: center; margin: 5px 0 10px 0;}
 
</style>
 
 
<script>
// Avatar Online / Offline - Farbe / Gastzugang
{{message.startlist}}
 
window.addEventListener('load', function(){
 
{{user_registered==true.start}}
  /* $('#post{{message:pt}} .messageAvatar img').css({'border':'2px solid  #aaaaaa','padding':'3px'});  */
  
  {{message:online==true.start}}
    $('#post{{message:pt}} .messageAvatar img').css({'border':'2px solid #64A40B','padding':'3px'});   
    $('#post{{message:pt}} .messageAvatar').prepend('<span class="figure online">&nbsp;</span>');   
  {{message:online==true.else}}
    $('#post{{message:pt}} .messageAvatar img').css({'border':'2px solid  #A02C2B','padding':'3px'});  
    $('#post{{message:pt}} .messageAvatar').prepend('<span class="figure offline">&nbsp;</span>');   
  {{message:online==true.end}}
  
{{user_registered==true.else}}
  
    $('#post{{message:pt}} .messageAvatar img').css({'border':'2px solid  #aaaaaa','padding':'3px'});  
    $('#post{{message:pt}} .messageAvatar').prepend('<span class="figure gast">&nbsp;</span>');   
    $('#post{{message:pt}} .messageUser span img').css('filter', 'grayscale(100%)');   
  
{{user_registered==true.end}}
 
// Kleine Grafik ausblenden 
/* $('.messageUser span img').hide(); */
});
  
{{message.end}}
</script>