Das Forum der Foren
Würden Sie gerne auf diese Nachricht reagieren? Erstellen Sie einen Account in wenigen Klicks oder loggen Sie sich ein, um fortzufahren.

Avatar-Umrandung mit CSS funktioniert nicht

3 verfasser

Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Tierfreund-97 Mo 19 Dez 2011 - 10:10

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
Tierfreund-97
Tierfreund-97
Lehrling
Lehrling

Weiblich Anzahl der Beiträge : 154
Browser : Firefox
Anmeldedatum : 09.04.11

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von #Frank Mo 19 Dez 2011 - 10:29

Wo Hast du diesen Code her?
#Frank
#Frank
Administrator
Administrator

Männlich Anzahl der Beiträge : 33551
Hinweis : Never change a running system on Friday!

Browser : Firefox
Anmeldedatum : 13.08.08

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Tierfreund-97 Mo 19 Dez 2011 - 10:31

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

Wieso?
Tierfreund-97
Tierfreund-97
Lehrling
Lehrling

Weiblich Anzahl der Beiträge : 154
Browser : Firefox
Anmeldedatum : 09.04.11

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von #Frank Mo 19 Dez 2011 - 10:41

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.
#Frank
#Frank
Administrator
Administrator

Männlich Anzahl der Beiträge : 33551
Hinweis : Never change a running system on Friday!

Browser : Firefox
Anmeldedatum : 13.08.08

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Tierfreund-97 Mo 19 Dez 2011 - 10:47

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?
Tierfreund-97
Tierfreund-97
Lehrling
Lehrling

Weiblich Anzahl der Beiträge : 154
Browser : Firefox
Anmeldedatum : 09.04.11

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von #Frank Mo 19 Dez 2011 - 11:09

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
}
#Frank
#Frank
Administrator
Administrator

Männlich Anzahl der Beiträge : 33551
Hinweis : Never change a running system on Friday!

Browser : Firefox
Anmeldedatum : 13.08.08

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Tierfreund-97 Mo 19 Dez 2011 - 11:26

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 )
Tierfreund-97
Tierfreund-97
Lehrling
Lehrling

Weiblich Anzahl der Beiträge : 154
Browser : Firefox
Anmeldedatum : 09.04.11

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von #Frank Mo 19 Dez 2011 - 11:38

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
#Frank
Administrator
Administrator

Männlich Anzahl der Beiträge : 33551
Hinweis : Never change a running system on Friday!

Browser : Firefox
Anmeldedatum : 13.08.08

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von #Frank Mo 19 Dez 2011 - 11:46

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:
http://hilfe.forumieren.com/t14561-nur-bb2-den-usernamen-und-rang-unter-den-avatar-setzen#84571
ja auch schon drin hast.
#Frank
#Frank
Administrator
Administrator

Männlich Anzahl der Beiträge : 33551
Hinweis : Never change a running system on Friday!

Browser : Firefox
Anmeldedatum : 13.08.08

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Tierfreund-97 Mo 19 Dez 2011 - 12:01

Jetzt ist der Avatar umrandet, allerdings auch der Kontakttext.
Tierfreund-97
Tierfreund-97
Lehrling
Lehrling

Weiblich Anzahl der Beiträge : 154
Browser : Firefox
Anmeldedatum : 09.04.11

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von #Frank Mo 19 Dez 2011 - 12:31

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.
#Frank
#Frank
Administrator
Administrator

Männlich Anzahl der Beiträge : 33551
Hinweis : Never change a running system on Friday!

Browser : Firefox
Anmeldedatum : 13.08.08

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Tierfreund-97 Mo 19 Dez 2011 - 13:53

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

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

Ich sehe gerade, dass sich Cyborg112233 im Forum angemeldet hat...
Tierfreund-97
Tierfreund-97
Lehrling
Lehrling

Weiblich Anzahl der Beiträge : 154
Browser : Firefox
Anmeldedatum : 09.04.11

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Cyborg112233 Mo 19 Dez 2011 - 13:55


avatar
Cyborg112233
Kaiser
Kaiser

Männlich Anzahl der Beiträge : 2362
Browser : Chrome
Anmeldedatum : 08.10.10

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Cyborg112233 Mo 19 Dez 2011 - 14:34

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 Wink

LG, Cyborg
avatar
Cyborg112233
Kaiser
Kaiser

Männlich Anzahl der Beiträge : 2362
Browser : Chrome
Anmeldedatum : 08.10.10

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Tierfreund-97 Mo 19 Dez 2011 - 15:10

Ah, na endlich! Es funktioniert!

Vielen, vielen Dank euch zwei! Very Happy
Tierfreund-97
Tierfreund-97
Lehrling
Lehrling

Weiblich Anzahl der Beiträge : 154
Browser : Firefox
Anmeldedatum : 09.04.11

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von #Frank Mo 19 Dez 2011 - 15:41

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

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.
#Frank
#Frank
Administrator
Administrator

Männlich Anzahl der Beiträge : 33551
Hinweis : Never change a running system on Friday!

Browser : Firefox
Anmeldedatum : 13.08.08

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Tierfreund-97 Mo 19 Dez 2011 - 15:53

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

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

Nochmals vielen dank Very Happy
Tierfreund-97
Tierfreund-97
Lehrling
Lehrling

Weiblich Anzahl der Beiträge : 154
Browser : Firefox
Anmeldedatum : 09.04.11

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von #Frank Mo 19 Dez 2011 - 16:06

Du brauchst nur hier das "a" wegzulassen, dann klappt das auch für Gäste:
.postdetails.poster-profile_avatar a img
#Frank
#Frank
Administrator
Administrator

Männlich Anzahl der Beiträge : 33551
Hinweis : Never change a running system on Friday!

Browser : Firefox
Anmeldedatum : 13.08.08

Nach oben Nach unten

Avatar-Umrandung mit CSS funktioniert nicht Empty Re: Avatar-Umrandung mit CSS funktioniert nicht

Beitrag von Gesponserte Inhalte


Gesponserte Inhalte


Nach oben Nach unten

Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten