[bb2] Offline Icon einsetzen

Hallo

da ja schon oft danach gefragt wurde, ob es möglich ist, ein Offline-Icon anzeigen zu lassen, habe ich euch mal eine ausführliche Erklärung dazu erstellt.
Das Offline-Icon wird hierdurch in der Kontaktzeile der User angezeigt.
Diese Anleitung ist nur etwas für erfahrene User, da man die Positionierung über das CSS selber einstellen muss.


Schritt 1:
ihr müsst zuerst eine Grafik für das Oflline-Icon erstellen oder erstellen lassen. Die Maße dieses Icons dürfen keinesfalls größer als das des Online-Icons sein, da es ansonsten durchschimmern würde, weil es immer angezeigt wird und nur bei Usern, die online sind, von dem Online-Icon überdeckt wird. Ein Beispielbild folgt weiter unten.
Entweder ihr nehmt exakt die gleichen Maße oder ein paar Millimeter kleiner.

Das Online-Icon bleibt wie bisher ganz normal über den Adminbereich eingefügt. Daran müsst ihr nichts ändern.

Schritt 2:
Adminbereich - Anzeige - Templates - Allgemeines - viewtopic_body

dort sucht ihr folgenden Abschnitt und fügt das grün markierte dazu, wie hier abgebildet:

<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
<div id="offline">{postrow.displayed.ONLINE_IMG}</div>
</td>

wir haben dieser Variable nun eine diverse ID vergeben, sodass wir diese dann über das CSS positionieren können.


wenn ihr das habt, dann könnt ihr die Änderung absenden und dann auf der Seite, zu der ihr weitergeleitet werdet, aktivieren, indem ihr auf das grüne Kreuz klickt.

Schritt 3:

Adminbereich - Anzeige - Bilder&Farben - Farben - Reiter CSS Stylesheet

hier fügt ihr in das große Feld folgenden Code ein:

#offline {
background: url("http://URL EURER GRAFIK.png") no-repeat scroll 0 0 transparent;
float: right;
margin-left: 200px;
margin-top: -24px;
position: absolute;
width: 75px;
height: 29px;
}

bevor ihr den Code absendet, müsst ihr noch einiges bearbeiten, bzw verändern.

bei background: url("xxxxxxxxxxxxxx")
müsst ihr die Grafikadresse der Grafik eintragen, die für das Offline-Icon erscheinen soll.

bei width: und height: müsst ihr unbedingt die Breite und Höhe der Grafik in Pixeln angeben, sonst wird diese nicht richtig angezeigt.

Wichtig!: Nun müsst ihr noch speziell, auf euer Forum abgestimmt, den Abstand (margin) eingeben, weil dieser nicht grundsätzlich für jedes Forum gleich ist. Es ist abhängig von der Größe des Icons, der allgemeinen Breite eures Forums und auch von den übrigen Buttons, die sich im Kontaktfeld befinden.
Bei margin-top: und margin-left: müsst ihr also die Pixelzahl eingeben, die bei euch am besten passt.
Je höher der Wert bei "margin-left" ist, umso mehr rückt das Icon nach rechts.
Achtet bitte unbedingt darauf, dass die Kontaktzeile jedes Users unterschiedlich ist, je nach eingegebenen Daten.
Passt den Code für margin unbedingt an die Kontaktzeile des Users an, der dort die meisten Buttons hat.
Ich würde euch raten, den Button ganz rechts an den äußeren Rand zu setzen, da dann die Gefahr, dass andere Buttons überdeckt werden, nicht gegeben ist.

ein Beispielbild aus meinem Testforum:
hier seht ihr übrigens sehr gut, wie es aussieht, wenn der Offline-Button nicht an den Online-button angepasst wurde!(wie weiter oben schon von mir angesprochen wurde)


Ich werde später noch eine Erklärung einstellen, wie man das Offline-Icon ins Profilfeld unter den Avatar setzt.

so, nun geht es weiter mit der Erklärung, wie ihr das Offline-Online Icon unter den Avatar setzt

Auch hier braucht ihr ein wenig Erfahrung in CSS, weil ihr das Icon richtig positionieren müsst. Im Prinzip geht es genauso wie oben erklärt.
Ihr braucht eine Grafik für das Offline-Icon, die die gleichen Maße wie das Online-Icon hat. Nur die Änderung im Template ist eine andere.

Adminbereich - Anzeige - Templates - Allgemeines - viewtopic_body

dort sucht ihr diesen Abschnitt und löscht das rot markierte raus:

<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
</td>

dann sucht ihr folgenden Abschnitt und fügt das grün markierte hinzu:

<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<div id="offline">{postrow.displayed.ONLINE_IMG}</div><br /><br /><br /><br />
<!-- BEGIN profile_field -->

dann die Templateänderung absenden und aktivieren.

Der CSS-Eintrag ist ähnlich dem obigen, jedoch ist die Positionierung des Icons einfacher.
Die Werte, die ich hier eingetragen habe, sollten das Icon mittig unter dem Avatar platzieren. Feinheiten könnt ihr nach Belieben einstellen, indem ihr die margin-Werte anpasst.

Code:

#offline {
background: url("http:/ADRESSE EURER GRAFIK.png") no-repeat scroll 0 0 transparent;
margin-left: 15px;
margin-top: -10px;
width: 75px;
height: 29px;
}