Kai345: Stylesheet

[latex]Mae  govannen![/latex]

Da die Batterie meines Autos platt ist, habe ich gerade ein wenig unerwartete Zeit gefunden ;)

Ich nutze das Forum in der "neuen" Ansicht, (hoffentlich) ohne jegliche eigene Änderung. Dabei sind mir noch ein paar Dinge aufgefallen, die ich einfach mal in den Raum stelle:

Den grauen Text (Posting-Zeit/-Datum) und auch das Grau für gelesene Nachrichten und Zitate finde ich als Default nicht schön und schwer lesbar. Meiner Meinung nach sollte Selfhtml auch in Sachen Barrierearmut hier Vorbild sein.

Der Textanzeige-Bereich (Nachricht lesen) von Postings ist mMn suboptimal gestyled, das sieht viel zu sehr wie eine Texarea aus. Verwirrt nur. Schön wäre, wenn sich dieser Bereich automatisch an die Bildschirmbreite anpassen würde. Gleiches für den Antwort-Bereich

Im fixierten Headerbalken ist die Schrift „Suche“ in meienm Opera dunkelgrau auf Blau. Findet man nur durch Zufall.

Den Threadbaum durch Linien zu verdeutlichen würde für Übersichtlichkeit sorgen. (Beispiel)

Insbesondere in der Nachricht lesen - Ansicht wirkt das neue Logo und die Symbole in Verbindung mit dem fixen Header-Balken etwas zu protzig. Hier ist schon die halbe Viwport-Höhe verbraten, bevor ich überhaupt zum eigentlichen Inhalt komme. Ich würde die Ansichten-Auswahl hier nicht untereinander anordnen, sondern in einer Zeile.

Stur lächeln und winken, Männer!
Kai

--
var jQuery = $(hit);
I am Pentium of Borg. Division is futile. You will be approximated.
SelfHTML-Forum-Stylesheet
  1. Hallo,

    Da die Batterie meines Autos platt ist, habe ich gerade ein wenig unerwartete Zeit gefunden ;)

    willkommen im Club. Meine Autobatterie hängt auch gerade an der Nabelschnur. Allerdings hat sich bei mir in den letzten Tagen schon angekündigt, dass sie ein wenig schwächelt. Ich musste in letzter Zeit viel Kurzstrecke fahren, und mein Auto springt bei Kälte etwas unwillig an (es sei denn, es ist _richtig_ kalt - ab etwa -5°C setzt die Vorglühanlage automatisch ein, und dann springt der Motor auf den ersten Dreh an).

    Den grauen Text (Posting-Zeit/-Datum) und auch das Grau für gelesene Nachrichten und Zitate finde ich als Default nicht schön und schwer lesbar. Meiner Meinung nach sollte Selfhtml auch in Sachen Barrierearmut hier Vorbild sein.

    ACK, allerdings sind die Stellen, die du aufzählst, auch eher von untergeordneter Bedeutung, daher finde ich es akzeptabel, wenn sie visuell etwas in den Hintergrund rücken.

    Der Textanzeige-Bereich (Nachricht lesen) von Postings ist mMn suboptimal gestyled, das sieht viel zu sehr wie eine Texarea aus. Verwirrt nur. Schön wäre, wenn sich dieser Bereich automatisch an die Bildschirmbreite anpassen würde. Gleiches für den Antwort-Bereich

    [X] Dafür

    Im fixierten Headerbalken ist die Schrift „Suche“ in meienm Opera dunkelgrau auf Blau. Findet man nur durch Zufall.

    Mittelgrau auf hellem Cyan. Die Farbkombination ist ungüstig, aber durch den Rahmen fällt das Feld IMO doch stark auf.

    Den Threadbaum durch Linien zu verdeutlichen würde für Übersichtlichkeit sorgen. (Beispiel)

    Ja, etwas Ähnliches habe ich auch seit langer Zeit in meinem eigenen Forums-Stylesheet, weil man bei einem etwas verzweigten Threadbaum sonst wirklich nur mit Mühe erkennt, was zusammengehört.

    Insbesondere in der Nachricht lesen - Ansicht wirkt das neue Logo und die Symbole in Verbindung mit dem fixen Header-Balken etwas zu protzig. Hier ist schon die halbe Viwport-Höhe verbraten, bevor ich überhaupt zum eigentlichen Inhalt komme. Ich würde die Ansichten-Auswahl hier nicht untereinander anordnen, sondern in einer Zeile.

    Okay, das Problem habe ich dank 1200px in der Vertikalen noch nicht so deutlich empfunden, aber ich stimme prinzipiell zu, und die Orientierung in der Horizontalen wäre tatsächlich eine gute Alternative. Zusätzlich die obere Leiste (Forum/Doku/Wiki/Blog) nicht fixieren, denn damit nimmt sie auch permanent Platz auf dem Bildschirm weg, wenn auch nicht viel.

    Außerdem vermisse ich im neuen Design eine wichtige Information: Den Zeitpunkt, wann die Forumshauptdatei geladen wurde. Sehe ich da gerade den Stand von vor 5min, oder ist der letzte Refresh schon eine halbe Stunde her? Nicht immer mache ich mir im Hinterkopf so genaue Notizen.

    So long,
     Martin

    --
    Er war ein Mann wie ein Baum. Sie nannten ihn Bonsai.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Shit, ich wollte erstmal nur die Vorschau sehen ... ;-)

      Im fixierten Headerbalken ist die Schrift „Suche“ in meienm Opera dunkelgrau auf Blau. Findet man nur durch Zufall.
      Mittelgrau auf hellem Cyan. Die Farbkombination ist ungüstig, aber durch den Rahmen fällt das Feld IMO doch stark auf.

      Außerdem ist für mich nicht erkennbar, _was_ diese Suche eigentlich durchsuchen will. Die aktuell angezeigte Seite? Sinnlos, das kann der Browser allein. Was dann? Ausprobieren zeigt, dass es ein Schnellzugang zur Archivsuche ist. Das ist aber auch nicht wirklich hilfreich, weil dann die Auswahlmöglichkeit fehlt, _welche_ Archiv-Jahrgänge man durchsuchen möchte (das aktuelle Jahr ist idR zu wenig).
      Insofern finde ich das omnipräsente Such-Eingabefeld an der Stelle nicht sinnvoll; besser wäre IMHO ein einfacher Link zur Suche. Am besten als fünfter Punkt nach Forum, Doku, Wiki und Blog.

      Ciao,
       Martin

      --
      Gott hilft niemandem, er erfreut sich nur an unseren Leiden.
        (Ashura)
      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      1. Tach!

        Außerdem ist für mich nicht erkennbar, _was_ diese Suche eigentlich durchsuchen will.

        Das Forum, allgemein.

        Die aktuell angezeigte Seite? Sinnlos, das kann der Browser allein.

        Das kann die Suche nicht einmal. (Wird im neuen Forum besser, da gibts keine getrennte Datenhaltung mehr - wohl aber das Archivieren, dass Threads nach einer Zeit nicht mehr bearbeitbar sind.)

        Was dann? Ausprobieren zeigt, dass es ein Schnellzugang zur Archivsuche ist. Das ist aber auch nicht wirklich hilfreich, weil dann die Auswahlmöglichkeit fehlt, _welche_ Archiv-Jahrgänge man durchsuchen möchte (das aktuelle Jahr ist idR zu wenig).

        Das kannst du ja später noch verfeinern.

        dedlfix.

        1. Hi,

          Was dann? Ausprobieren zeigt, dass es ein Schnellzugang zur Archivsuche ist. Das ist aber auch nicht wirklich hilfreich, weil dann die Auswahlmöglichkeit fehlt, _welche_ Archiv-Jahrgänge man durchsuchen möchte (das aktuelle Jahr ist idR zu wenig).
          Das kannst du ja später noch verfeinern.

          stimmt, aber erst nach einem möglicherweise unnötigen Suchlauf.

          Ciao,
           Martin

          --
          F: Was macht ein Offizier, der in der Nase bohrt?
          A: Er holt das Letzte aus sich heraus.
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        2. Außerdem ist für mich nicht erkennbar, _was_ diese Suche eigentlich durchsuchen will.

          Das Forum, allgemein.

          und die Doku.

          Matthias

          --
          1/z ist kein Blatt Papier.

    2. Tach!

      Außerdem vermisse ich im neuen Design eine wichtige Information: Den Zeitpunkt, wann die Forumshauptdatei geladen wurde.

      Sag ich doch!
      User-CSS: #ladezeitpunkt { display:block; }

      dedlfix.

    3. Om nah hoo pez nyeetz, Der Martin!

      Den Threadbaum durch Linien zu verdeutlichen würde für Übersichtlichkeit sorgen. (Beispiel)

      Ja, etwas Ähnliches habe ich auch seit langer Zeit in meinem eigenen Forums-Stylesheet, weil man bei einem etwas verzweigten Threadbaum sonst wirklich nur mit Mühe erkennt, was zusammengehört.

      per CSS? Habe ich lange erfolglos umhergebastelt. Magst du es zeigen? Da sich am Thread-Baum nichts verändert hat, sollte es auch in der neuen Ansicht funktionieren.

      Zusätzlich die obere Leiste (Forum/Doku/Wiki/Blog) nicht fixieren, denn damit nimmt sie auch permanent Platz auf dem Bildschirm weg, wenn auch nicht viel.

      Sie ist für schmale Viewports nicht fixiert. Und dann kannst du dir auch anschauen, warum ich sie fixiert habe: Die Inhalte sind ggf. breiter als das body-Element und dann sieht es beim horizontalen Scrollen unschön aus.

      Außerdem vermisse ich im neuen Design eine wichtige Information: Den Zeitpunkt, wann die Forumshauptdatei geladen wurde.

      Ist nur per CSS ausgeblendet.

      Matthias

      --
      1/z ist kein Blatt Papier.

      1. Hallo,

        Ja, etwas Ähnliches habe ich auch seit langer Zeit in meinem eigenen Forums-Stylesheet, weil man bei einem etwas verzweigten Threadbaum sonst wirklich nur mit Mühe erkennt, was zusammengehört.
        per CSS? Habe ich lange erfolglos umhergebastelt. Magst du es zeigen?

        nichts leichter als das, sagte Frederick. ;-)
        Bei mir war es nichts weiter als

        ol#root ul  
         { border-left: 1px solid #C0C0FF;  
         }
        

        Zugegeben, das gibt nicht diese schönen verzweigten Astlinien, sondern nur einen vertikalen Kamm. Aber es ist eine gute visuelle Hilfe, um die Einrückungstiefe und damit die Hierarchieebene zu erkennen. Man sieht also gleich, ob zwei Postings, die etwas auseinanderliegen, in der gleichen Ebene stehen, oder ob eines eine Antwort auf das andere ist.

        In einem anderen Projekt habe ich aber auch die Ast-Darstellung realisiert, vielleicht mag es jemand fürs Forum adaptieren (vielleicht mach ich's auch selbst in den nächsten Tagen):

        <ul class="treeview">  
         <li>Item 1</li>  
         <li>Item 2  
          <ul>  
           <li>Item 2.1</li>  
           <li>Item 2.2</li>  
           <li>Item 2.3 - This List Item has a long text<br>  
               that extends over multiple lines.</li>  
           <li>Item 2.4</li>  
          </ul></li>  
         <li>Item 3</li>  
         <li>Item 4  
          <ul>  
           <li>Item 4.1</li>  
           <li>Item 4.2</li>  
           <li>Item 4.3</li>  
          </ul></li>  
         <li>Item 5</li>  
         <li>Item 6</li>  
        </ul>
        
        ul.treeview, ul.treeview ul  
         { margin:  0;  
           padding: 0;  
           list-style-type: none;  
           background: #FFF url(ns.png) left top repeat-y;  
         }  
        ul.treeview li  
         { margin-left:  0;  
           padding-left: 20px;  
           background: url(nse.png) left top no-repeat;  
         }  
        ul.treeview li:last-child  
         { background: url(ne.png) left top no-repeat;  
         }
        

        Dazu gehören dann drei Mini-Grafiken (senkrechte Linie, senkrechte Linie mit Verzweigung nach rechts, Ecke von oben nach rechts). Kann man möglicherweise auch mit Blockgrafik-Zeichen nachbilden, aber dann ist das pixelgenaue Anstückeln schwieriger, so dass es nach was aussieht. Voraussetzung: Die Zeilenhöhe darf nicht größer sein als die Höhe der Bildchen.

        Da sich am Thread-Baum nichts verändert hat, sollte es auch in der neuen Ansicht funktionieren.

        Ja, das tut es (die ganz oben beschriebene Trivialversion). Habe ich vorhin ganz am Anfang schon gesehen.

        Außerdem vermisse ich im neuen Design eine wichtige Information: Den Zeitpunkt, wann die Forumshauptdatei geladen wurde.
        Ist nur per CSS ausgeblendet.

        Okay, hat dedlfix ja schon indirekt gesagt. Warum eigentlich?

        Ciao,
         Martin

        --
        Dem Philosoph ist nichts zu doof.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Om nah hoo pez nyeetz, Der Martin!

          ol#root ul

          { border-left: 1px solid #C0C0FF;
          }

          
          >   
          > Zugegeben, das gibt nicht diese schönen verzweigten Astlinien, sondern nur einen vertikalen Kamm.  
            
          und vor allem, gibt es auch eine Linie wenn es kein weiteres Posting dieser Ebene gibt.  
            
          
          > In einem anderen Projekt habe ich aber auch die Ast-Darstellung realisiert, vielleicht mag es jemand fürs Forum adaptieren (vielleicht mach ich's auch selbst in den nächsten Tagen):  
            
          Wie gesagt: Linien zum direkten Antwortposting halte ich für wenig sinnvoll. Ich wollte [sowas](http://selfhtml.apsel-mv.de/forum/demo%20thread-baum.jpg) erreichen  
            
          
          > > > Außerdem vermisse ich im neuen Design eine wichtige Information: Den Zeitpunkt, wann die Forumshauptdatei geladen wurde.  
            
          
          > Okay, hat dedlfix ja schon indirekt gesagt. Warum eigentlich?  
            
          Weil man im Team dieser Meinung war. Er war auch schon mal ganz weg ;-) Wir können ihn aber wieder hinbauen.  
            
          Matthias
          
          -- 
          1/z ist kein Blatt Papier.  
          ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
          
          
          1. Hallo,

            ol#root ul

            { border-left: 1px solid #C0C0FF;
            }

            
            > >   
            > > Zugegeben, das gibt nicht diese schönen verzweigten Astlinien, sondern nur einen vertikalen Kamm.  
            > und vor allem, gibt es auch eine Linie wenn es kein weiteres Posting dieser Ebene gibt.  
              
            stimmt, aber mir ging es damals hauptsächlich um eine visuelle Orientierungshilfe, und die Ästhetik war mir zweitrangig, wenn nicht gar sch...nurz.  
              
            
            > > In einem anderen Projekt habe ich aber auch die Ast-Darstellung realisiert, vielleicht mag es jemand fürs Forum adaptieren (vielleicht mach ich's auch selbst in den nächsten Tagen):  
            > Wie gesagt: Linien zum direkten Antwortposting halte ich für wenig sinnvoll.  
              
            Nötig sind sie bei kurzen Wegen vielleicht nicht, aber sie stören auch nicht. Und viele Nutzer werden es von anderen Beispielen so gewöhnt sein - der Windows-Explorer dürfte das prominenteste sein. Ich hatte einfach versucht, das Aussehen eines TreeView-Control aus Windows nachzuempfinden (ich hatte da sogar das Auf- und Zuklappen von Teilzweigen mit Javascript drin).  
              
            Für mich werde ich es trotzdem in mein User-Stylesheet einbauen; ob's anderen auch gefällt, kann jeder für sich entscheiden.  
              
            Ciao,  
             Martin  
            
            -- 
            Der Sinn einer Behörde besteht in ihrer Existenz.  
              (alte Beamtenweisheit)  
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            
  2. Om nah hoo pez nyeetz, Kai345!

    Natürlich nehmen wir alle Hinweise ernst. Allerdings sind die Geschmäcker naturgemäß verschieden, wir werden deshalb jetzt nicht jeden Änderungsvorschlag sofort umsetzen, sondern euch auch erstmal Zeit geben, euch an das Layout zu gewöhnen. Das Layout als solches ist mMn insich stimmig, ich hätte es so niemals hinbekommen.

    Auf einige Punkte werde ich eingehen, sie sind nicht als Rechtfertigung zu sehen.

    Meiner Meinung nach sollte Selfhtml auch in Sachen Barrierearmut hier Vorbild sein.

    Da stimme ich zu. Farbvorschläge sind in der Form #123456 willkommen. Nicht immer werden alle W3C-Barrierearmut-Standards erfüllt, allerdings im Antwortfenster lt. Colour Contrast Analyzer schon.

    Der Textanzeige-Bereich (Nachricht lesen) von Postings ist mMn suboptimal gestyled, das sieht viel zu sehr wie eine Texarea aus. Verwirrt nur. Schön wäre, wenn sich dieser Bereich automatisch an die Bildschirmbreite anpassen würde. Gleiches für den Antwort-Bereich

    Eine Breitenangabe in Prozent verhindert das Funktionieren der Nested-Ansicht. Dann werden wieder wie im alten Forum die letzten Postings immer schmaler. Zudem lässt sich Text mit einer bestimmten Zeilenbreite besser erfassen.

    Im fixierten Headerbalken ist die Schrift „Suche“ in meienm Opera dunkelgrau auf Blau. Findet man nur durch Zufall.

    Ja. Leider. Opera. Ich habe a) keinen Hack gefunden, der nur den Opera bewegt, den Placeholder 2em vom rechten Rand wegzubewegen und b) "Probably specified in Opera's default stylesheet or in the code that puts the placeholder text there, which only Opera has access to. It looks like the placeholder inherits the font-size, font-family and font-weight from the input. But, the color is not inherited and the color is hardcoded to a gray color orto a black color and has mild transparency to it. (http://my.opera.com/community/forums/topic.dml?id=1279012)"

    Den Threadbaum durch Linien zu verdeutlichen würde für Übersichtlichkeit sorgen. (Beispiel)

    Hab ich mich per CSS versucht und habs nicht zuverlässig (also garnicht) hinbekommen. Dein JS(?) sollte aber immer noch funktionieren. Wie sehen denn die Linien im neuen Design aus?

    Hier ist schon die halbe Viwport-Höhe verbraten, bevor ich überhaupt zum eigentlichen Inhalt komme.

    Das war im alten Forum auch so.

    Generell gilt: Wir sind der Meinung ein ansprechendes Design gestaltet zu haben und jeder, der kann, kann für sich selbst Änderungen vornehmen.

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Tach!

      Eine Breitenangabe in Prozent verhindert das Funktionieren der Nested-Ansicht. Dann werden wieder wie im alten Forum die letzten Postings immer schmaler.

      Da mich die nicht interessiert, heißt die Lösung auch wieder "User-Stylesheet".

      Hier ist schon die halbe Viwport-Höhe verbraten, bevor ich überhaupt zum eigentlichen Inhalt komme.
      Das war im alten Forum auch so.

      Da lob ich mir doch die Frames-Ansicht, da wird gleich vorgesprungen bis Nachricht lesen (wenn einem 1. nicht die id aus der Überschrift geklaut wird und 2. die Transitions den Inhalt noch umherschieben. (1. korrigiert, 2. User-Stylesheet))

      dedlfix.

      1. Om nah hoo pez nyeetz, dedlfix!

        Da lob ich mir doch die Frames-Ansicht, da wird gleich vorgesprungen bis Nachricht lesen (wenn einem 1. nicht die id aus der Überschrift geklaut wird und 2. die Transitions den Inhalt noch umherschieben. (1. korrigiert, 2. User-Stylesheet))

        1. sorry.
        2. Das wäre unschön, wo genau wird noch Inhalt umhergeschoben?

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. Om nah hoo pez nyeetz, Matthias Apsel!

          1. Das wäre unschön, wo genau wird noch Inhalt umhergeschoben?

          Auslöser ist display: none; für #top

          Matthias

          --
          1/z ist kein Blatt Papier.

          1. Moin Matthias,

            1. Das wäre unschön, wo genau wird noch Inhalt umhergeschoben?

            Auslöser ist display: none; für #top

            Ne, Auslöser sind die nicht eingeschränkten transitions. Da sollte man vielleicht sich auf a beschränken statt *, :hover als selector zu verwenden. Naja, ich behelfe mich gerad mit

            * {  
              -webkit-transition:none !important;  
            } 
            

            LG,
             CK

            1. Om nah hoo pez nyeetz, Christian Kruse!

              Auslöser ist display: none; für #top

              Ne, Auslöser sind die nicht eingeschränkten transitions.

              Ne, Auslöser ist der Wechsel von display: block; auf display: none; für das Element #top. Durch die Transition wird dieser Wechsel nur langsam vollzogen, was sich dadurch äußert, dass der nachfolgende Inhalt nach oben rutscht. Ohne Transition springt der Inhalt nach oben. Das ist auch zu sehen. Mag sein, dass das auch an einer langsamen Internetverbindung liegt.

              Da sollte man vielleicht sich auf a beschränken statt *, :hover als selector zu verwenden.

              Magst du das im Wiki eintragen?

              Matthias

              --
              1/z ist kein Blatt Papier.

              1. Moin Matthias,

                Ne, Auslöser ist der Wechsel von display: block; auf display: none; für das Element #top.

                Das ist doch gar nicht display:none? Das springen gibts ja nur in der Nachrichten-Ansicht. Und da ist #top nachwievor auf block, nur position:fixed; top: 0; ist gesetzt. Dadurch ist gar nichts zu sehen, wenn du die Transitions abschaltest (weil da wirken die Regeln zur Rendering-Zeit ja schon, das CSS wird ja nicht asynchron geladen). Und wenn die Transitions aktiv sind, wird das nach oben rutschen halt animiert.

                Ohne Transition springt der Inhalt nach oben. Das ist auch zu sehen.

                Hu? Wie denn? Das CSS wird doch synchron geladen.

                Da sollte man vielleicht sich auf a beschränken statt *, :hover als selector zu verwenden.

                Magst du das im Wiki eintragen?

                [x] Done

                LG,
                 CK

                1. Om nah hoo pez nyeetz, Christian Kruse!

                  Das ist doch gar nicht display:none?

                  Doch, in der Frames-Ansicht.

                  Hu? Wie denn? Das CSS wird doch synchron geladen.

                  Wie gesagt, ich sitze hier an einer langsamen Internetverbindung.

                  Matthias

                  --
                  1/z ist kein Blatt Papier.

        2. Tach!

          Da lob ich mir doch die Frames-Ansicht, da wird gleich vorgesprungen bis Nachricht lesen (wenn einem nicht [...] die Transitions den Inhalt noch umherschieben.[...])
          Das wäre unschön, wo genau wird noch Inhalt umhergeschoben?

          Im Firefox: Ohne Transition steht die "Nachricht lesen"-Überschrift gleich oben. Mit Transition rutscht das ganze noch ein undefiniertes Stück weiter hoch. Das kann auch ein komisches Verhalten im Firefox sein, aber da ich unnötige Bewegungen gar nicht mag, wird die Transition bei mir sowieso neutralisiert, spätestens im Stylish.

          dedlfix.

    2. [latex]Mae  govannen![/latex]

      Natürlich nehmen wir alle Hinweise ernst. Allerdings sind die Geschmäcker naturgemäß verschieden, wir werden deshalb jetzt nicht jeden Änderungsvorschlag sofort umsetzen, sondern euch auch erstmal Zeit geben, euch an das Layout zu gewöhnen. Das Layout als solches ist mMn insich stimmig, ich hätte es so niemals hinbekommen.

      Wie ich bereits schrieb: Ich stelle die Punkte, die mir auffallen, einfach mal so in den Raum. Was davon letztendlich umgesetzt wird, ist ein ganz anderes Thema.

      Meiner Meinung nach sollte Selfhtml auch in Sachen Barrierearmut hier Vorbild sein.

      Da stimme ich zu. Farbvorschläge sind in der Form #123456 willkommen. Nicht immer werden alle W3C-Barrierearmut-Standards erfüllt, allerdings im Antwortfenster lt. Colour Contrast Analyzer schon.

      In jedem Fall dunkler, damit es sich besser absetzt. Ich muß mal ein wenig expermentieren, wenn ich wieder an meinem anderen Computer bin. DIe bisherige Farbgebung ist jedenfalls barrieremäßig problematisch: Analyse

      Der Textanzeige-Bereich (Nachricht lesen) von Postings ist mMn suboptimal gestyled, das sieht viel zu sehr wie eine Texarea aus. Verwirrt nur. Schön wäre, wenn sich dieser Bereich automatisch an die Bildschirmbreite anpassen würde. Gleiches für den Antwort-Bereich

      Eine Breitenangabe in Prozent verhindert das Funktionieren der Nested-Ansicht. Dann werden wieder wie im alten Forum die letzten Postings immer schmaler. Zudem lässt sich Text mit einer bestimmten Zeilenbreite besser erfassen.

      Ich werde es ohnehin für mich ändern ;)
      Mir fiel das nur auf, als ich gerade ein Posting mit HTML-Quelltext angeschaut habe und die Zeilen sehr unschön umgebrochen wurden, was den Code schwieriger lesbar machte.

      Im fixierten Headerbalken ist die Schrift „Suche“ in meienm Opera dunkelgrau auf Blau. Findet man nur durch Zufall.

      Ja. Leider. Opera. Ich habe a) keinen Hack gefunden, der nur den Opera bewegt, den Placeholder 2em vom rechten Rand wegzubewegen und b) "Probably specified in Opera's default stylesheet or in the code that puts the placeholder text there, which only Opera has access to. It looks like the placeholder inherits the font-size, font-family and font-weight from the input. But, the color is not inherited and the color is hardcoded to a gray color orto a black color and has mild transparency to it. (http://my.opera.com/community/forums/topic.dml?id=1279012)"

      Also ignore.

      Den Threadbaum durch Linien zu verdeutlichen würde für Übersichtlichkeit sorgen. (Beispiel)

      Hab ich mich per CSS versucht und habs nicht zuverlässig (also garnicht) hinbekommen.

      In *meinem* Stylesheet sieht es so aus:  
      /* Ebenen-Linien */  
      #root ul ul {  
      	padding-left: 2em;  
      	overflow: hidden;  
      }  
      #root ul ul li:before {  
      	content: '';  
      	font-size: 0;  
      	vertical-align: bottom;  
      	padding-left: 23px;  
      	padding-top: 990px;  
      	/* line.png*/  
      	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAPoCAYAAADeMd7yAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1wceDA0tOGKh1wAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAABYUlEQVR42u3OIQ4AIBADwftw/y+LQhMCctbUNTOjXZJ+PWxbQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCwlthkp52pPcWumQ1ocEH3isAAAAASUVORK5CYII=') bottom right no-repeat;  
      }  
      
      

      Das muß ggf. natürlich noch entsprechend angepasst werden.

      Dein JS(?) sollte aber immer noch funktionieren.

      Nicht wirklich, weil meine Bedien-Elemente jetzt hinter dem Header-Balken liegen :( Aber das ist eine reine Anpassungs-Sache.

      Wie sehen denn die Linien im neuen Design aus?

      Da gibt es keine, weil ich mein CSS deaktiviert hatte.

      Hier ist schon die halbe Viwport-Höhe verbraten, bevor ich überhaupt zum eigentlichen Inhalt komme.

      Das war im alten Forum auch so.

      Kann sein, ich nutze schon zu lange mein eigenes CSS, um das beurteilen zu können.

      Generell gilt: Wir sind der Meinung ein ansprechendes Design gestaltet zu haben und jeder, der kann, kann für sich selbst Änderungen vornehmen.

      Mir geht es eher nicht um erfahrene Nutzer, die können das zweifelsfrei anpassen, sondern um diejenigen, die nicht angemeldet sind oder das Default-Stylesheet nutzen. Die Meisten Punkte können sicherlich entfallen, nur sollte man bspw. Dinge wie den Grauton bei gelesenen Antworten und Zeitstempel und ggf. auch die Linien auch für diese Leute zugänglich machen, weil es übersichtlicher wird. Gerade für Foren-Anfänger

      Stur lächeln und winken, Männer!
      Kai

      --
      var jQuery = $(hit);
      Unsere Identität entnehmen Sie bitte dem beigefügten Auszug aus den Personenstandsbüchern. Gegen die Assimilierung in unser Kollektiv ist nach dem ABGB (§666, Abs. 3/IV) kein Rechtsmittel zulässig. Wir bitten um Ihr Verständnis.
      SelfHTML-Forum-Stylesheet
      1. Om nah hoo pez nyeetz, Kai345!

        In jedem Fall dunkler, damit es sich besser absetzt. Ich muß mal ein wenig expermentieren, wenn ich wieder an meinem anderen Computer bin. DIe bisherige Farbgebung ist jedenfalls barrieremäßig problematisch: Analyse

        Ja, ich weiß, aber immerhin ein Häkchen. Zitat auf gelb sehe ich problematischer. Da gibts auch nur das eine Häkchen, aber da ist die Schrift auch kleiner.

        Mir fiel das nur auf, als ich gerade ein Posting mit HTML-Quelltext angeschaut habe und die Zeilen sehr unschön umgebrochen wurden, was den Code schwieriger lesbar machte.

        Das kann eigentlich nur durch manuelle Zeilenumbrüche geschehen. In Code-Blöcken ist es problematischer, aber dieses Problem kann bei breiteren (und in der nested-Ansicht unterschiedlich breiten) Elementen auch auftreten.

        Den Threadbaum durch Linien zu verdeutlichen würde für Übersichtlichkeit sorgen. (Beispiel)

        Hab ich mich per CSS versucht und habs nicht zuverlässig (also garnicht) hinbekommen.

        In *meinem* Stylesheet sieht es so aus:

        aber da sinds auch wieder alle. Ich hätte gern nur einige.

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. Hi,

          aber da sinds auch wieder alle. Ich hätte gern nur einige.

          Ziemlich nichtssagende URL ;-)

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          O o ostern ...
          Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
          1. Om nah hoo pez nyeetz, MudGuard!

            aber da sinds auch wieder alle. Ich hätte gern nur einige.

            ja. http://selfhtml.apsel-mv.de/forum/demo thread-baum.jpg

            Matthias

            --
            1/z ist kein Blatt Papier.

        2. [latex]Mae  govannen![/latex]

          Mir fiel das nur auf, als ich gerade ein Posting mit HTML-Quelltext angeschaut habe und die Zeilen sehr unschön umgebrochen wurden, was den Code schwieriger lesbar machte.

          Das kann eigentlich nur durch manuelle Zeilenumbrüche geschehen. In Code-Blöcken ist es problematischer, aber dieses Problem kann bei breiteren (und in der nested-Ansicht unterschiedlich breiten) Elementen auch auftreten.

          Code-Blöcke würde ich -gerade in Nested- mit vorgegebener Mindest-Breite und overflow o.ä. versehen. Ein Scrollbalken ist nicht annähernd so lästig wie Zeilen, die umgebrochen sind.

          BTW: Ich habe in meinem Stylesheet in der Nested-Ansicht ab einer bestimmten Thread-Tiefe die Einrückung fast komplett entfernt und stattdessen die Ebenen mit border-left (glaube ich, muß nachhschauen) markiert, da irgendwann die Postings zu schmal werden würden. Alternativ müßte die Breite des umschließenden Elements mitwachsen, aber dann muß man die gesamte Seite scrollen, was ich für die schlechtere Lösung halte.

          Stur lächeln und winken, Männer!
          Kai

          --
          var jQuery = $(hit);
          I am Pentium of Borg. Division is futile. You will be approximated.
          SelfHTML-Forum-Stylesheet
          1. Om nah hoo pez nyeetz, Kai345!

            Code-Blöcke würde ich -gerade in Nested- mit vorgegebener Mindest-Breite und overflow o.ä. versehen. Ein Scrollbalken ist nicht annähernd so lästig wie Zeilen, die umgebrochen sind.

            Gute Idee. Trägst dus ins Wiki?

            BTW: Ich habe in meinem Stylesheet in der Nested-Ansicht ab einer bestimmten Thread-Tiefe die Einrückung fast komplett entfernt und stattdessen die Ebenen mit border-left (glaube ich, muß nachhschauen) markiert, da irgendwann die Postings zu schmal werden würden. Alternativ müßte die Breite des umschließenden Elements mitwachsen, aber dann muß man die gesamte Seite scrollen, was ich für die schlechtere Lösung halte.

            Durch die feste Breitenvorgabe entfällt dieser Aufwand. Und das horizontale Scrollen kommt bis auf Mobilgeräte selten vor und da ist es dank Finger weit weniger unangenehm als am PC.

            Matthias

            --
            1/z ist kein Blatt Papier.

            1. [latex]Mae  govannen![/latex]

              Code-Blöcke würde ich -gerade in Nested- mit vorgegebener Mindest-Breite und overflow o.ä. versehen. Ein Scrollbalken ist nicht annähernd so lästig wie Zeilen, die umgebrochen sind.

              Gute Idee. Trägst dus ins Wiki?

              Nein. Ich nehme inzwischen von dieser Idee (vorerst) Abstand, weil man dazu offenbar auch diverse Vorgänger-Elemente an(f|p)assen müsste (was dann wiederum Auswirkungen haben könnte, die kompensiert werden müßten). Das wird Alles in Allem ein zu großer Aufwwand denke ich.

              Stur lächeln und winken, Männer!
              Kai

              --
              var jQuery = $(hit);
              Wir sind die Schlumpf. Widerschlumpf ist schlumpflos. Wir werden Sie einschlumpfen.
              SelfHTML-Forum-Stylesheet
              1. Om nah hoo pez nyeetz, Kai345!

                Der 1. Teil ist einfach:

                code.block {  
                	display: block;  
                	overflow: auto;  
                	background: white;  
                	border: 1px solid #e4e4e4;  
                	padding: .2em;  
                }
                

                Der 2. Teil ist etwas schwieriger, aber jQuery steht zur Verfügung:

                Ergänze für diejenigen code-Elemente, die ein br-Element enthalten, die Klasse block.

                Wenn du magst, ...

                Matthias

                --
                1/z ist kein Blatt Papier.

                1. Om nah hoo pez nyeetz, Matthias Apsel!

                  Ergänze für diejenigen code-Elemente, die ein br-Element enthalten, die Klasse block.

                  Einzeiler

                  $(document).ready(function(){  
                  	$("code br").parents($("code")).addClass("block");  
                  })
                  

                  Matthias

                  --
                  1/z ist kein Blatt Papier.

      2. Om nah hoo pez nyeetz, Kai345!

        Den Threadbaum durch Linien zu verdeutlichen würde für Übersichtlichkeit sorgen. (Beispiel)

        Hab ich mich per CSS versucht und habs nicht zuverlässig (also garnicht) hinbekommen.

        [code lang=css]In *meinem* Stylesheet sieht es so aus:

        Danke. Mit deiner Idee ist's was geworden:

        thread-linien.png

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. [latex]Mae  govannen![/latex]

          Danke. Mit deiner Idee ist's was geworden:

          Nicht meine Idee, nicht mein Verdienst. Stammt Initial hier aus dem SELF. Meine größte Leistung war das Umwandeln des (separaten) Bildes in Inline-Daten, um den zusätzlichen Request zu sparen. Stand auch in meinem Posting drin. Der Satz scheint genauso verloren gegangen zu sein wie ein anderer Satz im CSS-Code gelandet ist: durch schwarze Magie ^^

          thread-linien.png

          Ja, das ist schön so. Damit werden die Zusammenhänge viel deutlicher dargestellt als ohne Linien.

          Stur lächeln und winken, Männer!
          Kai

          --
          var jQuery = $(hit);
          I am Pentium of Borg. Division is futile. You will be approximated.
          SelfHTML-Forum-Stylesheet
          1. Hi,

            Ja, das ist schön so. Damit werden die Zusammenhänge viel deutlicher dargestellt als ohne Linien.

            Die Linien hatten ich ursprünglich auch auf meiner Wunschliste, doch ist die Umsetzung irgendwie untergegangen.

            Welche Farbe passt zu diesen Baumlinien? Grün? ;-)

            Ciao, Performer

            1. Tach!

              Welche Farbe passt zu diesen Baumlinien? Grün? ;-)

              Schau mal aus dem Fenster, siehst du da irgendwo Grün an den Bäumen? ;)
              Die Linien sind auch eher mit den Stützen vergleichbar, die man um junge Bäume oder unter herunterhängende Äste steckt. Also eine Holzfarbe ...

              dedlfix.

          2. [latex]Mae  govannen![/latex]

            Nicht meine Idee, nicht mein Verdienst. Stammt Initial hier aus dem SELF.

            http://forum.de.selfhtml.org/archiv/2007/7/t157197/

            Stur lächeln und winken, Männer!
            Kai

            --
            var jQuery = $(hit);
            Unsere Identität entnehmen Sie bitte dem beigefügten Auszug aus den Personenstandsbüchern. Gegen die Assimilierung in unser Kollektiv ist nach dem ABGB (§666, Abs. 3/IV) kein Rechtsmittel zulässig. Wir bitten um Ihr Verständnis.
            SelfHTML-Forum-Stylesheet
            1. Hi,

              Nicht meine Idee, nicht mein Verdienst. Stammt Initial hier aus dem SELF.

              http://forum.de.selfhtml.org/archiv/2007/7/t157197/

              das ist doch unfassbar, dass solche Sachen nicht im Forum übernommen worden sind.

              Ciao, Performer

            2. Om nah hoo pez nyeetz, Kai345!

              verbesserte Lösung für moderne Browser

              .posting {  
              	background: url(pfeil-posting.png) no-repeat left bottom,  
                                  url(linie-posting.png) repeat-y left top;  
              	padding-top: 100%;  
              	padding-left: 11px;  
              	margin-left: -11px;  
              }
              
              .answers + .posting,  
              .answers-closed + .posting,  
              li:first-child > .posting  {  
              	background: transparent;  
              }
              

              mit dem Nachteil, dass entweder weit eingerückte Postings abgeschnitten werden oder häufiger als nötig ein horizontaler Scrollbalken entsteht, wegen

              #root ul {  
              	overflow: hidden;  
              	width: 90em;  
              }
              

              wer also da noch eine Lösung hat, immer her damit.

              Matthias

              --
              1/z ist kein Blatt Papier.

              1. Om nah hoo pez nyeetz, Matthias Apsel!

                verbesserte Lösung für moderne Browser

                Die aber leider nicht funktioniert, da die drüberliegenden Links nicht anklickbar sind. Also muss man doch auf die Pseudoelemente ausweichen.

                Matthias

                --
                1/z ist kein Blatt Papier.

                1. Hi,

                  die Linien begeistern mich. :-)

                  Ciao, Performer

    3. [latex]Mae  govannen![/latex]

      Der Textanzeige-Bereich (Nachricht lesen) von Postings ist mMn suboptimal gestyled, das sieht viel zu sehr wie eine Texarea aus. Verwirrt nur. Schön wäre, wenn sich dieser Bereich automatisch an die Bildschirmbreite anpassen würde. Gleiches für den Antwort-Bereich

      Eine Breitenangabe in Prozent verhindert das Funktionieren der Nested-Ansicht. Dann werden wieder wie im alten Forum die letzten Postings immer schmaler.

      Dann existiert <ol id="nested-root">, damit sollte das gezielte Ansprechen via ID-Selektor nur in der Nested-Ansicht lösbar sein.

      Zudem lässt sich Text mit einer bestimmten Zeilenbreite besser erfassen.

      Das allerdings. Tja, entweder zu breiter Text oder Code-Blöcke mit Zeilen-Umbruch. Gefällt mir beides nicht. Vielleicht so?

      Stur lächeln und winken, Männer!
      Kai

      btw: der Abstand zwischen den Threads ist zu groß *duck und renn*

      --
      var jQuery = $(hit);
      I am Pentium of Borg. Division is futile. You will be approximated.
      SelfHTML-Forum-Stylesheet