Avatar-Umrandung mit CSS funktioniert nicht

[Tierfreund-97]

Hallöle!

Ich habe in meinem Forum www.mysterious.forumclan.com den Code für die Avatar-Umrandung eingefügt, also diesen hier:

Code:


.postdetails.poster-profile a img {
border: 1px solid #000000 !important
}

Aber die Umradnung wird nicht angezeigt. Liegt es vielleicht daran, dass ich im Template viewtopic_body schon was geändert habe?
Wäre ganz toll, wenn mir jemand weiter helfen könnte!

Liebe Grüße,
Tierfreund-97

[#Frank]

Wo Hast du diesen Code her?

[Tierfreund-97]

Als ich mal einen vorgefertigten Style von hitskin.com installiert hatte, war dieser Code dabei.

Wieso?

[#Frank]

So wie ich es sehe, ist das dann aber ein Code gewesen, der für ein phpBB3 Forum geschrieben wurde.
Das was du dort hast ist ein phpBB2 Forum. Hier müsstest du dem Avatar erst einmal eine eigene Class zuweisen, weil der Avatar hier nur eine img Class hat und du das Bild selber nicht so ansprechen kannst.

[Tierfreund-97]

Hmm... Okay.

Könntest du mir dann sagen, an welcher Stelle ich diese eigene Class im Template hinschreiben muss? Und wie sie heißen muss?

[#Frank]

Das kann ich gerne tun.
Als erstes müssen wir im Template:
viewtopic_body
eine Änderung vornehmen.
Du öffnest das Template zum bearbeiten und suchst dann diese Stelle:
{postrow.displayed.POSTER_AVATAR}
Normaler weise ist das die Zeile 92.
Das ersetzt du dann mit diesem Tag:

Code:

<span id="user_avatar">{postrow.displayed.POSTER_AVATAR}</span>

Das sendest du dann ab und veröffendlichst es dann.
Nun kannst du das Avatarbild über diese Class: user_avatar im CSS ansprechen.
Dein CSS Eintrag sollte dann so aussehen:

Code:

#user_avatar {
border: 1px solid #000000 !important
}

Nun kannst du dem auch noch weitere Eigenschaften hinzufügen.
Auch kannst du einen Hover Effekt noch definieren in dem du diesen CSS Code noch dazu setzt
Hier mal mit einer anderen Farbe des Randes beim drüberfahren mit der Maus:

Code:

#user_avatar:hover {
border: 1px solid #FF6600 !important
}

[Tierfreund-97]

Vielen Dank!

Ich habe alles so gemacht, wie du es sagtest. Doch jetzt sieht es irgendwie komisch aus... Nur der untere Teil des Avatars wird umrandet...

(Beispiel: http://mysterious.forumclan.com/t40-farben-eliminieren )

[#Frank]

Ja, ich habe es gerade gesehen.
Da klappt was nicht, weil du genau in dem Bereich schon eine Änderung hast.
Ich probiere noch was anders.

[#Frank]

So, versuchen wir es noch mal anders. Die Template Änderung von eben machst du bitten noch mal rückgängig:

Code:

<span id="user_avatar">{postrow.displayed.POSTER_AVATAR}</span>

und ersetzt das bitte durch das hier:

Code:

<span class="postdetails poster-profile">{postrow.displayed.POSTER_AVATAR}<br /></span>

Dann löschst du den CSS Eintrag noch mal und setzt dein CSS Eintrag von oben noch mal ein.

Code:

.postdetails.poster-profile a img {
border: 1px solid #000000 !important
}

Dann schauen wir mal wie es dann aussieht.
Das Problem ist, das du ja diese Änderung aus dem Tuto:
https://hilfe.forumieren.com/t14561-nur-bb2-den-usernamen-und-rang-unter-den-avatar-setzen#84571
ja auch schon drin hast.

[Tierfreund-97]

Jetzt ist der Avatar umrandet, allerdings auch der Kontakttext.

[#Frank]

Als Gast sehe ich das nun nicht, weil das nur Greift, wenn man eingeloggt ist.
Kannst du bitte mal das a aus dem CSS Eintrag entfernen?
Also das:

Code:

.postdetails.poster-profile a img

so ändern:

Code:

.postdetails.poster-profile img

Leider habe ich gerade nicht so viel Zeit weil ich gerade einen neuen Rechner Installieren muss. Eventuell meldet sich Zuckerpuppe gleich noch mal dazu.

[Tierfreund-97]

Wenn ich das a wegmache, wird sogar eine leere Fläche darunter umrandet.

Tut mir leid, dass ich so viel Zeit in Anspruch nehme.

Ich sehe gerade, dass sich Cyborg112233 im Forum angemeldet hat...

[Cyborg112233]

[Cyborg112233]

Hallo,

Setz mal im Template das hier ein:

Code:

<span class="postdetails poster-profile_avatar">{postrow.displayed.POSTER_AVATAR}<br /></span>

Und im CSS dann das:

Code:

.postdetails.poster-profile_avatar a img

Dann sollte es klappen, meint Frank

LG, Cyborg

[Tierfreund-97]

Ah, na endlich! Es funktioniert!

Vielen, vielen Dank euch zwei!

[#Frank]

Na das freut mich, das es nun klappt, aber ein Wermutstropfen gibt es noch:
Wenn du ausgeloogt bist ist das nicht mehr zu sehen

Edit:
Ich würde dir diesen Eintrag empfelen:

Code:

.postdetails.poster-profile_avatar img {
    border: 6px inset #ff6600 !important;
}

Ich habe da mal eine andere Rahmenfarbe und auch ein anderen Rahmenstyle eingesetzt.
Und wenn du es so einsetzt, dann sehen den Rahmen auch die Gäste.

[Tierfreund-97]

Der "inset"-Rahmen ist ziemlich hübsch! Vielleicht benutze ich ihn ja

Das die Gäste den "solid"-Rahmen nicht sehen können, stört mich nicht. ^^

Nochmals vielen dank

[#Frank]

Du brauchst nur hier das "a" wegzulassen, dann klappt das auch für Gäste:

.postdetails.poster-profile_avatar a img