SLOBS Custom CSS Chat mit Stufen Nachrichten

Herzlich Willkommen auf StreamTalk.de, deiner Community rund um Twitch, Hitbox und Co.

Bei uns kannst Du deine Gedanken zu Twitch, Hitbox und Co. mit anderen teilen und Dich über interessante Themen rund ums Streaming austauschen, z.B. Chatbots, Donations, Sponsoring, Overlays, etc. Erhalte Hilfe und wertvolle Tipps für den Aufbau deines Streaming Channels. Außerdem kannst du deinen Stream in einem eigenen Bereich bei uns vorstellen oder nach Partnern für gemeinsame Projekte suchen.

Wir würden uns freuen, wenn du ein Teil dieser großartigen Community wirst: Jetzt registrieren

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklärst du dich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

DIESES FORUM IST VERALTET UND NUR NOCH ZUR DATENÜBERNAHME ERREICHBAR
BITTE DIE AKTUELLE VERSION VERWENDEN: STREAMTALK.DE

  • Moin,

    ich hoffe ich finde hier jemanden der sich mit CSS auskennt, bzw HTML oder JS

    Ich versuche derzeit meinen Chat ein wenig anzupassen, leider hab ich davon wenig Ahnung und konnte im Internet nicht viel finden.

    Was ich will ist das mein Chat wie eine Treppe im Stream angezeigt wird.
    Wie herum die Treppe läuft ist mir dabei eher unwichtig.

    Erklärung:
    Immer wenn ein User eine Nachricht postet wir die letzte Nachricht nicht einfach nach oben geschoben sondern dazu noch ein wenig nach rechts oder eben nach unten links.


    Das einzige was ich gefunden habe ist wo jemand dies als ein Problem hatte und es grade haben wollte.
    Wieso es bei ihm so war, konnte ich nicht nachvollziehen. Zudem war die Treppe auch nicht immer gleich. Sondern die Stufen waren verschoben mal davor mal dahinter.

    Alles andere war nicht auf auf einen Chat bezogen udn hat mich unerfahrenen da eher noch mehr verwirrt :D


    Quellcode

    1. @import url(https://fonts.googleapis.com/css?family=Roboto:700);
    3. * {
    4. box-sizing: border-box;
    5. }
    7. html, body {
    8. height: 100%;
    9. overflow: hidden;
    10. }
    12. body {
    13. text-shadow: 0 0 1px #000, 0 0 2px #000;
    14. background: {background_color};
    15. font-family: 'Roboto';
    16. font-weight: 700;
    17. font-size: {font_size};
    18. line-height: 1.5em;
    19. color: {text_color};
    20. }
    22. #log>div {
    23. animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
    24. -webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
    25. }
    27. .colon {
    28. display: none;
    29. }
    31. #log {
    32. display: table;
    33. position: absolute;
    34. bottom: 0;
    35. left: 0;
    36. padding: 0 10px 10px;
    37. width: 100%;
    38. table-layout: fixed;
    39. }
    43. #log>div.deleted {
    44. visibility: hidden;
    45. }
    47. #log .emote {
    48. background-repeat: no-repeat;
    49. background-position: center;
    50. background-size: contain;
    51. padding: 0.4em 0.2em;
    52. position: relative;
    53. }
    55. #log .emote img {
    56. display: inline-block;
    57. height: 1em;
    58. opacity: 0;
    59. }
    61. #log .message,#log .meta {
    62. vertical-align: top;
    63. display: table-cell;
    64. padding-left: 0.2em;
    65. }
    67. #log .meta {
    68. width: 35%;
    69. padding-right: 0.5em;
    70. white-space: nowrap;
    71. text-overflow: ellipsis;
    72. overflow: hidden;
    73. }
    75. #log .message {
    76. word-wrap: break-word;
    77. width: 65%;
    78. }
    80. .badge {
    81. display: inline-block;
    82. margin-right: 0.2em;
    83. position: relative;
    84. height: 1em;
    85. vertical-align: middle;
    86. top: -0.1em;
    87. }
    89. .name {
    90. margin-left: 0em;
    91. }
    Alles anzeigen


    Fals jemand da eine Idee hat, bin ich sehr dankbar. :D
    Du suchst ein neues Logo für deinen Stream?
    Dann schau mal hier vorbei. :]
    Fiverr - Minimalist and Modern Logo