---
title: "Indicador de avatar en línea / fuera de línea como Instagram"
url: "https://fcuba.net/threads/165-indicador-de-avatar-en-linea-fuera-de-linea-como-instagram"
forum: "Xenforo"
author: "Lucien"
published: "2021-08-26T13:27:02.000Z"
updated: "2021-08-26T13:27:02.000Z"
page: 1
pages: 1
---

# Indicador de avatar en línea / fuera de línea como Instagram

In [Xenforo](https://fcuba.net/forums/165-xenforo.md), started by Lucien on 2021-08-26T13:27:02.000Z.

## Lucien, [2021-08-26T13:27:02.000Z](https://fcuba.net/threads/165-indicador-de-avatar-en-linea-fuera-de-linea-como-instagram#post-660)

> [spoiler]
>
> Plantilla **message\_macros**
>
> encuentra:
>
> ```
> <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
> ```
>
> Remplaza por:
>
> ```
> <xf:if is="$xf.options.showMessageOnlineStatus && $user && $user.isOnline()">
>                 <div class="xgt-avatar2">
>                         <div class="xgt-avatar-border2">
>                     <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
>                        </div>
>                 </div>
>                 <xf:else />
>                     <div class="xgt-avatar">
>                         <div class="xgt-avatar-border">
>                     <xf:avatar user="$user" size="m" defaultname="{$fallbackName}" itemprop="image" />
>                        </div>
>                 </div>               
>                 </xf:if>
> ```
>
> En **extra.less**, agregue el siguiente código:
>
> ```
> .xgt-avatar{
>     display: block;
>     background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
>     border-radius: 50%;
>     padding: 4px;
>     box-shadow: 0px 0px 10px 3px rgba(178, 34, 34, 0.38); 
>
> }
>
> .xgt-avatar-border{
>     display: block;
>     border: 4px solid #fff;
>     border-radius: 50%;
> }
>
> @media (max-width: @xf-publicNavCollapseWidth)
> {
> .xgt-avatar{
>     padding: 2px;
>     }
> .xgt-avatar-border{
>       border-width: 2px;
>     }
> }
>
> .xgt-avatar2{
>     display: block;
>     background: linear-gradient(to right, green, yellow);
>     border-radius: 50%;
>     padding: 4px;
>     box-shadow: 0px 0px 10px 3px rgba(4, 90, 15, 0.38);
>
> }
>
> .xgt-avatar-border2{
>     display: block;
>     border: 4px solid #fff;
>     border-radius: 50%;
> }
>
> @media (max-width: @xf-publicNavCollapseWidth)
> {
> .xgt-avatar2{
>     padding: 2px;
>     }
> .xgt-avatar-border2{
>       border-width: 2px;
>     }
> }
> ```
>
> y listo
>
> [attachment]