foobar-users.de in noch schlankerem Design

[blackritus]

Hallo zusammen,
dieser Beitrag, in dem es nur um eine einfache Farbänderung geht, hat mich auf die Idee gebracht, doch in dem ohnehin zum Glück schon schlicht gehaltenen Forendesign noch ein wenig nachzubessern (ist natürlich Ansichtssache). Ihr kennt das ja von euren Foobar-Designs 

Dabei habe ich nur vertikale Abstände verkleinert und den Neuigkeiten-Kasten sowie das Info-Center ausgeblendet. Außerdem sind in der Übersicht die Beitragsmarkierungen "heute" und "gestern" rot.
Das Ganze funktioniert über ein Browser-Addon namens Stylish (Firefox, Chrome, Opera, Safari), das es einfach nur ermöglicht, im Stylesheet (CSS-Datei) einer Webseite Änderungen vorzunehmen. Das bedeutet auch, dass das rein clientseitig passiert und somit trotzdem immer alle Elemente geladen werden. Ihr spart also keinen Traffic. Elemente werden nur verschoben / verkleinert / ausgeblendet.

Ihr könnt einzelne Änderungen entfernen und den Rest behalten, indem ihr einfach die entsprechenden Abschnitte im Code löscht (ist kommentiert).
Kritik / Fehlermeldungen sind natürlich auch willkommen, aber ehrlichgesagt habe ich das nur für mich erstellt und wollte es euch nicht vorenthalten 

Viel Spaß
blackritus

Vorschau (Original auch im Anhang)


Addon installieren, dann "für foobar-users.de" neuen Style erstellen und folgendes nach der letzten sich öffnenden Klammer (falls vorhanden) einfügen:

Code Auswählen Erweitern

  /* oberster Rand */
  body { padding-top:4px !important; }
 
  /* Navileiste vertikal komprimieren */
  #top_section,
  #upper_section,
  #top_section > div.frame,
  #header > div.frame  { margin-bottom:0 !important; padding-bottom:0 !important; }
 
  #upper_section { margin-top:-16px !important; }
 
  #upper_section div.news { width:30% !important; }
  #upper_section div.user { width:70% !important; }
 
  #upper_section > .user > .reset li:nth-of-type(n+2)  { float:left !important; padding-right:12px !important; }
 
  .navigate_section { padding-bottom:0 !important; }
  .navigate_section > ul {padding:0.3em 0 0 0 !important;}

  /* NEUIGKEITEN ausblenden */
  #newsfader { display:none !important; } 
 
  /* Footer & Info-Center ausblenden */
  #footer_section div.frame { padding-top:44px !important; }
  #footer_section div.frame > .reset { display:none !important; }
 
  .description, .description_board, .plainbox { padding:0 1em !important; }

  #main_content_section > span.clear.upperframe,
  #main_content_section > div.roundframe,
  #main_content_section > span.lowerframe  { display:none !important; }
 
  .mark_read .buttonlist.floatright > ul { margin:0 !important; padding:0 !important; }

  /* alle "heute" und "gestern" rot anzeigen */
  .table_list .lastpost strong:nth-of-type(2),
  .table_grid .lastpost strong  { color:#F00 !important; }

[blackritus]

Achso, ja. Wenn ich Javascript aktiviert hätte, hätte ich auch bemerkt, dass man den recht großen Header auch einfach mit einem Klick rechts auf dem Pfeil neben "foobar2000 spielt Musik" verkleinern kann. Allerdings ist dann auch die Suche weg :-/

[blackritus]

"Sicherheits"-Update, falls jemand drüber stolpert:
Das Addon Stylish wurde inzwischen an SimilarWeb übergeben/verkauft, ein DataMining-Unternehmen. In der Standardeinstellung unter Chrome wird jetzt deine ganze History an SimilarWeb geschickt. Das lässt sich in den Optionen abstellen.

Firefox ist bisher (Version 2.0.7) nicht betroffen und wird wohl auch nie betroffen sein, weil das den Mozilla-Richtlinien nicht enspricht und nicht verifiziert wird. SmiliarWeb hat noch nicht mal den Versuch gewagt, es einzureichen. Trotzdem kann man zur Sicherheit das Auto-Update für dieses Addon abstellen.

Alternativen:
Osprey (Chrome)
Stylus (Chrome, ein Fork der alten Version)

Stylrrr (Firefox, aber nicht so komfortabel)