XF2.0 Onlinestatus animiert und besser sichtbar

Dieses Thema im Forum "Style und Design" wurde erstellt von Tamara-Jasmin, 27. Sep. 2018.

Schlagworte:
  1. Tamara-Jasmin

    Tamara-Jasmin Aktives Mitglied Lizenzinhaber

    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:

    Code (Text):

    /* onlinestatus */
    @keyframes onlinestatus {
       0% { transform: scale(1, 1); }
        50% { transform: scale(1.4, 1.4); }
       100% { transform: scale(1, 1); }          
    }
    .message-avatar-wrapper .message-avatar-online {
        top: -5px;
        left: -5px;
        border: 8px solid #7fb900;
        border-radius: 50%;
    animation: onlinestatus 4s infinite;
    }
     
    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)

    Code (Text):

    /* onlinestatus */
    @keyframes onlinestatus {
       0% { transform: scale(1, 1); }
        50% { transform: scale(1.4, 1.4); }
       100% { transform: scale(1, 1); }            
    }
    .messageUserBlock div.avatarHolder .onlineMarker {
        top: 5px;
        left: 5px;
        border: 7px solid rgb(127, 185, 0);
        border-radius: 50%;
    animation: onlinestatus 4s infinite;
    }

     
    Liebe Grüsse:
    Tammy
     

    Anhänge:

    Zuletzt bearbeitet: 28. Sep. 2018
  2. Tamara-Jasmin

    Tamara-Jasmin Aktives Mitglied Lizenzinhaber

    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 (Text):
    @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
     
  3. otto

    otto Bekanntes Mitglied Lizenzinhaber

  4. Tamara-Jasmin

    Tamara-Jasmin Aktives Mitglied Lizenzinhaber

    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:

    Zuletzt bearbeitet: 28. Sep. 2018
  5. McAtze

    McAtze Innendienst Lizenzinhaber

    @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 gefällt das.
  6. otto

    otto Bekanntes Mitglied Lizenzinhaber

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

    Tamara-Jasmin Aktives Mitglied Lizenzinhaber

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

    LG:
    Tammy
     
  8. Alluidh

    Alluidh Übersetzer Lizenzinhaber

    Doch, hast du, wenn du eine neue Ressouce erstellst.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden