Titelbild in MessageSidebar zentrieren

  • Affected Version
    WoltLab Suite 5.2

    Mir fällt auf, dass Titelbilder, die von den Benutzern hochgeladen werden, in der MessageSidebar nicht zentriert angezeigt werden. Das sieht manchmal etwas eigenartig aus.


    Beispiel Titelbilder:



    Beispiel MessageSidebar:



    Nun dachte ich mir, ich spiele etwas mit CSS, aber leider haben meine Spielereien keine Auswirkung. :/


    Das ist der normale CSS Code:

    CSS
    .messageSidebar .messageAuthorBackground {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 115px;
        background-size: cover;
    }

    Ich habe versucht, mit der Position zu experimentieren, aber es verändert sich zwar etwas, aber eben nicht das Titelbild.


    Dann habe ich es mit diesem Code probiert:

    CSS
    .messageSidebar .messageAuthorBackground {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    Aber auch das zeigt keinerlei Auswirkung. Auch ein !important am Ende jeder Zeile bringt nichts.


    Ich bin mir sicher, dass ich bezüglich der Titelbilder in der Sidebar schon mal eine Änderung eingearbeitet hatte. Finde aber nicht mehr, was genau das war.


    Hätte vielleicht jemand einen Tipp für mich?

    • Best Answer

    Versuch mal:

    CSS
    .messageSidebar .messageAuthorBackground {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 115px;
        background-size: cover;
        background-position: center;
    }

    VieCode 👀

    Wir😳leben😳auf😳einer😳Kugel😳und😳du😳wunderst😳dich😳ernsthaft😳über😳etwas😳



    🐶 x 27 ♥️ x 248

  • Oh, ich dachte hier kommt das Plugin zum Einsatz, oder ist das doch eine manuelle Einbindung?

    Wir😳leben😳auf😳einer😳Kugel😳und😳du😳wunderst😳dich😳ernsthaft😳über😳etwas😳



    🐶 x 27 ♥️ x 248

  • Nehm doch das Plugin von VieCode, oder hast du das schon drin?

    Oh, ich dachte hier kommt das Plugin zum Einsatz, oder ist das doch eine manuelle Einbindung?

    Ha, jetzt hatte ich doch tatsächlich gedacht, dass das im WSC 5.2 direkt schon integriert war. Aber nein, ich nutze natürlich das Plugin von VieCode .

    Ich war mir echt nicht mehr sicher.


    Versuch mal:

    background-position: center; passt. Ist das Bild größer, wird es zentriert eingepasst. Danke!

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!