Lesbarkeit im Forum verbessern!

[karlchen]

Na gut, nehmen wir mal an, dass Lefteous' bewußter Sabotageakt gegen die (neue) Breitenvorgabe für das bescheidene Aussehen dieses Threads verantwortlich ist.
Dann hätte das also auch vorher schon so funktioniert?!
Fragt sich daher grundsätzlich, ob man die Größe der quote und code Blocks an die Breite des Forumsbereichs binden kann, damit genau sowas nicht passiert.
Im übrigen finde ich persönlich die knapp 800 Pixel Vorgabebreite etwas dürftig. Selbst mein 10" Netbook bietet 1024 Pixel.
Schon auf dem 19" Monitor sehen die breiten grauen Streifen rechts und links ein wenig überdimensioniert aus.
Auf dem 22" Monitor wird das nicht besser werden.
Und wegen mancher Firmenseite, die überladen ist bis zum geht nicht mehr oder heißt das optimiert auf Fernsehbildschirmgrößen (?), muß ich den Firefox / PaleMoon (soviel zu den Exotenbrowsern) auf (fast) volle 22" Breite ziehen.
Und ewig hin- und herschieben, ist auch lästig, und mußte ich bisher auch nicht.
Na warten wir einfach mal ab ...

[Lefteous]

2karlchen

Na gut, nehmen wir mal an, dass Lefteous' bewußter Sabotageakt gegen die (neue) Breitenvorgabe für das bescheidene Aussehen dieses Threads verantwortlich ist.

Nein überhaupt nicht gegen die Breitenbeschränkung, die finde ich prinzipiell gut, wenn auch nicht sonderlich kreativ. Als erster Schritt aber vollkommen ausreichend!
Die langen Codezeilen sollten nur einen Fall demonstrieren, in dem die Breitenbeschränkung nicht den gewünschten Effekt hat.

Ich gebe allerdings zu, dass ich einige Interpretationen, warum dieser Thread so aussah, wirklich amüsant fand.
Ich habe den Quatsch jetzt mal weitgehend rausgelöscht, ich hatte ja meinen Spaß und es sollte jedem klar geworden sein, wie man es testen kann.

[karlchen]

Bin so nebenbei über deinen Hinweis gestolpert, dass die Forensuche so buggy ist.
Dazu kann ich mitteilen, dass sie im aktuellen phpBB Release sehr gut geworden ist.
Alleine das würde schon ein Update rechtfertigen.
Dass in 10 Jahren auch ein paar Sicherheitslücken geschlossen worden sind, nur so nebenbei.
Natürlich verliert man bei einem "großen Sprung vorwärts" über 11 Jahre einige liebevoll zurechtgebastelte eigene Hacks.
Aber mit der Begründung bleibt mein halt festgenagelt auf der Uraltversion.
In ein anderes Forum mußten erst ein paar ungebetene Gäste einbrechen, bevor der Betreiber sehr zügig zu der Erkenntnis gelangte, dass im Vergleich zu einer sicheren Forensoftware die Extrafunktionalitäten, die man sich im Laufe der Zeit gebastelt hatte, eher nachrangig waren.
Manche von den Selbstbaulösungen benötigt man auch nicht mehr, weil die phpBB Macher nicht die gesamten letzten 11 Jahre untätig haben verstreichen lassen.

[phantom]

Die Änderungen die Christian am Style subSilver.css vorgenommen hat sind nur minimal. Ich habe jetzt mal ein paar Screenshots hochgeladen, die zeigen wie das Eingangsposting von mir vor Christian Bearbeitung aussah. Wie es aktuell aussieht und wie es aussehen könnte.

Alte Ansicht:

Vollbild (1920x1080), die gesamte Breite des Bildschirms

Image: http://abload.de/img/screenshot1_1002ls04.png


Aktuelle Ansicht:

Vollbild (1920x1080), die halbe Breite des Bildschirms

Image: http://abload.de/img/screenshot3_655qsdm.png

Aktuell eingebauter CSS-Code.

Code: Select all

body {
    padding-bottom: 2em !important;
    margin: 10px auto !important;
    max-width: 65em !important;
}

Folgender CSS-Code verhindert Scherze alla Lefteous und vergrößert das Texteingabefenster ohne das Erscheinungsbild der Seite (Body) zu beeinflussen.

Code: Select all

body {
    padding-bottom: 2em;
    margin: 10px auto;
    max-width: 65em;
}
html {
   overflow-y: scroll;
}
.code {
   max-width: 65em;
   word-wrap: break-word;
}	
.gen > .post,
.genmed > textarea.post {
   min-width: 53em;
}
textarea.post {
   min-height: 25em;
}

Angepasstes Texteingabefenster

Image: http://abload.de/img/eingabefenster_65l1ix9.png


Mögliche Ansicht:

Vollbild (1920x1080), etwas breitere Ansicht.

Image: http://abload.de/img/screenshot2_75d5swd.png

Folgender CSS-Code verhindert Scherze alla Lefteous und das Texteingabefenster hat die max. Breite ohne das Erscheinungsbild der Seite (Body) zu beeinflussen, die Höhe wurde nicht geändert da diese so schon optimal aussieht.

Code: Select all

body {
    padding-bottom: 2em;
    margin: 10px auto;
    max-width: 75em;
}
html {
   overflow-y: scroll;
}
.code {
   max-width: 65em;
   word-wrap: break-word;
}	
.gen > .post,
.genmed > textarea.post {
   min-width: 68em;
}
textarea.post {
   min-height: 25em;
}

Angepasstes Texteingabefenster

Image: http://abload.de/img/eingabefenster_757kep5.png


Mir gefällt die aktuelle Ansicht recht gut, gegen die etwas breitere Ansicht hätte ich auch nichts einzuwenden. Die alte Ansicht ist nicht mehr zeitgemäß, die aktuelle Ansicht ist für den Übergang, also bis zu einer möglichen neuen Forensoftware, gar nicht schlecht. Ich empfehle aber noch die zusätzlichen Änderungen einzubauen, damit überbreiter Code-Text nicht die Forenansicht sprengt. Das Texteingabefenster wurde entsprechend optimiert.

Welche Ansicht gefällt euch von den Dreien am besten?

Update: Vielen Dank an milo1012, der Fehler wurde korrigiert und der Code wurde jetzt in verschiedenen Forenbereichen getestet. Durch Änderungen am Code für das Texteingabefeld wird das Signatur-Eingabefeld ebenso leicht verändert. Die Screenshots behalten ihre Gültigkeit. Der hier verwendete CSS-Code wurde von milo1012 übernommen und nur einwenig angepasst.

[milo1012]

2phantom
Meine Meinung habe ich zwar oben schon abgegeben, aber ich wäre ich immer noch dafür, eine Umfrage im (englischen) Forum zu starten, ob man die Änderungen so wie jetzt (plus Limitierung der Code-Sections) dauerhaft so belassen soll (mit Korrektur einiger Details), evt. auch mit wie viel Breite die Mehrzahl der Nutzer einverstanden wären.


Aber etwas Anderes:

Vorsicht bei .post und min-width!

Die CSS-Klasse wird z.B. auch für die Forum-Suchfunktion benutzt und vermutlich auch für andere Eingabemasken, wie z.B. die Profil-Bearbeitung.
Bei 68em sind alle Eingabefelder extrem breit (zu breit).

Abhilfe schafft z.B.

Code: Select all

.gen > .post,
.genmed > textarea.post {
    min-width: 68em;
}

[Dalai]

Ich habe derzeit in meinem Stil:

Code: Select all

@-moz-document domain("ghisler.ch") {
    body
    {
        max-width: 85em !important;
        margin: 10px 10px !important;
    }
    /* New Post input boxes */
    .post
    {
        min-width: 60em;
    }
    textarea.post
    {
        min-height: 25em;
    }
    /* CODE blocks */
    .code
    {
       max-width: 70em;
    }
}

