XF2.0 Onlinestatus animiert und besser sichtbar

Tamara-Jasmin

Bekanntes Mitglied
Lizenzinhaber
Registriert
30. Mai 2018
Beiträge
593
Punkte
88
XF Version
  1. 2.2.10 PL1
XF Instanz
Hosting
PHP-Version
8.9
MySQL/MariaDB
8.033
Provider/Hoster
Artfiles.de
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
 

Anhänge

  • ASR_02 27-Sep-18 23.37.avi.zip
    94,3 KB · Aufrufe: 8
Zuletzt bearbeitet von einem Moderator:
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 :


Code:
@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
 
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)
 

Anhänge

  • ASR_01 28-Sep-18 12.13.avi.zip
    107,1 KB · Aufrufe: 13
Zuletzt bearbeitet:
@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.
 
Oder einfach ein Youtube oder Vimeo Account und dann hier einbinden. Aber ein Screenshot, wo es grad aufblinkt häts auch schon getan. ;)
 
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
 
Zurück
Oben