[3.1.10] Darstellungsprobleme prosilver responsive

[ostalbbulli]

Habe es in der Common.Css eingefügt. Ganz am Ende. Hochgeladen wieder ins Testforum.

Gruß, Robert

[ostalbbulli]

Ein User war so nett und hat Screenshots gemacht. Jetzt schaut es so aus:
[ externes Bild ]
Er schreibt dazu:
"Logo weg und Bild weg, also etsprechend nach oben gerutscht.
Die Kästen mit den Menüs machen es aber noch kleiner, so dass nun bald garkein Platz mehr für Nachrichten und Bilder bleibt. Und auch beim Scrollen wird es nicht besser, eher schlechter."

Ein Screenshot aus einem anderen Forum:
[ externes Bild ]

Gut, da war jetzt nicht das Portal aktiviert, aber das Logo noch zu sehen.

Gruß, Robert

[Kirk]

In deinem Testboard wir das Logo ab 1090px doch ausgeblendet, dadurch wird auch die headerbar von der Höhe her smäler.

Die Kästen mit den Menüs machen es aber noch kleiner, so dass nun bald garkein Platz mehr für Nachrichten und Bilder bleibt. Und auch beim Scrollen wird es nicht besser, eher schlechter.

Erkläre das mal ein bischen genauer.

[ostalbbulli]

Der User der das mit dem Ipad anschaute hatte mir das geschrieben. Im Testforum war das Portal als Startseite. Mit den Kästen meinte er die Boxen im Portal.
Dass man auf dem IPad und dergleichen kein Logo mehr hat ist schade. Gibt es eine andere Möglichkeit? Was müsste ich ändern um das Logo doch zu sehen?
Ach ja, wie ändere ich die Box im Beitrag wo das Avatar und die Kontaktdaten drin sind? Kann ich die etwas kleiner machen? Dann würden die Beiträge vielleicht etwas breiter dafür nicht so hoch werden.
Oder gibt es einen Code wo der Prosilver sich automatisch auf die Browser einstellt? Keine Ahnung wie ich es ausdrücken soll. Mein erstes Forum war ein Sitboard php2 Forum, Damals machte man sich keinen Kopf um Ipads und den ganzen Kleinkram wie Smartphone.

Robert

[Melmac]

Hi,

die Breite der beiden Sidebars der Protal-Extension müssten sich, wenn ich mich noch richtig erinnere, im ACP anpassen lassen (da kann Dir Kirk aber genaueres dazu sagen).

Oder gibt es einen Code wo der Prosilver sich automatisch auf die Browser einstellt?

prosilver ist bereits responsiv und passt sich den Displaygrößen der Devices an - kann es sein, dass Du damit etwas anderes meinst: die angezeigte maximale Breite des Boards ändern?

Bei prosilver ist der Wert für die max. Breite auf 1152px festgelegt, was sich aber ändern lässt.
Entweder installierst Du diese Extemsion => Max-width switch, mit der jeder Benutzer die Breitenbegrenzung von prosilver aufheben kann (was aber nicht das Problem mit dem Logo lösen wird) oder Du passt das CSS entsprechend Deinen Wünschen an (auch hier bleibt das Logo-Problem bestehen):
öffne /styles/prosilver/theme/common.css
suche

Code: Alles auswählen

#wrap {
	border: 1px solid transparent;
	border-radius: 8px;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
}

und ändere den Wert für max-width entsprechend Deinen Vorstellungen ab.

Was müsste ich ändern um das Logo doch zu sehen?

Hierfür müsstest Du im CSS die Formatierungsanweisungen ändern, die für das Ausblenden des Logos bei bestimmten Auflösungen verantwortlich sind.
Der Knackpunkt an der Sache ist aber: mit CSS-Anpassungen alleine ist es nicht getan, soll sich die Anzeigegröße des Logos/Headers auch an die Displayauflösungen (gerade dieder kleineren) automatisch anpassen - das Problem der zerrissenen Darstellung besteht ja jetzt schon.
Dazu müsste zusätzlich auch noch so einiges am HTML der overall_header.html geändert werden - das ist zwar mit Sicherheit machbar, aber nicht ganz so trivial.