Wie breit man die Seite macht, darüber kann man streiten/diskutieren.

Die margin ist sicher Geschmackssache. Hier im Forum sehe ich keinen Grund, die Seiten zu zentrieren, im Gegensatz zu Newsseiten. Kommt auch darauf an, ob man den Browser im Vollbild hat oder nicht. Wie gesagt, Geschmackssache.

Die Angabe der .post betrifft übrigens nicht nur die Schnellantwort unten auf der Seite sondern auch das Verfassen neuer Beiträge (Vorschau bzw. nach Klicken auf "Antwort erstellen" im Thread) und Themen. Zu groß sollte man die minimale Größe der einzelnen Elemente (hier Texteingabefelder) aber nicht wählen, weil es mit Sicherheit Besucher gibt, die kleine Auflösungen haben.

Und milo hat recht: die Klasse .post wird noch woanders benutzt. Das hatte ich gar nicht geprüft . Daher werde ich seinen Vorschlag gleich mal bei mir ergänzen.

Code: Select all

@-moz-document domain("ghisler.ch") {
    body
    {
        max-width: 85em !important;
        margin: 10px 10px !important;
    }
    /* New Post input boxes */
    .gen > .post,
    .genmed > textarea.post
    {
        min-width: 60em;
    }
    textarea.post
    {
        min-height: 25em;
    }
    /* CODE blocks */
    .code
    {
       max-width: 70em;
    }
}

Das beeinflusst zwar immer noch das Eingabefeld für die Signatur in den Profileinstellungen, aber damit kann man wohl leben.

Noch ein wichtiger Hinweis: Die !important-Angaben habe ich bei mir momentan nur drin, um die Angaben der Webseite zu überstimmen (klappt interessanterweise). Im Stil auf dem Webserver sollten sie nicht vorkommen.

MfG Dalai

[HolgerK]

Vorsicht bei .post und min-width!

Die CSS-Klasse wird z.B. auch für die Forum-Suchfunktion benutzt und vermutlich auch für andere Eingabemasken, wie z.B. die Profil-Bearbeitung.
Bei 68em sind alle Eingabefelder extrem breit (zu breit).

Zustimmung!
Zumal sich die Eingabefelder mit dem Grip in der rechten unteren Ecke in der Grösse anpassen lassen.

BTW Danke an Dich und Dalai für den Tip mit der userContent.css.
Hier mal meine Einstellungen:

Code: Select all

 body{
	margin: 5px auto !important; 
	max-width: 65em !important; 
}
.code {
	max-width: 50em;
	word-wrap: break-word;
}

Gruss
Holger

[phantom]

@milo1012, vielen Dank für deinen Hinweis und den verbesserten Code.
Der Fehler wurde in meiner Zusammenfassung korrigiert.

Wie du schon richtig anmerkst, sind die Änderungen erst mal für den Übergang gedacht.
Ich habe die Screenshots hochgeladen, damit sich jeder selbst ein Bild machen kann.
Ich habe ja quasi drei Ansichten zur Wahl gestellt. Wobei die alte Ansicht echt antiquiert aussieht
und eigentlich nicht zur Disposition steht. Aber das letzte Wort hat natürlich Christian Ghisler.

[Horst.Epp]

Code: Select all

body {
    padding-bottom: 2em !important;
    margin: 10px auto !important;
    max-width: 65em !important;
}

Danke, ich habe das so mal in das SubSilver.css eingebaut. OK so?

Schön wäre auch eine Mobile-Weiche über CSS, kennt sich da jemand aus? Für Mobile müssten die Schriften grösser angezeigt werden, und bei den Tabellen die Benutzerinfos über den Posts.

