XF2.0 Onlinestatus animiert und besser sichtbar

[Tamara-Jasmin]

Wer das "Dreieck" im Avatar nicht mag (schaut aus wie eine Todesanzeige ), und eher auf den Punkt wie in "Skype" steht, kann die Optik etwas verfeinern.

Folgender Code gilt für XF2, die in die extras.css eingetragen wird:

Hier gehts zur Ressource => XF2.0 - Animierter Onlinestatus

Top/Left/Border - px müssen evtl. leicht angepasst werden, da ich meine Bereiche grundsätzlich etwas anders gestaltet habe als die "Norm".
Wer den Punkt rechts haben möchte, gibt statt "left" ein "right" ein, und fügt darunter ein zusätliches "left:auto" hinzu um den noch vorhandenen Originalwert "left: -1px" zu überschreiben.

Wer das auch für XF1 haben möchte - der Code lautet:
(ungetestet, da kein XF1 zur Hand, nur teils in diesem Forum probiert)

Hier gehts zur Ressource => XF2.0 - Animierter Onlinestatus

Liebe Grüsse:
Tammy

 

[Tamara-Jasmin]

Und wer es nicht so einfarbig mag, kann den @keyframe block gegen diesen austauschen.
Schaut dann nicht so "erdr¨ckend" aus wenn sich der Punkt vergrössert, weil das grün etwas heller wird :

@keyframes onlinestatus {
    0% { transform: scale(1, 1); border: 8px solid #7fb900;}
    50% { transform: scale(1.4, 1.4); border: 8px solid #9af644;}
   100% { transform: scale(1, 1); border: 8px solid #7fb900;}               
}

Liebe Grüsse:
Tammy

 

[otto]

Screenshots?

 

[Tamara-Jasmin]

Ist schlecht mit einer Animation Deshalb hab ich das kleine 100kb grosse AVI als Zip angehängt. Auch das ging leider nur als Zip...

Evtl. erweitere ich das sogar ein wenig (z.B. Wellenf¨rmig mit auslaufendem opacity) wenn generell interesse an sowas besteht.

LG: Tammy

Nachtrag:
Trotzdem hier nochmal mit der Farbänderung der Anhang (AVI File)

 

[McAtze]

@Tamara-Jasmin Versuche es doch mal mit einem GIF. Und dann würde ich dich bitten wenn du solche Tipps & Tricks erstellst, diese als Ressource (Beispiel) einzustellen. Dafür sind diese da und es ist übersichtlicher.

 

[otto]

Oder einfach ein Youtube oder Vimeo Account und dann hier einbinden. Aber ein Screenshot, wo es grad aufblinkt häts auch schon getan.

 

[Tamara-Jasmin]

dann würde ich dich bitten wenn du solche Tipps & Tricks erstellst, diese als Ressource (Beispiel) einzustellen.

Das war sogar mein erster Weg, aber ich habe dort keine Schreibrechte...

LG:
Tammy

 

[Alluidh]

Das war sogar mein erster Weg, aber ich habe dort keine Schreibrechte...

Doch, hast du, wenn du eine neue Ressouce erstellst.

 

[Laser1508]

Danke tamara

 

[Tamara-Jasmin]

Hallo @Laser1508,

bitte verwende nicht mehr obigen Code für die 2.x. Ich wusste damals nicht wie das hier im Forum läuft.
Gehe bitte zur Ressource: XF2.0 - Animierter Onlinestatus

Da sind auch einige Änderungen vorgenommen worden.


LG: Tammy