Bin gespannt! Ergibt halt Sinn, sich an den Altmeister zu wenden.
Das ist jetzt nicht so ganz einfach da die Vorschau auch BB-Codes anzeigt.
Wie wäre das:
So ok?
Artikelbox - Herobox auch für den WoltLab Blog möglich?
-
-
Das sieht gut aus, muss ich mal selbst probieren
-
Ich gucke mal drüber, bis da hin ändere diese Zeile ab:
-webkit-line-clamp: 1;
in 3 oder 4
Danke für den Tipp Tom und 2 habe ich gestern auch mal ausprobiert. Leider aber bringt das noch nicht die gewünschte Anzeige. Egal ob ich 2, 3 oder 4 angebe, es schaut immer so aus:
Im Text ist da aber keine Leerzeile
Und die Punkte (...) werden auch nicht korrekt angezeigt. -
Ok, muss ich dann selbst noch mal testen
Das sieht gut aus, muss ich mal selbst probieren
CSS
Alles anzeigen.boxContent .messageList.messageReducedList { display: flex; flex-wrap: wrap; margin: -10px -10px; > li { margin: 10px; flex-basis: calc(33.33% - 20px); max-width: calc(33.33% - 20px); border-radius: var(--wcfBorderRadius); border: 0 solid var(--wcfContentBorderInner); padding-bottom: 0; border: 1px solid var(--wcfContentBorderInner); .message { height: 100%; } .messageReduced .messageTitle { overflow: hidden; text-overflow: ellipsis; } .messageReduced .messageTitle a { white-space: nowrap; } .messageContent { .messageHeader { order: 3; border-radius: 0 0 var(--wcfBorderRadius) var(--wcfBorderRadius); margin-top: 20px; border-top: 1px solid var(--wcfContentBorderInner); background-color: rgba(0,0,0,0); .messageHeaderMetaData > li:not(:nth-child(1)):not(:nth-child(2)) { display: none; } .messageHeaderMetaData > li:not(:nth-child(1))::after { content: ""; } } .messageBody { order: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; } .messageFooter { display: none; } } } } -
-
Kurze Info: Wer so wie ich das originale Stildesign für die Blog Artikel Box haben möchte, nur eben zweispaltig und mit kürzerem Vorschautext (so wie bei der normalen Artikel Box), der kann diesen Code verwenden:
Code
Alles anzeigen/* WoltLab Blog Artikel Box: Zweispalatig + 3 Zeilen Text als Vorschau */ #content { .boxContent .blogEntryList { display: flex; @include screen-lg { .contentItemSingleColumn { flex-basis: calc(100% / 2 - 20px); } } @include screen-sm-md { .contentItemSingleColumn { flex-basis: calc(50% - 20px); } } @include screen-xs { .contentItemSingleColumn { flex-basis: calc(100% - 20px); } } .contentItemDescription { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } } }
