Christian Kruse: Zeigt her euer Forum

Hallo zusammen,

ich war heute morgen irgendwie neugierig, was hier so für Modifikationen am Layout unterwegs sind. Deshalb dachte ich, dass ich einfach mal nachfrage. Ich mache mal den Anfang: bei mir sieht es so aus:

modifizierte Index-Seite des Forums modifizierte Posting-Ansicht des Forums

Ich habe im wesentlichen vieles ausgeblendet, die Header-Bar fixiert und die Personal-Links da reingeschoben. Außerdem verwende ich die Apple System Fonts und eine proportionale Schrift in den Postings. Das Stylesheet kann man hier einsehen: https://cloud.defunct.ch/index.php/s/QbxTbUhChXVSnjO

LG,
CK

  1. Hallo Christian Kruse,

    modifizierte Forumsansicht

    modifizierte Forumsansicht

    Hauptmerkmale sind:

    • fixierte Leisten im Kopf
    • ein fixierter Link auf der linken Seite zu /all
    • gekürzte Beschriftungen der Buttons
    • verkleinerte Bilder, die bei hover vergrößert werden
    • Silbentrennung und eine andere Schriftart für die Beiträge

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. Hallo Matthias,

      • ein fixierter Link auf der linken Seite zu /all

      Der fixierte Link gefällt mir, die Idee habe ich all schamlos geklaut 😉

      Foren-Ansicht mit fixiertem Link rechts

      Bei mir rechts (da ist eh noch so extrem viel Weißraum) mit etwas Abstand für die sich einblendende Scrollbar.

      LG,
      CK

  2. Hallo

    Ich habe mal Screenshots der selben Seiten verfertigt.

    Selfforum, Übersicht aller Foren

    Ich nutze, wie vielleicht an den Tabs zu erkennen ist, normalerweise getrennte Ansichten für die beiden Foren.

    • Benutzer-JS, das mir zeigt, wann die Übersicht wieder neu vom Server geladen wird.
    • Hervorhebung des Links zur Liste der als interessant markierten Postings.
    • Ausblendung einiger Elemente
    • Ein paar dezente Farb- und Größenänderungen

    Alternativ-Text

    • Hervorhebung des aktuell geladenen Postings im Threadbaum
    • auch hier erfolgt die Ausblendung einiger Elemente

    Tschö, Auge

    --
    Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
    Toller Dampf voraus von Terry Pratchett
  3. Aloha ;)

    ich war heute morgen irgendwie neugierig, was hier so für Modifikationen am Layout unterwegs sind.

    Bei mir ganz unspektakulär - gar keine 😉

    Ich bin nie dazu gekommen, mir Nutzer-JS /-CSS anzulegen und habe dafür nie eine Notwendigkeit gesehen, weil es für mich am Layout nix gibt, was mich so stören würde, dass ich es ändern wollen würde - und auch sonst habe ich das Gefühl alles zu haben was ich brauche.

    Schätze das spricht für zwei Dinge, aus meiner Sicht: Erstens für meine Faulheit. 😂 Zweitens dafür, dass das Layout standardmäßig zumindest für mich schon sehr vieles richtig macht.

    Grüße,

    RIDER

    --
    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
    # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    1. Hallo Camping_RIDER,

      Zweitens dafür, dass das Layout standardmäßig zumindest für mich schon sehr vieles richtig macht.

      Mir verbraucht es zu viel Platz 😜 Sieht man aber auch an meinen Modifikationen, glaube ich.

      LG,
      CK

  4. Tach!

    ich war heute morgen irgendwie neugierig, was hier so für Modifikationen am Layout unterwegs sind.

    Nur Kleinigkeiten. In der Kopfzeile hab ich einen Link zu /all hinzugefügt.

    $(function() {$('.selflinks').append($('<li><a href="/all" target="_self">/all neu laden</a></li>'))});
    

    Und folgende CSS-Änderungen:

    #message_input { resize: both !important; }
    

    Kann sein, dass die Textarea früher mal festgenagelt war, ich zieh sie aber auch selten größer. Kann vermutlich weg.

    .thread .message.active { border: 1px solid #00a1e2; }
    

    Damit ich sehe, wo im Baum das aktuelle Posting ist (bin Thread-Ansicht-Leser).

    a.thread-forum-plate { color: white; background-color: silver; }
    

    Farbe des Forumsnamens im Baum. Kann vermutlich auch weg.

    a.thread-forum-plate[href='/intern'] { background-color: wheat; }
    

    Intern-Postings etwas auffälliger kennzeichnen.

    #user-info .score { display: none; }
    

    Keine Anzeige der Punkte.

    .cf-pages:first-child { display: none; }
    

    Keine Anzeige der Seiten-Navigation im oberen Teil.

    dedlfix.

    1. Hallo,

      #user-info .score { display: none; }
      

      Ich habe im wesentlichen

      #user-info .score {
      	position: fixed;
      	font-size: 90vh;
      	color: #f6b00780;
      	left: 0em;
      	top: 0em;
      	line-height: 1em;
      }
      

      ;)

      Gruß
      Kalk

      1. Aloha ;)

        Ich habe im wesentlichen

        #user-info .score {color: #f6b00780;}
        

        Sind da nicht ein paar Ziffern zu viel?

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        1. Hallo,

          Sind da nicht ein paar Ziffern zu viel?

          die bekam ich allesamt vom Farbwähler der Firefox-Entwicklertools geliefert, da ist Transparenz mit bei.

          Gruß
          Kalk

          1. Aloha ;)

            Sind da nicht ein paar Ziffern zu viel?

            die bekam ich allesamt vom Farbwähler der Firefox-Entwicklertools geliefert, da ist Transparenz mit bei.

            So etwas dachte ich mir. Chrome versteht die Angabe nicht (invalid property value) und ich hab auch mit einer kurzen Stichwortsuche nicht rausgefunden, dass es Hexadezimal-Farben mit Transparenz schon (standardisiert) gibt.

            Mich hat einfach nur interessiert, ob ich (und das Wiki) da einen gültigen Standard verpasst haben.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        2. Hi,

          #user-info .score {
          	color: #f6b00780;
          }
          

          Sind da nicht ein paar Ziffern zu viel?

          2 für rot, 2 für grün, 2 für blau, 2 für opacity. Paßt doch.

          cu,
          Andreas a/k/a MudGuard

          1. Aloha ;)

            #user-info .score {
            	color: #f6b00780;
            }
            

            Sind da nicht ein paar Ziffern zu viel?

            2 für rot, 2 für grün, 2 für blau, 2 für opacity. Paßt doch.

            Inhaltlich ist mir das klar. Aber wo ist das standardisiert? (Siehe auch die andere Antwort)

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. Hallo,

              Inhaltlich ist mir das klar. Aber wo ist das standardisiert?

              den einzigen Hinweis auf „HEXA-Colors“, habe ich beim Colorpicker entdeckt.

              Gruß
              Kalk

              1. Hallo,

                den einzigen Hinweis auf „HEXA-Colors“

                jetzt auch hier gefunden

                Gruß
                Kalk

              2. Hallo Tabellenkalk,

                den einzigen Hinweis auf „HEXA-Colors“, habe ich beim Colorpicker entdeckt.

                Nicht beim Schmidtchen, beim Schmied musst du gucken: CSS Color Module Level 4

                Bis demnächst
                Matthias

                --
                Rosen sind rot.
                1. Aloha ;)

                  Nicht beim Schmidtchen, beim Schmied musst du gucken: CSS Color Module Level 4

                  Ah. Editors Draft. Das erklärts natürlich. Ich freu mich drauf, wenn die Browser das geschlossen umsetzen - dann muss ich endlich nicht mehr von HEX auf RGBA umdenken 😉

                  Danke fürs Raussuchen.

                  Grüße,

                  RIDER

                  --
                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                  # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[