WSC 3 - Zitatboxen in Beiträgen / Modifikation (Anleitung)

Gino Zantarelli · Apr 16th 2017

Die Darstellung von Zitaten in Beiträgen der Woltlab Suite 3 ist optisch nicht so wirklich gelungen (meiner Meinung nach), daher habe ich eine Modifikation auf CSS-Basis erstellt.

Füge folgenden Codeblock der CSS-Definition des jeweiligen Stils hinzu:

Code

/* ================================================================ Quote Modification by Gino Zantarelli */
woltlab-quote {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0px;
    padding: 10px 10px;
}
.quoteBox {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0px;
    padding: 10px 10px 10px 0px;
}
.quoteBoxIcon {
    float: left;
    margin: 0px 10px 0px 0px;
}
.quoteBoxTitle {
    color: $wcfContentText;
    border-bottom: 2px solid;
    padding-bottom: 1px;
    margin-right: 0px;
    margin-left: 80px;
    margin-bottom: 10px;
}
span.quoteBoxTitle {
    border-bottom: none;
    margin-left: 0px;
}
.quoteBoxContent {
    margin-left: 80px;
}
span.quoteBoxTitle {
    border-bottom: none;
}
.quoteBoxIcon > .quoteBoxQuoteSymbol::before {
    content: "\f10d";
    position: relative;
    font-family: FontAwesome;
    font-size: 50px;
    line-height: 50px;
    height: 50px;
    vertical-align: top;
    color: $wcfContentText;
}
.message .quoteBox > .toggleButton, .message .quoteBox.collapsed > .toggleButton,
.message.messageSidebarOrientationLeft .quoteBox > .toggleButton, .message.messageSidebarOrientationLeft .quoteBox.collapsed > .toggleButton {
    box-shadow: 0px 1px 0px $wcfContentText inset;
    border-top: 10px solid $wcfContentBackground;
    background-color: $wcfContentBackground;
    margin-top: 10px;
    margin-left: 76px;
}
.quoteBox > .toggleButton {
    font-size: 10px;
    font-style: normal;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    margin-right: 6px;
}
.messageReduced .messageBody .quoteBox > .toggleButton, .quoteBox.collapsed > .toggleButton {
    border-top: 10px solid $wcfContentBackground;
    background-color: $wcfContentBackground;
}

Display More

Das sind die optischen Unterschiede, zuerst die Standardansicht der Zitate...

Vorher:

Nachher:

Und die Ansichten bei längeren Inhalt...

Vorher:

Nachher:

Passend zur Modifikation der Zitatboxen findet man hier die Modifikation der Codeboxen: WCS 3 - Codeboxen in Beiträgen / Modifikation (Anleitung)

norse · Apr 16th 2017

Hm, Ansichtssache.

Gruß norse

rr050665 · Apr 16th 2017

Quote from norse

Hm, Ansichtssache.

Stimmt, aber halt anders. Mir z. B. gefällt es!

norse · Apr 16th 2017

Mich spricht es leider genausowenig an wie das Original. Dafür werden vermutlich viele die von mir favorisierte Form der Darstellung als altbacken ansehen.

Gruß norse

rr050665 · Apr 16th 2017

Quote from norse

Dafür werden vermutlich viele die von mir favorisierte Form der Darstellung als altbacken ansehen.

Ich denke, jeder hat seine eigene Form, die einen anspricht. Aber es als altbacken zu bezeichnen, nur weil es Dein "Stil" oder Deinen Meinung zu diesem "Stil" ist, finde ich nicht gut. Es ist und bleibt Deine Meinung, egal ob sie einem gefällt oder nicht. Und jeder sollte das auch so akzeptieren!

Fighter456 · Apr 16th 2017

rr050665 : norse hat nicht geschrieben, das er die vom Themenersteller aufgezeigte Form als altbacken ansieht. Er schrieb, dass seine favorisierte Form von anderen Personen eventuell so angesehen wird.

rr050665 · Apr 16th 2017

Quote from Fighter456

hat nicht geschrieben, das er die vom Themenersteller aufgezeigte Form als altbacken ansieht. Er schrieb, dass seine favorisierte Form von anderen Personen eventuell so angesehen wird.

Genau das meinte ich damit, vielleicht kam es falsch rüber!

norse · Apr 16th 2017

Ich glaube, so hat es rr050665 auch aufgefasst.

Gruß norse

Gino Zantarelli · Apr 16th 2017

Ich bin der Meinung das im Standard Flat Design Schatten eigentlich nicht darzustellen sind, daher auch meine Modifikation die besser zum modernen Erscheinungsbild passen.

Jeder hat seinen EIGENEN Geschmack und hat gerne die klassische Ansicht (in einer Tabelle) oder eben etwas ganz anderes - dieses soll nur eine Hilfe sein um die Zitatdarstellung aufzuhübschen, also bitte keinen Aufstand anzetteln...

norse · Apr 16th 2017

Das macht doch auch niemand. Ich weiß durchaus die vielen wertvollen Hilfestellungen in Sachen CSS zu schätzen, die Du hier im Forum einbringst und respektiere auch, dass Du Dir mit bester Absicht viel Mühe gegeben hast, die Darstellung nach Deinen Vorstellungen zu verschönern. Dennoch gefällt mir weder das Original (wie auch der gesamte Standardstil) noch die von Dir geänderte Version (da sie immer noch zu sehr an das Original erinnert). Das darf ich doch sagen, oder?

Gruß norse

BigBoss78 · Apr 16th 2017

Gino Zantarelli würdest du auch sowas in der Art für die Code Boxen hinbekommen?

Gino Zantarelli · Apr 16th 2017

Klar würde ich das... mal schauen wie ich dieses realisiere, ich poste dann wieder eine Anleitung hier im Forum & meinem Supportforum.

rr050665 · Apr 17th 2017

Quote from norse

Das darf ich doch sagen, oder?

Darfst Du norse

rr050665 · Apr 17th 2017

Quote from Gino Zantarelli

dieses soll nur eine Hilfe sein um die Zitatdarstellung aufzuhübschen, also bitte keinen Aufstand anzetteln...

Alles gut Gino Zantarelli ! Und ich finde es auch super, das Du immer wieder tolle Sachen hier ins Forum bringst!

arumpke · Jun 12th 2018

Ich hätte die Zitatbox nur gerne mit etwas dunklerem Grauton hinterlegt.

Wie lässt sich das bitte ändern? Bin schon leicht verzweifelt...

Also die gesamte Zitatbox in Dunkelgrau. Falls man das missversteht.

norse · Jun 12th 2018

CSS

.quoteBox {
    background-color: darkgrey;
}

Warum verzweifeln? Das war doch nun wirklich nicht allzu kompliziert, oder?

Gruß norse

mystery2072 · Jun 13th 2018

Quote from rr050665

Stimmt, aber halt anders. Mir z. B. gefällt es!

Mir gefällt es auch und gleich eingebaut es hab

arumpke · Jun 13th 2018

Top mit der Hintergrundfarbe.

Aber wie bekommt man es hin, dass Zitate nicht komplett kursiv geschrieben sind, sondern der Stil des originalen Beitrags übernommen wird?

Gino Zantarelli · Jun 13th 2018

Code

woltlab-quote, .quoteBox {
    font-style: normal;
}

WSC 3 - Zitatboxen in Beiträgen / Modifikation (Anleitung)

Participate now!

Share

Tags