[Snippet] Online/Offline images Info

[all4phone]

Online/Offline images Info
Written by all4phone, inspired by Stoker

This phpBB3 snippet will show you how to display Online/Offline image in viewtopic and profile.


Open styles/prosilver/template/viewtopic_body.html
Find:

Code: Select all

    <!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->

Before add:

Code: Select all

    <dd><strong>Status:</strong><!-- IF postrow.S_ONLINE --><img src="images/online.gif" border="0" alt="" title="Online" /><!-- ELSE --><img src="images/offline.gif" border="0" alt="" title="Offline" /><!-- ENDIF --></dd>

Open styles/prosilver/template/memberlist_view.html
Find:

Code: Select all

  <dt>{L_USERNAME}:</dt>

Before add:

Code: Select all

<dt>Status:</dt><dd><!-- IF S_ONLINE --><img src="images/online.gif" border="0" alt="" title="Online" /><!-- ELSE --><img src="images/offline.gif" border="0" alt="" title="Offline" /><!-- ENDIF --></dd>

Selected images put in the root/images directory.

[Stoker]

Nice

[FTH]

thanks very much for this snippet

just a question

it's not better to replace

Code: Select all

<img src="images/online.gif"

by

Code: Select all

<img src="styles/{T_THEME_PATH}/images/online.gif"

to display differents images per Style ?

[all4phone]

Yes it is a fantastic idea Franck, many thanks for that.

Here are the correct changes that need to be done:

Open: styles/your_style/template/viewtopic_body.html
Find:

Code: Select all

<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->

Before add:

Code: Select all

<dd>Status: <!-- IF postrow.S_ONLINE --><img src="{T_THEME_PATH}/images/online.png" border="0" alt="" title="Online" /><!-- ELSE --><img src="{T_THEME_PATH}/images/offline.png" border="0" alt="" title="Offline" /><!-- ENDIF --></dd>

Open: styles/prosilver/template/memberlist_view.html
Find:

Code: Select all

<dt>{L_USERNAME}:</dt>

Before add:

Code: Select all

<dt>Status: </dt><dd><!-- IF S_ONLINE --> <img src="{T_THEME_PATH}/images/online.png" border="0" alt="" title="Online" /><!-- ELSE --><img src="{T_THEME_PATH}/images/offline.png" border="0" alt="" title="Offline" /><!-- ENDIF --></dd>

Place these two eg images in styles/your_style/theme/images directory:

online.png (433 Bytes) Viewed 2831 times

offline.png (439 Bytes) Viewed 2831 times

Refresh template of your style.

Demo:

[all4phone]

Sorry for the twice posting, but only three attachments was not enough to show what I wanted

---

Additionally, you can remove the standard status icon:

icon_user_online.gif (423 Bytes) Viewed 2826 times

Open: style/your_style/theme/colours.css
Find and remove:

Code: Select all

.online {
	background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
}

Find and remove in styles/prosilver/imageset/your_language directory,
icon_user_online.gif file.

[Sniper_E]

That would create a CSS error to remove the .online class from the colours.css file.
IF you are going to remove the online image for this snippet...
I would suggest removing the online class from the viewtopic_body.html template instead.
Find

Code: Select all

	<div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->">

InLine Remove

Code: Select all

<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->

[all4phone]

IF you are going to remove the online image for this snippet...
I would suggest removing the online class from the viewtopic_body.html template instead.

@Sniper_E, thanks for your suggestion, it works perfectly .