Hover Avatar

[schattenblind]

Hey
Seit diesem Beitrag ist ja jetzt etwas Zeit ins Land gegangen: viewtopic.php?t=143891

Die Frage bleibt aber, denn mit der Suche komme ich nicht weit. Da der Link dort nicht mehr geht, hier nochmal ein Beispiel für den Mod, den ich suche:
http://asdaylightdies.catching-fire.de/

Wenn man mit der Maus über die Benutzernamen derer geht, die gerade online sind, wird der Avatar angezeigt.
Gibt es sowas inzwischen für phpBB3?

Grüßchen

[Crizzo]

Hi,

das kannst du doch einfach bauen.

Pack den Benutzernamen z.B. in einen <a> (was er ja schon ist in prosilver), darein ein <span><img.... /></span>:

Code: Alles auswählen

<a href="" >Nickname<span><img... /></span></a>

viewtopic_body.html und fürs Profil eben entsprechend die memberlist... .html

Jetzt nur noch das CSS:

Code: Alles auswählen

/* damit das position:absolute ein gutes "Ziel" hat */
a { 
position: relative;
}
/* Avatar ausblenden */ 
a:link span, a:visited span, a span {
display: none; 
}
/* bei markiertem Link oder mit der Maus drüber Bild einblenden */
a:focus span, a:hover span {
position: absolute;
top: 10px;
left: 0px;
display: block;
}

Der Rest ist Deko und anpassen an deinen Geschmack und Style. Natürlich sollte <a> sepzifischer selektiert werden. Aber das Prinzip bleibt das Gleiche.

Viel Glück.

Grüße

[schattenblind]

Ach, sorry, vergessen, ich benutze subsilver, aber so passt es ja für beides

Nun verstehe ich aber nicht, wie das funktionieren soll - ich bräuchte doch einen "Platzhalter" der sagt, dass das jeweilige Avatar das dem Benutzernamen zugeordnet ist angezeigt wird? Zumindest habe ich mir das so gedacht...leider bin ich seit 6 Monaten phpBB-abstinent und muss erst wieder rein kommen, Verzeihung wenn ich mich etwas blind aufführe.

Und verstehe ich das richtig, dass ich mit selbst ein a anlege? Wie zB eine neue Link-Klasse?
Also zB "a avatar"?

Und in was ich in die Anführungszeichen setzen muss, weiß ich auch nicht.

Danke für die schnelle Antwort

[Crizzo]

Nun verstehe ich aber nicht, wie das funktionieren soll - ich bräuchte doch einen "Platzhalter" der sagt, dass das jeweilige Avatar das dem Benutzernamen zugeordnet ist angezeigt wird?

Den gibt es doch:

Code: Alles auswählen

<dt>
				<!-- IF postrow.POSTER_AVATAR -->
					<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
				<!-- ENDIF -->
				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
			</dt>

Das ist der aktuelle Avatar bzw. Benutzer der angezeigt wird und wenn jemand einen Avatar hat und wird der auch mit dem Profil verlinkt.

Und verstehe ich das richtig, dass ich mit selbst ein a anlege? Wie zB eine neue Link-Klasse?
Also zB "a avatar"?

Die neuen CSS-Klassen musst du natürlich selbst anlegen und anpassen. Und auch den HTML-Code oben.

Einfach mal ein wenig rumprobieren.

[schattenblind]

Ich weiß jetzt nicht, wo der Platzhalter her kommt, ich hab ihn jedenfalls nicht gesehen, aber so erscheints mir logisch

Die neuen CSS-Klassen musst du natürlich selbst anlegen und anpassen. Und auch den HTML-Code oben.

Ich wollte nur sicher gehn, dass ichs richtig verstanden hab, mit den Klassen anlegen.

Danke (:

[schattenblind]

Ich hab jetzt ein paar Versionen versucht, aber bis jetzt verändert sich rein gar nichts.

In die Stylesheet.css habe ich eingefügt:

Code: Alles auswählen

a.avatar {
position: relative;
}

a.avatar:link span, a:visited span, a span {
display: none;
}


a.avatar:focus span, a:hover span {
position: absolute;
top: 10px;
left: 0px;
display: block;
}

Und in der index_body.html stand vorher:

Code: Alles auswählen

		<td class="row1" width="100%"><span class="genmed">{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /><br /> {LOGGED_IN_USER_LIST}</span></td>

Habe ich erweitert zu:

Code: Alles auswählen

		<td class="row1" width="100%"><span class="genmed">{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /><br /> <a.avatar href="{memberrow.U_VIEWPROFILE}">{LOGGED_IN_USER_LIST}<span>{memberrow.USER_AVATAR}</span></a></span></td>

Was ich mit der viewtopic_body.html & memberlist_body.html soll verstehe ich nun nicht mehr so ganz, dort habe ich ja schon einen Avatar angezeigt; es geht ja um die wer-ist-online-Anzeige, nicht um die Ansicht der Memberlist oder der Threads.

Grüßchen

[Crizzo]

Deine CSS-Regel für ":hover" ist auch falsch. Schau mal hin. Da fehlt die Klasse.

[schattenblind]

ich weiß, das kann jeder sagen - aber jetzt hab ichs auch entdeckt. Fehlte auch bei den anderen.
Muss ich bei

Code: Alles auswählen

a.avatar span {

einen Doppelpunkt dazwischen setzen?

Habs jetzt ausgebessert(und den Teil mit span in 3 Versionen getestet) aber verändert hat sich trotzdem nichts.
Glaube auch eher, dass es an meinem zusammengebastelten Codeschnipsel liegt?
Da habe ich die Variablen des Mods verwendet, der den Avatar statt der Positionsnummer in der Memberlist anzeigt.

Grüßchen

[Crizzo]

Ei so:

Code: Alles auswählen

a.avatar:hover span

Oder wo soll da deiner Meinung nach : dazwischen?

[schattenblind]

Nein, bei der 3. zu definierenden in Zeile 5, noch vor dem hover

Code: Alles auswählen

a.avatar:link span, a.avatar:visited span, a.avatar span {
display: none;
}

da fehlt der

Code: Alles auswählen

:

, oder kommt da keiner hin? Steht ja auch ein a davor.