Ansicht Shoutbox nach Umstellung auf WS 6.0 anders

moere22 · 26. Januar 2024

Hallo Tom

ich hatte damals für den Stil Base und Shoutbox unter WS 5.x folgenden Code von Dir bekommen, der wunderbar funktioniert hat.

Code

/* Shoutbox Layout Anpassung */
[data-box-identifier="de.darkwood-studios.wcf.shoutbox.box"] {
    
    background-color: $wcfSidebarBackground;
    
    .boxTitle {
        color: $wcfHeaderMenuLink;
        padding: 7px 0 7px 12px;
        background-color: $wcfHeaderMenuLinkBackground;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
        border-radius: 3px 3px 0 0;
        font-size: 16px;
    }
    
    .shoutbox.classicDesign .shoutboxContentFooter {
        background-color: darken($wcfSidebarBackground,5%);
        border-radius: 3px;
    }
    
    .shoutbox .shoutboxContent {
        padding: 10px;
    }
}

.shoutbox .redactor-box .redactor-layer {
    background-color: $wcfInputBackgroundActive;
    border: 0px solid $wcfInputBorder;
    border-radius: 3px;
    padding-left: 10px;
    padding-right: 10px;
}
.shoutbox .redactor-box .redactor-layer:hover,
.redactorActive .shoutbox .redactor-box .redactor-layer {
    background-color: $wcfInputBackground;
    border: 0px solid $wcfInputBorderActive;
}

Alles anzeigen

Das sah dann so hier aus

Leider funktioniert das unter 6.0 nicht mehr. Die Box sieht jetzt so hier aus:

Es fehlt also der Hintergrund, die Texteingabezeile ist komplett grau und der Text im Header ist verschwommen.
Weißt Du eventuell was sich an den Code geändert hat?

Tom · 26. Januar 2024

Nein leider nicht, ich habe aktuell keine Shoutbox im Testforum. Ich gucke mir das an.

moere22 · 26. Februar 2024

Vielleicht noch als Nachtrag.

Mir ist aufgefallen, dass sich das klassische Design vom Modernen Design im Hintergrund (grauer Hintergrund) unterscheidet. Irgend etwas läuft doch da schief
Ich spreche nicht von der Sprechblase, die ist ja klar das die beim modernen Design erscheint.

klassisch

modern

Tom · 26. Februar 2024

Ich hole mir nachher das Update dann gucke ich mal.

Tom · 26. Februar 2024

Zitat von moere22

Irgend etwas läuft doch da schief

Was genau meinst du? Ich sehe nichts das schief läuft 🤔

Standard:

Base:

Tom · 26. Februar 2024

Habs mal etwas hübsch gemacht:

CSS

[data-box-identifier="de.darkwood-studios.wcf.shoutbox.box"] {
    padding: 0 !important;
    .shoutbox .shoutboxContent {
        padding: 0 1px 0 0;
    }
    .shoutboxMessage .userMessage p {
        margin: 0;
    }
    .shoutbox .shoutboxContentFooter {
        margin: 0;
        border-top: 1px solid var(--wcfContentBorderInner);
        border-radius: 0 0 var(--wcfBorderRadius) var(--wcfBorderRadius);
        padding: 5px;
    }
    .shoutboxEntry {
        border-left: 0;
        border-right: 0;
    }
    .shoutboxEntryList > li:first-child {
        border-top-width: 0;
    }
    .shoutboxEntryList > li:last-child {
        border-bottom-width: 0;
    }
    .shoutbox .shoutboxEntryAddForm .ck.ck-editor__main > .ck-editor__editable {
        border: 1px solid var(--wcfContentBorderInner);
        border-radius: var(--wcfBorderRadius) !important;
    }
}

Alles anzeigen

moere22 · 27. Februar 2024

Danke Dir das Du dir das anschaust und dir mein Thema annimmst. Also die Box sieht mit dem Code schon besser aus... hätte da aber ncoh 2-3 Wünsche

Zitat von Tom

Was genau meinst du? Ich sehe nichts das schief läuft 🤔

Ich meinte damit, das sich die Optik zwischen Klassisch und Modern unterscheidet.
Ich finde es schöner wenn dieser graue Hintergrund vorhanden ist, der nur im modernen Design da ist und die Shoutbox damit abgrenzt.

Dann sieht man das Textfeld leider gar nicht, erst wenn man reinklickt kommt jetzt mit deinen Code ein Rahmen. (Danke dafür)
Schön wäre entweder wieder ein Mausover und Textfeld in anderer Farbe abgesetzt, oder aber das der Rahmen dauerhaft vorhanden ist, so dass man sieht wo das Textfeld ist. Es gibt leider genügend Menschen die das sonst nicht raffen