[ostalbbulli]

Nein ich meine nicht im Portal. Ich meine in der Forenansicht diesen Bereich:
[ externes Bild ]
Kann ich den etwas schmaler machen?
Ich habe das Logo jetzt mal kleiner gemacht, kann von euch mal einer schauen wie das jetzt ausschaut auf so nem Tablet?
http://www.africa-twin.net
Ich danke euch echt.

Robert

[Melmac]

Du hast in einem Beitrag zwei Bereiche: das Mini-Profil rechts neben dem Text (das Element, dessen Breite Du ändern möchtest) und den eigentliche Textbereich.
Bei beiden wird die jeweilige Breite in Prozent der Gesamtbreite definiert; deren effektive angezeigte Breite in Pixeln variert also mit der jeweiligen Auflösung.
Du kannst die Prozentwerte neu verteilen, aber dem Mini-Profil eine fixe oder maximale Breite (in Pixeln) zuzuweisen, während sich der Textbereich dann automatisch anpasst ... dürfte mit CSS alleine aber zumindest problematisch werden (ich lasse mich da aber gerne korrigieren ).

Ich habe das Logo jetzt mal kleiner gemacht, kann von euch mal einer schauen wie das jetzt ausschaut auf so nem Tablet?

Das Logo zu verkleinern verhindert schonmal, dass das Layout in der Breite zerrissen wird - aber so wirklich gut sieht es leider immer noch nicht aus:

600x800 (oder kleiner):
[ externes Bild ]

800 x 600:
[ externes Bild ]

1024x768:
[ externes Bild ]

1366x768:
[ externes Bild ]

Im Header befinden sich mehrere Elemente, deren Formatierung für die verschiedenen Darstellungsmodi jeweils neu aufeinander abgestimmt werden müssen.
Vielleicht hat hier jemand "auf die Schnelle" einen entsprechenden Lösungsansatz für Dich parat - momentan ist bei mir etwas Land unter und ich weiß nicht, wann ich dies die Tage mal in Ruhe durchspielen kann.
Gut möglich, dass sich dies dennoch nicht durch CSS-Anpassungen alleine so lösen lässt, wie es von Dir gewünscht ist.

[ostalbbulli]

"Du hast in einem Beitrag zwei Bereiche: das Mini-Profil rechts neben dem Text (das Element, dessen Breite Du ändern möchtest) und den eigentliche Textbereich.
Bei beiden wird die jeweilige Breite in Prozent der Gesamtbreite definiert; deren effektive angezeigte Breite in Pixeln variert also mit der jeweiligen Auflösung.
Du kannst die Prozentwerte neu verteilen,"


Und wo kann ich die Werte ändern? Mir geht es nur darum dass das Miniprofil nicht so breit ist. Sieht irgendwie auch doof aus.

Robert

[Kirk]

Öffne die content.css
Finde:

Code: Alles auswählen

.postprofile {
	margin: 5px 0 10px 0;
	min-height: 80px;
	border: 1px solid transparent;
	border-width: 0 0 0 1px;
	width: 22%;
	float: right;
	display: inline;
}

Ändere den Wert bei width: 22%; nach deinen Wünschen.
Finde:

Code: Alles auswählen

.postbody {
    float: left;
    line-height: 1.48em;
    padding: 0;
    position: relative;
    width: 77%;
}

Vergrößere den Wert bei with: 77% um die Anzahl die du bei .postprofile { width: 22%; verkleinert hast.

Die Breite der linken und rechten Portal Spalten ändert man im ACP/Erweiterungen/Portal/Allgemeine Einstellungen man kann dort für links und rechts auch unterschiedliche Breiten eingeben.
Bedenke dabei auch wenn du linken und rechten Portal Spalten größer machst, verkleinert sich die mittleren Spalten entsprechend.

[Melmac]

@Robert

Kleiner Tipp, damit im Vorfeld die Auswirkungen von Styleanpassungen auf die Darstellung unter den diversen Auflösungen leichter geprüft werden können: es gibt Browsererweiterungen hierfür.
Ein Beispiel hierfür wäre das Web Developer Paket - das gibts für Firefox, Chrome und Opera.