Image instead of Text- Online/Offline Status in Mini Profile

[catatonicgalaxy]

Found these Great animated Online/Offline Buttons for Proboards Mini-Profiles .. Thanks to Craig for Writing the Code and thanks to me for finding the images !!! Enjoy !!!

should end up looking like this < Click me

Oct 21, 2014 6:06:44 GMT -8 Craig said:

<span style="color: #{if $[user.is_online]}e6de19{else}FF0000{/if}; font-weight: bold;">
{if $[user.is_online]}
<img src="http://i.imgur.com/c9pskvl.gif" alt=" Online " />
{else}
<img src="http://i.imgur.com/othmXj5.gif" alt=" Offline " />
<span style="font-family: Verdana, Arial; font-size: 10pt;"></span>
{/if}
</span>


[Former Member]

anyone know where i put this please

[Phear]

Jul 16, 2015 15:52:13 GMT -8 @joecool111 said:

anyone know where i put this please

I was curious myself, and it looks like you're going to go to:

Layout Templates > Mini Profile


Look on Line 28, for this code:


{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}


Replace that entire line with the code above. Since the links no longer work for the images, be sure to replace the links in the code with your own.

[Lynx]

You should be able to right-click each image above and Save As ... to save it to your computer. Then, just upload to someplace like Imgur and get your own URL for each to replace the current image URLs in the code.

[Phear]

Aug 3, 2015 8:28:52 GMT -8 Lynx said:

You should be able to right-click each image above and Save As ... to save it to your computer. Then, just upload to someplace like Imgur and get your own URL for each to replace the current image URLs in the code.

Well, I was saying that because the image links above aren't working, and the images are coming up broken for me.

[Lynx]

Understood. I was merely pointing that out for those who may not know what to do to get a working URL for them.

[Former Member]

i.imgur.com/RcUlYom.gif
i.imgur.com/3h1SfCu.gif

i got them i think, i'll try them

[Former Member]

Aug 3, 2015 8:32:16 GMT -8 Lynx said:

Understood. I was merely pointing that out for those who may not know what to do to get a working URL for them.

those images work, but they dont work in the code, anyidea ?

[Phear]

Your code should look just like this, and it should work. Try just copying and pasting what's below.


<span style="color: #{if $[user.is_online]}e6de19{else}FF0000{/if}; font-weight: bold;">

{if $[user.is_online]}

<img src="http://i.imgur.com/3h1SfCu.gif" alt=" Online " />

{else}

<img src="http://i.imgur.com/RcUlYom.gif" alt=" Offline " />

<span style="font-family: Verdana, Arial; font-size: 10pt;"></span>

{/if}

</span>

[Former Member]

Aug 3, 2015 9:23:06 GMT -8 Phear said:

Your code should look just like this, and it should work. Try just copying and pasting what's below.


<span style="color: #{if $[user.is_online]}e6de19{else}FF0000{/if}; font-weight: bold;">

{if $[user.is_online]}

<img src="http://i.imgur.com/3h1SfCu.gif" alt=" Online " />

{else}

<img src="http://i.imgur.com/RcUlYom.gif" alt=" Offline " />

<span style="font-family: Verdana, Arial; font-size: 10pt;"></span>

{/if}

</span>

got this thanks, looks cool

[Phear]

Glad to hear!

[Azy]

I did something like this on my forum a while ago, having a tiny red cube for offline, and a green cube with the word "Online" in a label next to it.

Handy feature I noticed, too. If you upload the images to the themes page directly, instead of using an outside host like imgur, you can access the image directly in any template, for example:
               {if $[user.is_online]}                
                        $[theme.image.StatusOnline]
                   <br />
               {else}
                       $[theme.image.StatusOffline]<br />
                   <br />
               {/if}

This also means that code will work, even if you later change the images, as long as you upload the new image to overwrite the old one, keeping the same name