Dashboard Nachrichten im Blog 2.1 zweispaltig darstellen

hamburger · 17. April 2015

Vielen Dank, @Cr@@gle für diesen Tipp.

Analog zu dem folgendem Code, der im Blog für eine zweispaltige Ansicht der Blogbeiträge sorgt und auch im Blog 2.1 ansonsten gut funktioniert, benötige ich für die Dashboard-Nachrichten des Blog eine Lösung, die dort genau das selbe Verhalten ermöglicht.

Link zur Blogansicht: https://aus-suederelbe.de/blog/index.php/Blog/?
Link zu den Nachrichten auf der Dashboardseite: https://aus-suederelbe.de/

Code

/* Blogbeiträge */
/* Artikel nach links und rechts floaten */
@media screen and (min-width: 801px) {


#tplBlog .blogEntryList > li:nth-child(2n+1),
#tplEntryList .blogEntryList > li:nth-child(2n+1) {
    width:49%;
    float:left;
}


#tplBlog .blogEntryList > li:nth-child(2n+2),
#tplEntryList .blogEntryList > li:nth-child(2n+2) {
    width:49%;
    float:right;
}


/* Höhe der Aktikel einstellen und abschneiden */


#tplBlog .blogEntryList .messageBody > div:not(.messageFooter),
#tplEntryList .blogEntryList .messageBody > div:not(.messageFooter) {
    height:292px;
    overflow:hidden;
}


/* Überschrift kürzen */


#tplBlog .blogEntryList .message .messageContent .messageHeader .messageHeadline > h1,
#tplEntryList .blogEntryList .message .messageContent .messageHeader .messageHeadline > h1 {
    white-space: nowrap;
    color:@wcfLinkColor;
    font-size: 1.2rem;
}


/* Mindesthöhe Messagefooter */


#tplBlog .blogEntryList .messageFooter,
#tplEntryList .blogEntryList .messageFooter {
    min-height:30px;
}


/* Mindesthöhe Messageheader */


#tplBlog .blogEntryList .box32,
#tplEntryList .blogEntryList .box32 {
    min-height: 40px;
}
	}

Alles anzeigen

Cr@@gle · 17. April 2015

Hier für die Dashboard-Seite:

CSS

/* Dashboardbox - Blogeinträge */
@media screen and (min-width: 801px) {


	#tplDashboard .blogEntryList > li:nth-child(2n+1) {
		width:49%;
		float:left;
	}


	#tplDashboard .blogEntryList > li:nth-child(2n+2) {
		width:49%;
		float:right;
	}


	/* Höhe der Aktikel einstellen und abschneiden */


	#tplDashboard .blogEntryList .messageBody > div:not(.messageFooter) {
		height:292px;
		overflow:hidden;
	}


	/* Überschrift kürzen */


	#tplDashboard .blogEntryList .message .messageContent .messageHeader .messageHeadline > h1 {
		white-space: nowrap;
		color:@wcfLinkColor;
		font-size: 1.2rem;
	}


	/* Mindesthöhe Messagefooter */


	#tplDashboard .blogEntryList .messageFooter {
		min-height:30px;
	}


	/* Mindesthöhe Messageheader */


	#tplDashboard .blogEntryList .box32 {
		min-height: 40px;
	}
}

Alles anzeigen

Habe bewusst auf eine getrennte Code-Struktur geachtet, falls für das Dashboard doch spezifische Anpassungen nötig werden sollten.

hamburger · 17. April 2015

Danke dir sehr!

Funktioniert soweit ganz gut und wie gewünscht, habe aber noch zwei Darstellungsfehler.

- Oben Rechts die beiden Buttons "Aktivitäten der Benutzer..." ragen in die Boxen rein.
- Unten links, die Überschrift der nächsten Box rückt zu dicht ran

Könntest du dir das nochmal ansehen, bitte!?

Edit: Und es ist nichts anklickbar, Weiterlesen usw. fehlt bei Mouseover..

Cr@@gle · 17. April 2015

Habe dem Template noch ein

Code

<div class="clearfix"></div>

eingefügt.

Was meinst du mit Aktivitäten? Hast mal einen Screenshot davon? Sehe keine Aktivitäten...
Und das mit Weiterlesen... wird auch im Blog nicht angezeigt. Der Code ist auch so ausgelegt, dass er eine fixe Höhe für die Box hat und der Rest ausgeblendet wird.

hamburger · 17. April 2015

Zitat von Cr@@gle

Was meinst du mit Aktivitäten? Hast mal einen Screenshot davon? Sehe keine Aktivitäten...

Das war die Dashboardbox, die unter den Blognachrichten kam. Mit deinem Templateänderungen hat sich das aber gerade erledigt, ist wieder schick!!

Das mit dem Weiterlesen Button, da hast du recht.

Kann man den Button trotzdem wieder bei Mouseover anzeigen lassen per CSS, also in beiden Varianten, dem Blog und der Dashboardansicht?

Cr@@gle · 17. April 2015

Ich bin viel zu nett...

Habe den herkömmlichen Weiterlesen-Text entfernt und als Button neben Bearbeiten positioniert.

hamburger · 17. April 2015

Zitat von Cr@@gle

Ich bin viel zu nett...

Habe den herkömmlichen Weiterlesen-Text entfernt und als Button neben Bearbeiten positioniert

Ich weiß das sehr zu schätzen und bedaure, dass ich immer noch so doofe Fragen stellen muss
Danke nochmal! So schaut es doch wieder schick aus!

hamburger · 25. April 2015

Habe leider einen unregelmäßig auftretenden Darstellungsfehler, teils auch Browserabhängig. Während es in einem Browser richtig dargestellt wird, interpretiert ein anderer Browser es völlig anders. Siehe dazu bitte auch den Screenshot.

Ich glaube @Tom hatte zu diesem Thema irgendwo mal erwähnt, dass man der Tabelle sagen muss, zwei Boxen wären zusammen 100%. Nur wie sage ich es bloß

Könntest du mir da ein weiteres Mal helfen bitte

Cr@@gle · 25. April 2015

Wäre natürlich einfacher zu wissen, von welchem Browser die Rede ist...

Habe die Seite gerade mit Chrome, Firefox, Safari und IE betrachtet und da passt es überall.

Und hier muss man auch keiner Tabelle (die übrigens nicht vorhanden ist) was mitteilen, da keinerlei Padding im Einsatz ist. Sondern man muss schauen, warum die erste Nachricht auf deinem Bild ein paar Pixel höher ist - was ich aber bei den oben genannten Browsern nicht habe.

hamburger · 25. April 2015

Ich glaube zu Ahnen, wodran es liegen könnte. Habe mal eben die Anzahl der NAchrichten die im Dashboard angezeigt werden sollen, erhöht um mehr Kästen zu sehen.

Bei dem Artikel "Räuber flüchtet nach Juwelierraub mit Taxi..." findet bei der Nennung von Autor und Kategorie ein Zeilenumbruch statt, weil die Kategorie zu lang ist. Ab dem Zeitpunkt verschiebt sich da etwas. Sieht man im Dashboard, wenn du mal schauen machst. Ich sehe das unter Chrome.

Dashboard Nachrichten im Blog 2.1 zweispaltig darstellen

cls-design

Informationen

Demoinstallationen

Hilfe