Background colour around avatar when online

[Nscalerr 🐺]

Saw this in another thread and it sounds like a great idea, but it never actually went anywhere with that thread.

Green light around avatar when online

Just wondering if it is doable Kami or if something better can be done ?

This is what I have come up with so far.

{if $[user.is_online] && $[user.avatar]}<div class="avatar" style="background: #00BB00; border-radius: 100%; margin-bottom: 5px;">$[user.avatar]</div>{/if}
{if !$[user.is_online] && $[user.avatar]}<div class="avatar" style="background: #DD0000; border-radius: 100%; margin-bottom: 5px;">$[user.avatar]</div>{/if}

[Kami]

Is this just for mini profiles or...?

[Nscalerr 🐺]

Oops sorry Kami - yes just for the mini profiles.

[Kami]

Im about to head off to bed but if this isn't answered when i wake up i'll post my code :)

[Nscalerr 🐺]

Ok Thanks. Have a good sleep.

[Kami]

Nscalerr 🐺 - here's what I did:

{if $[user.avatar]}
<div class="avatar" style="{if $[user.is_online]}border: 5px solid #ff0000;{else}border: 5px solid #000;{/if}">$[user.avatar]</div><br />

To Edit:

{if $[user.is_online]}border: 5px solid #ff0000;{else}border: 5px solid #000;{/if}

red text for online users
blue text for offline users

this will accept any inline style, with the caveat that it might take a second to load since inline styles aren't cached by the browser.

In action:

[Nscalerr 🐺]

Thanks Kami all working well. Using the code below in the end.


{if $[user.avatar]}<div class="avatar" style="{if $[user.is_online]}border: 1px solid #00BB00; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%;{else}border: 1px solid #DD0000;border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%;{/if}">$[user.avatar]</div><br />{/if}

[Kami]

If both are rounded you can put that css outside the if statement. no point to have something identical be conditional. so --

border-radius:100%; {if $[user.is_online}...