Nein, für mich ist das überhaupt nicht ok.
Vorher war in allen Browsern die Bildschirmbreite voll ausgenutzt, jetzt nicht mehr.
Ich will auch nicht in den Tiefen des Browser basteln, nur um eine volle Ausnutzung zu erreichen und habe deshalb auf den Style phpVB2 umgestellt.
Warum haben Sie dazu nicht einen neuen Style eingeführt, den man in seinem Profile aussuchen kann ?

[ghisler(Author)]

So, ich habe nun mal den Wordwrap im code-Abschnitt eingebaut, um die Scherze von Lefteous zu unterbinden.

[Samuel]

2ghisler(Author)
Könnte die Übersicht der Suchergebnisse wieder verbreitert werden. ("Beiträge seit dem letzten Besuch anzeigen")

[ghisler(Author)]

Leider benutzen alle Seiten dieselbe externe css-Datei, in welcher die Breitenbegrenzung steht. Dies gilt auch für die Suchergebnisse. Die Begrenzung gilt deshalb für alle Seiten des Forums.

Oder kennt jemand eine Möglichkeit, den Anwendungsbereich einer css-Anweisung auf eine bestimmte Datei zu begrenzen?

[phantom]

Ich bin mit der jetzigen Einstellung recht zufrieden. Mich stört im Moment noch der kleine "Sprung" der Webseite nach rechts, wenn man auf bestimmte Funktionen klickt. Dazu gehören: "Beiträge seit dem letzten Besuch anzeigen", "Suchen", "Log in", "Register", "Keine neue Nachrichten", "Log in to check your private messages", "Gruppen". Ok, die zuletzt genannten Funktionen sind deaktiviert, wurden aber vollständigkeitshalber mit aufgelistet.

Das ist jetzt wirklich nichts gravierendes, da ich die Funktionen eher selten nutze, aber es würde mich doch interessieren woran das liegt und ob man das abstellen kann. Ist das über Modifikation der CSS-Datei bzw. deren Einstellungen abzustellen? Oder müsste man dies im HTML-Code, Java-Script ... ändern?

Aber soweit sind wir noch nicht, im Moment Suche ich noch nach der Ursache dafür.

[milo1012]

Oder kennt jemand eine Möglichkeit, den Anwendungsbereich einer css-Anweisung auf eine bestimmte Datei zu begrenzen?

Das dürfte in der Tat nur gehen, wenn man je nach aktuellem Skript zwei unterschiedliche CSS-Dateien/-Module verlinkt, einmal mit Breitenbegrenzung, einmal ohne.
In PHP geht das mit Sicherheit schon mit einem einfachen Switch, man hat ja die HTTP-POST-Parameter und je nach Bereich unterschiedliche Skripte die angesprochen werden, also z.B. search.php gegenüber viewtopic.php.

Mich stört im Moment noch der kleine "Sprung" der Webseite nach rechts, wenn man auf bestimmte Funktionen klickt. Dazu gehören
...
Ist das über Modifikation der CSS-Datei bzw. deren Einstellungen abzustellen? Oder müsste man dies im HTML-Code, Java-Script ... ändern?

Die Erklärung ist einfach: Manchmal ist eine "Scrollbar" da, manchmal nicht (wie eben z.B. beim Aufruf von "Suchen") und der Browser versucht den Body immer wieder neu zu zentrieren.
Dementsprechend hat man ohne Scrollbar ein paar Pixel mehr, und der Body rückt "scheinbar" nach rechts.

Abhilfe:
http://stackoverflow.com/questions/6357870/scrollbar-on-browser-and-div-margin-0-auto-jumping

Oder kurz:

Code: Select all

html {
	overflow-y: scroll;
}

[phantom]

Der zusätzliche Code behebt das Problem. Du scheinst dich ja Recht gut mit CSS auszukennen, zumindest verstehst du es dir selbst zu helfen. Die verlinkte Seite erklärt ganz gut das Problem mit den "Sprüngen".

Vielen Dank milo1012. TOP!!!