Online-Indikator statt oben links komplett als Umlauf um den Avatar

[Maestro2k5]

Hallo,

wäre es möglich den Online Indikator statt an einer Ecke einfach einen grünen Rahmen um das Avatar zieht, könnte mir gut vorstellen das dies schick aussieht.

MFG

Maestro2k5

 

[Divokymuz]

Ich als codetechnischer Halbaffe, würde es einfach mit einem entsprechenden Bild versuchen.

Der Avatar sollte ja immer die gleiche Größe haben, da sollte das doch mit einem entsprechenden Bildersatz für den grünen Kram hinhauen, oder ?

 

[Hoffi]

Nein, kein Bild. Auf keinen Fall.

Das Dreieck ist auch nur ein HTML Span der mittels CSS gestyled wurde.

Mal eben mit der Konsole ein bisschen das CSS modifiziert.

Es gibt eine neue Style-Gruppe mit der man das Icon steuern kann.
Dort die breite der Border anpassen, und in das Extra-Feld mittels width und height Angabe die Größe festlegen. Ein wenig mit der Border spielen und dem Radius und fertig ist die Lauge.

 

[McAtze]

Per CSS keine Problem ..

 

[Maestro2k5]

Nice das gefällt.

 

[McAtze]

Ich korrigiere mich: Nicht ganz so einfach ..

 

[Lemminator]

@Hoffi kannst du das auch mit offline verknüpfen ? Also online grün und offline rot ?

 

[Divokymuz]

@Hoffi kannst du das auch mit offline verknüpfen ?

Und für nen unwissenden deutlich erklären So mit Bildern uns so

 

[bt012ss]

@Hoffi kannst du das auch mit offline verknüpfen ? Also online grün und offline rot ?

Nehmen wir an du wärst jetzt offline und das grüne Ding wäre weg, offline = "Orange" oder was du sonst so willst.



Ansonsten -->

Nicht ganz so einfach ..

 

[McAtze]

Das wäre (im Prinzip) ganz einfach.

<xen:if is="{$user.isOnline}">
border: green;
<xen:else />
border: red;
</xen:if>

 

[Lemminator]

hab das jetzt eingefügt ins message_user_info template ... aber dann steht unter dem bild border red oder border green ? kann aber auch sein das ich ja was falsch gemacht habe

div class="messageUserBlock {xen:if $user.isOnline, online}">
    <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
        <div class="avatarHolder">
            <span class="helper"></span>
            <xen:avatar user="$user" size="m" img="true" />
            <xen:if is="{$user.isOnline}">border: green;<xen:else />border: red;</xen:if>
            <!-- slot: message_user_info_avatar -->
        </div>

 

[McAtze]

Ja, du kannst kein CSS direkt ins Template schreiben. Das war von mir nur als Beipiel angedacht. Stelle mal schnell das Original wieder her.
Ich überlege mir was Eleganteres ..

 

[Lemminator]

danke *schäm*

 

[Hoffi]

Nee, nee. So geht das nicht. Offline in orange wird nicht nur mit Style Einstellungen möglich sein.

Bau ich euch morgen, ja.

 

[Hoffi]

Damit es so aussieht:

Musst du in den Stye-Eigenschaften es so einstellen:


Evtl. musst du Breite und Höhe anpassen, je nach deinen Avatar Einstellungen. 100% funktioniert leider nicht.
Falls du nicht den Standard Style hast, evtl. auch die Breite und den Radius.

 

[Hoffi]

Oh, ich merke gerade das man dann nicht mehr das Profil öffnen kann, weil der Indikator "vor" dem Avatar liegt.

 

[McAtze]

@Hoffi die Problematik hatte ich gestern auch. Eventuell den Marker als ausgefülltes Quadrat hinter das Avatar und dann überstehen lassen.

 

[Hoffi]

Dann müssen wir doch ans Template ran. Das ist natürlich doof.

 

[McAtze]

Ich habe mal was probiert. Das Ergebnis gefällt mir persönlich, der Aufwand eher (noch) nicht ..

 

[Maestro2k5]

Nice.