Das dritte was mir aufgefallen ist, das jetzt zwischen Box Überschirft und dem darunter liegenden eine weiße Lücke ist... Das war früher auch mit dem HIntergrund (grau gefüllt)

Und so sieht es unter 5.5 aus

Ich hoffe ich konnte das verständlich rüberbringen ...

Tom · 27. Februar 2024

Ok, alles klar, gucke ich mir an.

Damit dem Letzten Beiträgen ist strange

Tom · 7. März 2024

Ich habe mal was auf die Schnelle zusammen gebaut:

CSS

/* Modern Design */
.shoutbox.modernDesign {
    .shoutboxEntry.isOwner {
        .dropdownToggle,
        .containerHeadline a {
            color: var(--wcfStatusSuccessLink);
        }
    }
    .htmlContent p {
        margin: 0;
    }
    .shoutboxEntry .shoutboxMessage .shoutboxEntryTime {
        opacity: 1;
        bottom: 5px;
        font-weight: initial;
        font-size: 11px;
        bottom: initial;
        top: 8px;
    }
    .shoutboxEntry .shoutboxMessage {
        padding-right: 50px;
    }
    .shoutboxEntry .shoutboxMessage .shoutboxEntryDropdown {
        right: 50px;
    }
    .shoutboxEntry .shoutboxMessage .containerContent {
        margin-bottom: 0;
    }    
    .shoutboxEntryAddForm .ck.ck-editor__main > .ck-editor__editable {
        border: 1px solid var(--wcfInputBorder);
        border-radius: var(--wcfBorderRadius) !important;
        background-color: var(--wcfInputBackground);
    }
    .shoutboxActionSubmit {
        background-color: var(--wcfButtonBackground);
        color: var(--wcfButtonText) !important;
        border-radius: var(--wcfBorderRadius);
        margin-left: 5px;
        fa-icon {
            height: 100% !important;
        }
    }
}

Alles anzeigen

oder:

CSS

/* Classic Design */
[data-box-identifier="de.darkwood-studios.wcf.shoutbox.box"] {
    padding: 0 !important;
    .shoutbox .shoutboxContent {
        padding: 0 1px 0 0;
    }
    .shoutboxMessage .userMessage p {
        margin: 0;
    }    
    .shoutbox .shoutboxContentFooter {
        margin: 0;
        border-top: 1px solid var(--wcfContentBorderInner);
        border-radius: 0 0 var(--wcfBorderRadius) var(--wcfBorderRadius);
        padding: 5px;
    }
    .shoutboxEntry {
        border-left: 0;
        border-right: 0;
    }
    .shoutboxEntryList > li:first-child {
        border-top-width: 0;
    }
    .shoutboxEntryList > li:last-child {
        border-bottom-width: 0;
    }
    .shoutboxEntryAddForm .ck.ck-editor__main > .ck-editor__editable {
        border: 1px solid var(--wcfInputBorder);
        border-radius: var(--wcfBorderRadius) !important;
        background-color: var(--wcfInputBackground);
    }
    .shoutboxActionSubmit {
        background-color: var(--wcfButtonBackground);
        color: var(--wcfButtonText) !important;
        border-radius: var(--wcfBorderRadius);
        margin-left: 5px;
        fa-icon {
            height: 100% !important;
        }
    }
}

Alles anzeigen

moere22 · 7. März 2024

Zitat von Tom

Ich habe mal was auf die Schnelle zusammen gebaut:

Vielen vielen Dank für deine tolle Arbeit, das mit dem Textfeld ist definitiv so besser... Jetzt erkennt auch der letzte das Textfeld HAHA

Kleine Frage zu den Smileys: Kann man die Position auch ändern, denn unter 5.5 waren diese über die Boxbreite und nicht ganz so am Textfeld geklatscht

Zitat von Tom

Damit dem Letzten Beiträgen ist strange

Dann wäre nur noch diese kleine Lücke zwischen Boxtext und Boxtitel.

Ich denke das kommt aus dem Stil Base 6.0, da ich das mit einen anderen Stil (zB. Woltlab Suite Core, Nero) getestet habe und dort nicht da war.

Und unter Base 5.5 war es ja auch nicht vorhanden. Vielleicht haste da ja noch eine Eingebung

Ansicht Shoutbox nach Umstellung auf WS 6.0 anders

moere22 26. Januar 2024

Tom 26. Februar 2024

cls-design

Informationen

Demoinstallationen

Hilfe