Tanelorn.net

Medien & Phantastik => Multimedia => Multimedia - Software & Betriebsysteme => Thema gestartet von: oliof am 21.10.2013 | 11:28

Titel: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 21.10.2013 | 11:28
Hallo,
aus einem Wunsch (http://www.tanelorn.net/index.php/board,2.0.html) heraus habe ich mir etwas CSS zusammengeklöppelt, das für mich die Lesbarkeit des Forums immens erhöht. Es funktioniert mit der Chrome-Extension Stylish (https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=de), die es aber auch für andere Browser (https://addons.mozilla.org/en-US/firefox/addon/stylish/) gibt.

Das Design ist nicht schön (sondern auf Lesbarkeit optimiert), es gibt noch einige grobe Kinken (vor allem in Bereichen die ich nicht benutze und bei den Menüs), aber es funktioniert. Neben der Lesbarkeit habe ich das neu-icon durch eine Farbmarkierung ersetzt, und die online/offline Marker auch durch Farbmarkierungen ersetzt (hauptsächlich weil die icons auf meinem hochauflösenden Bildschirm nicht gut aussehen).

Die CSS findet ihr auf github (https://gist.github.com/oliof/7086147). Benutzung auf eigenes Risiko, keine Garantie für Funktion etc. Verbesserungen und Ergänzungen werden gerne entgegengenommen!

Eine Anleitung für stylish kann ich auf Anfrage nachliefern, aber nicht vor Mittwoch.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: Wawoozle am 21.10.2013 | 11:31
Und wer gerade schon Stylish installiert und sich damit beschäftigt hat, der kann mit folgenden Änderungen die Last5 und die Sub-Ordnerliste verkleinern:

#recent_posts_content {
    font-size: 8pt;
}

.sub_boards {
    font-size: 8pt;
}
Anstelle von pt können selbstverständlich auch % genommen werden.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 21.10.2013 | 11:37
Screenshot (https://lh6.googleusercontent.com/-sepln5l82Kk/UmUB5wNbGJI/AAAAAAAB37w/cRrIimiWR38/w1280/Screenshot+2013-10-21+at+12.28.37.png)
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 21.10.2013 | 11:40
Wichtige Anmerkung: Das ganze ist nur auf Basis des moon-theme getestet! Wie es sich mit SMF Standard Theme / Sun verhält, weiss ich nicht.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: evil bibu am 21.10.2013 | 11:47
Funzt. Danke Oliof.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: D. Athair am 21.10.2013 | 11:59
... kann den Screenshot leider nicht sehen.
Fehlermedlung: Diese Webseite hat eine Weiterleitungsschleife [...]
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 21.10.2013 | 12:32
@Athair versuchs nochmal, ich hab das Bild jetzt anders verlinkt.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 21.10.2013 | 12:34
Update!

Alle "neu" icons werden jetzt ersetzt. Vorschau auch in neuem Look.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: Galotta am 21.10.2013 | 12:37
sieht gut aus!
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: Shadom am 21.10.2013 | 13:25
Funktioniert übrigens auch sehr gut mit der Chroma App "Stylebot".
Einfach da auf open Stylebot
Edit CSS
und reinkopieren.

Finde die Aktion toll.
Mir ist das Design leider einen Deut zu schlicht und daher bleibe ich beim Original
(oder ich mach mir mal die Mühe weiß durch ein paar andere Farben zu ersetzen)
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 21.10.2013 | 15:34
Update!

Habe einige der Icons durch einen Gang mit der Kettensaege durch Font-Symbole ersetzt.

Das neue CSS funktioniert nur mit einer Schrift, die diese Font-Symbole beinhaltet.

Neue Version: http://pastebin.com/04GkeXjY (passe auch den ersten Font an).

Shadom: Wie gesagt, das ist halt auf Kontrast getrimmt. Es sollte aber einfach sein, die Farben durch was anderes zu ersetzen.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 21.10.2013 | 17:53
Update!

Die CSS ist jetzt auf github (https://gist.github.com/oliof/7086147), wer sich also berufen fühlt kann seine eigenen Verbesserungen einfliessen lassen.

Ich habe jetzt einen leichten Eierschalenton ergänzt, damit Shadom und andere denen weiss zu weiss ist, auch glücklich werden können. Der allgemeine Lesebereich bleibt allerdings erstmal schwarz/weiss.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: mieserwicht im Forum am 21.10.2013 | 19:52
Ich habe den Beitrag mal aus dem TS-Wunschlisten Thread verlinkt.

Der Oliof hat hier (http://www.tanelorn.net/index.php/topic,86749.0.html) einen Hack veröffentlicht, mit dem man das Layout zu hohem Kontrast zwingen kann. Lässt sich auf Wunsch auch zu anderen Schweinereien nutzen.

Wir vom TS finden diese Aktion ungeheuerlich... Unsere schöne und langwierige Arbeit einfach so zunichte zumachen!  :Ironie:
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 21.10.2013 | 21:00
Ich bin auch gemein, erfülle mir meine Wünsche selbst (-:

Ich hab noch ein paar weitere Details angehübscht -- es fehlen aber noch ein paar Details (die Post-Beschreibungs-Icons sind ... viele (-: ).

Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 22.10.2013 | 09:54
Update: Jetzt mit ein paar Rundungen.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 22.10.2013 | 18:22
Update: Mehr Icons ersetzt, mit Tabellenformatierung begonnen.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 22.10.2013 | 18:53
Und ein aktueller Screenshot im Anhang.

[gelöscht durch Administrator]
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 22.10.2013 | 19:07
So, das war noch nicht fertig. Jetzt mit monochromatischer header Grafik.

[gelöscht durch Administrator]
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 23.10.2013 | 00:40
Update!

Ich bin bei mittlerweile 1007 Zeilen CSS (mit Kommentaren und lesbar formatiert), und fange an mit Spielereien wie Schatten und Transparenzen zu arbeiten. Für mich und ein oder zwei andere funktioniert das monochromatische Kontrast-Theme jetzt ziemlich gut.

Einen vorher/nachher Vergleich zum Moon Theme, von dem dieses ja abgeleitet ist, kann man hier (https://plus.google.com/photos/109800248650045926499/albums/5937716103666639601/5937716139332291826?authkey=CLnhsPzTy9z02wE&pid=5937716139332291826&oid=109800248650045926499) sehen.

Ab jetzt ist es nur noch Fleißarbeit, auch jedes Detail zu erfassen ...
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 23.10.2013 | 17:01
Update!

Jetzt mit Support für Sun, sodass man in den Genuss des automatischen Sun/Moon Wechels kommen kann.
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: Shadom am 23.10.2013 | 18:02
Sehr gut!
Da hab ich jetzt wirklich per suchen und ersetzen Weiß durch Eierschale ausgewechselt und bin sehr glücklich!
 :d :d
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 24.10.2013 | 10:12
Update!

Verschiedene Änderungen und Korrekturen ...

Ausserdem habe ich eine Variante (https://gist.github.com/oliof/7127498) des User CSS, die die Beiträge komplett umformatiert (geht davon aus, dass man Avatare deaktiviert hat).

(und da müssen noch ein paar der quickbuttons verschoben werden, sehe ich gerade (-: )
Titel: Re: Tanelorn mit Kontrast! (User CSS für kontrastreiches Lesen)
Beitrag von: oliof am 25.10.2013 | 00:42
Update!
Die aktuelle Fassung des SMF2 redux (https://gist.github.com/oliof/7127498) getauften user styles funktioniert jetzt auch mit dem Rollenspiel Blogger Forum (http://forum.rsp-blogs.de) Eurer Wahl (-: Ich habe die Beiträge in Diskussionsfäden noch ein bißchen mehr kondensiert, habe aber ausser auf Chrome nicht probiert, ob das tut.