Layout der Blöcke in "Aktuelle Beiträge" (recent)

[Heiko]

Deine Portal Version: 2.1.0
Typ Deines phpBB Forums: Standard phpBB3
MODs installiert: Ja
Dein Wissensstand: Einsteiger

Was hast Du gemacht, bevor das Problem aufgetreten ist?
phpbb 3.0.14 plus das damals aktuelle Portal, Layout war okay
nach dem Update auf phpbb3.2.0 und Portal 2.1.0 (dank der Anleitung von Kirk für das neue Portal) läuft alles wie es soll.
Ausser dass die Darstellung etwas zu linkslastig ist. Siehe Bild unten.

Was hast Du bereits versucht um das Problem zu lösen?
im Internet und in diesem Forum hier gesucht
original datei noch mal hochgeladen
versucht, die news_compact_center.html anzupassen, hat nicht funktioniert.

Fehlerbeschreibung und Nachricht
Hallo,

also irgendwie ist mir die Anzeige verrutscht. Die Spalte von class lastpost ist viel zu groß und die von class posts sollte viel größer sein.
Wo kann ich das abändern? Für die Postings soll mehr Platz da sein und die user der letzten Postings weiter rechts erscheinen.

Bild:
https://www.dropbox.com/s/ztwpc284gzxhl ... 2.jpg?dl=0

Würde mich sehr freuen, wenn mir jemand weiter helfen kann.
Viele Grüße
Heiko

[Kirk]

Hallo
Probier doch mal folgendes,
Öffne: root/ext/board3/portal/styles/prosilver/theme/portal.css
Finde und lösche das hier:

Code: Select all

ul.topiclist dt .list-inner {
	margin-right: 60%;
}

ul.topiclist dt {
	margin-right: -60%;
}

ul.responsive-portal-news dd:last-of-type, ul.responsive-portal-announcements dd:last-of-type,
#portal-forumlist ul dd:last-of-type {
	width: 25%;
}

Öffne: root/ext/board3/portal/styles/prosilver/theme/portal_responsive.css
Finde:

Code: Select all

