Modern Shoutbox Pro kompakter gestalten

  • Affected Version
    WoltLab Suite 5.4

    Gibt es (gibt es sicherlich, solange man damit gegen keine Naturgesetze verstößt ... ;) ) eine Möglichkeit die Einträge in der Modern Shoutbox Pro etwas kompakter zu gestalten?


    Ich habe unsere Community nun von 4.1 auf 5.4 migriert. Hat alles soweit geklappt. Bis auf klassische kleine Dinge, wie noch die ein oder andere farbliche Anpassung, sowie die Sortierung und Anordnung der Boxen auf den Seiten, ist vieles bereits fertig. Mich stört allerdings der Platzverbrauch den neue Beiträge in der Shoutbox benötigen.


    Zum Vergleich - so hat es bisher unter 4.1 mit der Modern Shoutbox ausgesehen (Einstellung in den Optionen, Höhe: 200):


    So sieht es jetzt unter 5.4 mit der Modern Shoutbox Pro aus (Einstellung in den Optionen, Höhe: 250):


    Obwohl die neue Shoutbox in den Einstellungen größer eingestellt ist, als die alte, sieht man in der "neuen" Shoutbox ohne zu scrollen so gerade mal drei Einträge, während man in der "alten", sogar kleiner eingestellten Shoutbox, ohne zu scrollen fast komplette 5 Nachrichten sehen konnte.


    Ich möchte die Einträge daher gerne etwas kompakter gestalten. So könnte die Uhrzeit z.B. wie in der alten Shoutbox wieder direkt neben den Username, anstatt unter der Nachricht in einer eigenen Zeile. Klar, sieht dann nicht mehr so aus wie WhatsApp oder Telegram. Aber für mich ist hier die Funktionabilität und die Möglichkeit mehrere Einträge auf einen Schlag sehen zu können, ohne die Box übermäßig groß machen zu müssen, wichtiger. Und der Abstand zwischen den Nachrichten-Bubbles könnte man vielleicht auch auf 1 bis 2 Pixel reduzieren. Und der Abstand zwischen der Box-Überschrift "Modern Shoutbox Pro" und dem eigentlichen Contenbereich der Shoutbox, den könnte man auch noch verkleinern auf vielleicht 3 bis 4 Pixel.


    Kann mir jemand sagen, ob das ohne Eingriff in die Templates mit CSS möglich ist? Oder wenn nicht, in welchen Templates ich genau nachschauen muss um das zu ändern?


    Schon mal danke im Voraus.

    Erst wenn der letzte Programmierer eingesperrt und die letzte Idee patentiert ist, werdet ihr merken, dass Anwälte nicht programmieren können.

  • Du kannst doch zwischen "Klassichem Design" und "Modernen Design" wählen.

    Guter Punkt ... allerdings ist das "klassische" Design nicht tatsächlich das Design wie in der alten Box. Die Texte werden halt ohne Bubbles dargestellt. Allerdings sind die Abstände zwischen den Beiträgen so groß, dass auch im klassischen Design gerade mal drei Beiträge bei einer Höhe von 250 angezeigt werden:


    Auch hier müsste ich die Abstände zwischen den Beiträgen verringen können. Und der Abstand der Box-Überschrift ist weiterhin sehr groß.

    Erst wenn der letzte Programmierer eingesperrt und die letzte Idee patentiert ist, werdet ihr merken, dass Anwälte nicht programmieren können.

  • Ich hatte nach der Empfehlung von oben, den Entwickler zu kontaktieren, meine Frage auch in den Kommentaren zum Plugin gepostet. Dort hat mir der Entwickler (Darkwood) inzwischen geantwortet:

    -> https://pluginstore.woltlab.co…ro/#comments/comment45610


    Mit diesem CSS wandert die Uhrzeit nach oben:

    Code
    .shoutbox.modernDesign .shoutboxEntry .shoutboxMessage .shoutboxEntryTime {
     bottom: auto;
     top: 7px;
     right: 30px;
    }
    
    .shoutbox.modernDesign .shoutboxEntry .shoutboxMessage .containerContent {
     margin-bottom: 0;
    }

    Das betrifft natürlich das moderne Design.

    Erst wenn der letzte Programmierer eingesperrt und die letzte Idee patentiert ist, werdet ihr merken, dass Anwälte nicht programmieren können.

  • Und da man seine Ergebnisse ja auch teilen soll, damit ggf. noch andere davon partizipieren können ... meine Shoutbox sieht jetzt so aus:



    Damit habe ich nun immerhin einen Beitrag mehr (4 anstatt 3), welchen man sofort sehen kann.


    Geschafft habe ich das mit diesen CSS-Einstellungen:

    Und wer das Ganze mal in Natura sehen will - der kann es sich auf unserer Seite antun:

    [BR]-Portal - Die Heimat des [BR]-Bewaffnete Rentner-Clans

    Erst wenn der letzte Programmierer eingesperrt und die letzte Idee patentiert ist, werdet ihr merken, dass Anwälte nicht programmieren können.

  • Ich habe auf einer meiner betreuten Seiten die Shoutbox ebenfalls angepasst um sie attraktiver zu gestalten. Darunter auch das die Eingabeleiste zwar unten ist, die neusten Nachrichten aber oben stehen.



    Der Stil der Shoutbox kam und kommt sehr gut an. Eventuell ist das für dich ein wenig Inspiration.

  • Hallo Zusammen,


    habt ihr über CSS auch die Länge der Box anpassen können wenn ja würdet ihr mir vielleicht den CSS code dafür mal posten bei mir ist der Chat über die Ganze breite der Seite und das finde ich etwas zu groß

  • Hallo Zusammen,


    habt ihr über CSS auch die Länge der Box anpassen können wenn ja würdet ihr mir vielleicht den CSS code dafür mal posten bei mir ist der Chat über die Ganze breite der Seite und das finde ich etwas zu groß

    Jenachdem wo du die Shoutbox platziert hast. Wenn sie z.B oben über dem Inhaltsbereich ist liegt es am CSS für die boxesTop nicht an der Shoutbox selbst.