Ja wie auf dem Bild zu sehen ist würde ich gerne die Anzeige zweispaltig haben.
Das passt ja soweit auch bis darauf das die Boxen in der Vorschau halt nicht identisch von der Größe sind.
Kann ich das irgendwie beeinflussen oder gab es da eine Option?
Gewollt sind sagen wir mal im Höchstfalle 4 News und diese sollten eigentlich eine fixe Höhe haben damit das halt ordentlich ausschaut.
lg Ralf
Nein, das ist so nicht möglich bzw. eingebaut im News-System.
Teste mal das so müssten die Buttons gleich hoch sein.
body[id="tpl_wcf_cms"]{
.htmlContent > :last-child, .messageBody > .messageText > :last-child, .messageSignature > div > :last-child, .redactor-layer > :last-child {
min-height: 200px;
}
}Erstmal Mercy, das ist ja schon mal ein Ansatz,
Jep die Buttons sind gleich hoch, ist ja also doch irgendwie machbar,
Gibt jetzt nur noch ein größeres Problem 
Die beiden Newsfelder haben keine Trennung in der Mitte und die Shoutbox.
Öhm weis gar nicht wie ich es beschreiben soll... ist irgendwie auch ein bissel in Mitleidenschaft gezogen. 
Teste mal das Bitte.
.box[data-box-identifier="de.wbb-elite.news.UnreadNews"] {
.htmlContent > :last-child, .messageBody > .messageText > :last-child, .messageSignature > div > :last-child, .redactor-layer > :last-child {
min-height: 200px;
}
.messageList:not(.messageReducedList) > li .message {
border-right: 1px solid rgb(210, 210, 210);
}
}Ich benutze diesen Code
.htmlContent > :last-child, .messageBody > .messageText > :last-child, .messageSignature > div > :last-child, .redactor-layer > :last-child {
min-height: 110px;
}
.messageList:not(.messageReducedList) > li .message {
border-right: 1px solid rgb(210, 210, 210);
}Danke Idefix für den Tipp
mg H.B. 
DIGGES Dankeschön @Idefix das passt nun. 
Damit die Boxen nicht so zusammenkleben...
Nur die Stile von CLS-Design:
@include screen-md-up {
.containerBoxList.doubleColumned > li {
padding: 10px !important;
}
.containerBoxList.doubleColumned .messageContent {
padding: 10px;
}
.containerBoxList.doubleColumned .messageContent .containerHeadline {
min-height: 90px;
}
.containerBoxList.doubleColumned .messageContent .messageBody.htmlContent {
min-height: 185px;
margin-top: 0;
}
}Vorher:
Nacher:
Wie konntest du dieses nur jetzt nur noch posten?
Soviel Copy & Paste bis das passt, da sitze ich ja Stunden daran bis ich das 15 mal eingefügt habe. 
Scherz beiseite ,,,, meinen Dank auch dir, das schaut jetzt ja sogar noch besser aus als nur mit der Trennlinie.
Ich hätte mich mit der Lösung oben auch schon zufrieden gegeben aber so ist es nun absolut PERFEKT!
Auch hier ein DIGGES herzliches Dankeschön! 
Soviel Copy & Paste bis das passt, da sitze ich ja Stunden daran bis ich das 15 mal eingefügt habe.
Das kommt davon wenn man zu viele von hat
Auch hier ein DIGGES herzliches Dankeschön!
Kein Problem
Hallo Mr.Stone zweispaltig passt das ja super.
Sobald man aber dreispaltig der News wählt kleben die Boxen wieder zusammen .
Hast du dazu eine Lösung für 3-spaltige News ??? 
Hallo FunnyGirl ,
wenn du mir eine Liveansicht zu Verfügung stellst,
kann ich evtl. dein Problem lösen. Ansonsten auch gerne über PN. .
Danke!
Hi Mr.Stone
Danke das du sofort helfen wolltest.
Habe die Lösung dazu wie man jetzt zwei und dreispaltige News direkt mit CSS kombinieren kann.
So sieht das dann als Dreispaltig aus :
Folgender CSS-Code nutze ich für zwei und dreispaltig
@include screen-md-up {
.containerBoxList.doubleColumned > li {
padding: 10px !important;
}
.containerBoxList.doubleColumned .messageContent {
padding: 10px;
}
.containerBoxList.doubleColumned .messageContent .containerHeadline {
min-height: 60px;
}
.containerBoxList.doubleColumned .messageContent .messageBody.htmlContent {
min-height: 135px;
margin-top: 0;
}
}
@include screen-md-up {
.containerBoxList.tripleColumned > li {
padding: 10px !important;
}
.containerBoxList.tripleColumned .messageContent {
padding: 10px;
}
.containerBoxList.tripleColumned .messageContent .containerHeadline {
min-height: 60px;
}
.containerBoxList.tripleColumned .messageContent .messageBody.htmlContent {
min-height: 135px;
margin-top: 0;
}
}Das die Höhe bei den Ungelesenen News gleichbleibt nutze ich immer die gleiche Größe der Vorschau-Bilder wie z.B. 200x200px
Dadurch entfällt ein weiterer CSS-Code.
mg H.B.
Es gibt viele Wege nach RomWenn es so bei dir passt ich doch auch gut
Ich habe das ganze bei mir mir mit margin gelöst.
Wie dir auffallen wird, stimmt der Abstand auf der rechten / linken Seite zum Content durch das padding nicht mehr.
Um den Platz so gut wie möglich zu nutzen, kann dies dann auch über margin gelöst werden
@include screen-md-up {
/* Kategorieliste */
#tpl_news_categoryList .messageList:not(.messageReducedList) > li .message,
/* Kategorie */
#tpl_news_category .messageList:not(.messageReducedList) > li .message,
/*Dashboard */
#tpl_wcf_cms .messageList:not(.messageReducedList) > li .message {
margin-right: 10px;
}
/* Newslist-Container */
.newsList.messageList.containerBoxList.tripleColumned,
.newsList.messageList.containerBoxList.doubleColumned{
margin-right: -10px;
}
}Dieser Code ist für beide Ansichten (Zwei-und Dreispaltig)
Hi Mr.Stone bei deinem Code ist etwas nicht ganz ok
Das kommt da raus beim Einbau.
Danke trotzdem dafür, aber ich lasse es so wie ich es bei mir ausgetüftelt habe.
mg H.B.
Hi Mr.Stone
So jetzt sieht es bei mir auch super aus.
Zweispaltig :
Dreispaltig:
und im Dashboard Ungelesene News :
Folgender CSS nutze ich dazu :
@include screen-md-up {
.containerBoxList.doubleColumned > li {
padding: 10px !important;
}
.containerBoxList.doubleColumned .messageContent {
padding: 10px;
}
.containerBoxList.doubleColumned .messageContent .containerHeadline {
min-height: 60px;
}
.containerBoxList.doubleColumned .messageContent .messageBody.htmlContent {
min-height: 135px;
margin-top: 0;
}
}
@include screen-md-up {
.containerBoxList.tripleColumned > li {
padding: 10px !important;
}
.containerBoxList.tripleColumned .messageContent {
padding: 10px;
}
.containerBoxList.tripleColumned .messageContent .containerHeadline {
min-height: 60px;
}
.containerBoxList.tripleColumned .messageContent .messageBody.htmlContent {
min-height: 135px;
margin-top: 0;
}
}
/* Newslist-Container */
.newsList.messageList.containerBoxList.tripleColumned,
.newsList.messageList.containerBoxList.doubleColumned{
margin-left: -10px;
}
article.news:not(.ignoredUserMessage), article.news > div > section {
margin-right: -10px;
}
.news > div.messageContent > div > div:not(.newsDateBadge) {
margin-left: -10px;
}mg
Seit 2013 entwickeln wir Plugins für die WoltLab Suite. Eines der bekanntesten Plugins von uns ist das News-System.