@media only screen and (max-width: 895px), only screen and (max-device-width: 895px)
{

Danach einfügen:

Code: Select all

ul.topiclist dt {
	margin-right: -40%;
}

[Heiko]

Das ist Super !!!! DANKE !!! das hat geholfen,

bin happy!
Viele Grüße
Heiko

[Heiko]

ups, eine kurze Frage noch: können die Spalten "Antworten" und "Zugriffe" ausgeblendet werden bevor eine screen weite von 1040 erreicht ist?

weil dann schaut es kurz vorm umspringen so aus:
https://www.dropbox.com/s/7ri7qcuhlq5o1 ... 3.jpg?dl=0

screen and (max-width: 1040px) in portal_responsive.css zu ändern hat nix gebracht - ich dachte ich erhöhe den Wert ein wenig, dann springt das Design eher um.
Bei einer einfachen Website geht das, da blick ich das, aber das hier ist doch etwas komplizierter .....

Viele Grüße
Heiko

[Kirk]

Du hast schon richtig gelegen, aber wenn du nur die Spalten "Antworten" und "Zugriffe" eher ausblenden möchtest, täte ich es so machen,
Finde und lösche in der portal_responsive.css das hier:

Code: Select all

	.responsive-portal-news dd.posts, .responsive-portal-news dd.views {
		display: none !important;
	}

Finde:

Code: Select all

@media only screen and (max-width: 1040px), only screen and (max-device-width: 1040px)
{

Davor einfügen:

Code: Select all

@media only screen and (max-width: 1070px), only screen and (max-device-width: 1070px)
{
	.responsive-portal-news dd.posts, .responsive-portal-news dd.views {
		display: none !important;
	}
}

Diese 1070px kannst du ja nach deinen Wünschen anpassen.

[Heiko]

Danke für die Antwort. Das funktioniert auch.

Wenn die Blöcke "Antworten" und "Zugriffe" ausgeblendet werden, bleibt der erste Block: "Aktuelle Beiträge" klein und "letzter Beitrag" rutscht nach links.
Der erste Block ist weiterhin gestaucht. Ich hab viel ausprobiert mit den css Variablen und ich habe ein grundlegendes Verständnis für css, dachte ich, aber eine Aufteilung der Blöcke wie in etwa links 60% und rechts 40% hab ich nicht hin bekommen.
Bei der kleineren Bildschirm-aufteilung (ab 895px) stimmt dann auch wieder alles; Alles ist gut leserlich.

Hast Du noch eine Idee für die Zwischengröße?


rein kosmetisch hab ich noch in den Zwischenbereich die folgenden Zeilen eingefügt, damit die Bezeichnungen Antworten, Zugriffe auch mit ausgeblendet werden:
.topiclist .topics, .topiclist .posts { display: none !important; }

dd.responsive-portal-news { display: none !important; }

das passt soweit.

Viele Grüße
Heiko

[cpg]

Moin,

darf ich mich mit einer Styling-Frage hier einklinken?
Ich denke, das Thema ist verwandt - aber es handelt sich um den Kalender.

Wenn ich die Breite sehr zusammenschiebe oder mit dem Smartphone hochkant auf das Portal gehe, wird nur ein "bevorstehendes Ereignis" korrekt angezeigt.
Die anderen eingetragenen Ereignisse werden nicht angezeigt oder nur die Anfangsbuchstaben.



Falls mein Beitrag hier unpassend ist, stelle ich ihn neu als eigenes Thema ein.

Gruß
cpg

[Kirk]

Ist keine große Sache
Öffne die calendar_side.html
Finde 2x:

Code: Select all

<dl class="icon">

Ersetzen 2x mit:

Code: Select all

<dl class="row-item">

[cpg]

Guten Abend,

... und danke, funktioniert!

Gruß und guten Start ins Wochenende
cpg

[Heiko]

Hallo,

also ich hab jetzt nach einigen Versuchen eine Möglichkeit gefunden, dass die "Letzten Beiträge" im Portal vom Layout so angezeigt werden, dass sie gut leserlich sind und die mittlere Tabelle/ sorry: Blöcke nicht auseinander oder ineinander gehen, wenn man den Browser verkleinert.
Dank Kirk hab ich die css Befehle gefunden, mit welchen ich die zu arg gestauchten Blöcke ausblenden oder ausrichten kann.

Ab einer gewissen Größe (bei verkleinerung des Browsers) werden die Blöcke views und zugriffe ausgeblendet, später die letzten Poster,
dann werden ja die Portal elemente nach unten verschoben, da ist wieder genug Platz um die Threadbeiträge und die letzten Poster anzuzeigen und ab einer gewissen größe werden nur die letzten Threads/posts angezeigt.

Ich setz hier den von mir laienhaft veränderten Code der Datei: portal_responsive.css rein.
Zusätzlich ist die von Kirk empfohlene Modifikation in seinem ersten Antwortposting hier (oben) in diesem Thread bzgl. der portal.css bei mir aktiv.

Code: Select all

/*modifikation  views und Zugriffe werden eher ausgeblendet weil sonst die Tabelle in der Mitte zu arg gestaucht wird
die max Forenbreite beträgt: .wrap { max-width: 1390px; }  */

@media only screen and (max-width: 1170px), only screen and (max-device-width: 1170px)
{
   .responsive-portal-news dd.posts, .responsive-portal-news dd.views {
      display: none !important;
   }
   

	.topiclist .topics, .topiclist .posts { display: none !important; }
	
	dd.responsive-portal-news { display: none !important; }
   
  
	
	.responsive-portal-news dt .list-inner, .responsive-portal-announcements dt .list-inner { margin-right: 40% !important; }

	ul.topiclist dt {
	margin-right: -40%;
	} 
}



/* modifikation der mittlere Bereich wird so klein, dass nur noch die Thread-Links (bei mir: lastposts) angezeigt werden, weil zwei Blöcke zu sehr gestaucht werden.
  (hab die news_compact_center.html so angepasst, dass die Hauptlinks zum letzten noch nicht gelesenen Post führen. - war ein Wunsch der User.
  zum Threadbeginn hab ich einen extra kleinen Link eingefügt.)*/

@media only screen and (max-width: 1080px), only screen and (max-device-width: 1080px)
{

.responsive-portal-news dd.lastpost, .responsive-portal-announcements dd.lastpost { display: none !important; }
	.responsive-portal-news dt .list-inner, .responsive-portal-announcements dt .list-inner { margin-right: 0 !important; }
	.responsive-portal-news dt, .responsive-portal-announcements dt { width: 100% !important; }
	dt#n, dt#a { width: 100% !important; }

}

/* original code

@media only screen and (max-width: 1040px), only screen and (max-device-width: 1040px)

{
	.responsive-portal-announcements dd.views { display: none !important; }
	dd.responsive-portal-announcements { display: none !important; }

	.responsive-portal-announcements dd.posts, .responsive-portal-announcements dd.views {
		display: none !important;
	}

	dt#a { width: 125% !important; }
	.responsive-portal-announcements dt { width: 130% !important; }
	dd.responsive-portal-news { display: none !important; }

	.responsive-portal-news dd.posts, .responsive-portal-news dd.views {
	display: none !important;
	} 

	.responsive-portal-news dt { width: 130% !important; }
	dt#n { width: 125% !important; }
	.topiclist .topics, .topiclist .posts { display: none !important; }
	#portal-forumlist dl.icon dt { width: 125% !important; }
}
*/


@media only screen and (max-width: 895px), only screen and (max-device-width: 895px)
{
	
	/*modifikation: weil die Portal elemente links und rechts ausgeblendet/verschoben werden, bleibt mittig genug Platz um die 
	User der Letzten Posts wieder einzublenden*/
	
	.responsive-portal-news dd.lastpost, .responsive-portal-announcements dd.lastpost { display: block !important; }
	.responsive-portal-news dt .list-inner, .responsive-portal-announcements dt .list-inner { margin-right: 40% !important; }
	
	ul.topiclist dt {
	margin-right: -40%;
	}  
	
	/* modifizierung ende */
	
	
	div#portal-right {
		width: 49% !important;
		margin-left: 1% !important;
	}

	div#portal-left {
		width: 50% !important;
		margin-left: 0 !important;
	}

	.rtl div#portal-right {
		margin-left: 0 !important;
		margin-right: 1% !important;
	}

	.rtl div#portal-left {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	div#portal-center {
		margin-right: 0 !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
	.responsive-portal-news dt { width: 100% !important; }
	.responsive-portal-announcements dt { width: 100% !important; }
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
	.responsive-portal-news dd.lastpost, .responsive-portal-announcements dd.lastpost { display: none !important; }
	.responsive-portal-news dt .list-inner, .responsive-portal-announcements dt .list-inner { margin-right: 0 !important; }
	.responsive-portal-news dt, .responsive-portal-announcements dt { width: 100% !important; }
	dt#n, dt#a { width: 100% !important; }

	.portal-responsive-poll .resultbar {
		display: none !important;
	}

	.portal-responsive-poll dt { width: 45% !important; }
	.portal-responsive-poll dd {
		width: 45% !important;
		float: right !important;
	}

	#portal-forumlist dl.icon dt { width: 100% !important; }
	#portal-left ul.topiclist dd, #portal-right ul.topiclist dd { display: block !important; }
	.portal-responsive-show { display: block !important; }
	.portal-responsive-hide { display: none !important; }
	#portal-body { padding-top: 0 !important; }
	#portal-right > .portal-clear, #portal-body > .portal-clear, #portal-left > .portal-clear,
	#portal-center > .portal-clear, #portal-login-box .portal-clear { display: none !important; }
	#portal-right { width: 50% !important; }
	#portal-left { width: 50% !important; }
	#portal-center {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
	}
}

Vielen Dank noch mal @Kirk für die Zeit und die Hilfe.
Viele Grüße
Heiko