va-classic: Eine Lösung, um VoodooAlert mit klassischerem Layout zu betreiben

Aktuelles Update:

2018-07-03: Ein Wort der Warnung: Es empfiehlt sich, keine Version der Stylish Extension mehr zu installieren, die neuer als 2.0.7 (Gecko-Browser wie Firefox) oder 1.5.2 (Chromium-Browser wie Google Chrome) ist. Es hat sich herausgestellt, daß diese Versionen nicht nur nicht mehr quelloffen sind, sondern auch Spionagesoftware beinhalten, die gefährlicherweise Nutzerdaten stiehlt. Mein Dank für die Meldung gilt [Umlüx]. Alternativen sind untenstehend angeführt.

Ab heute (2018-05-19) liegt die VA-Classic CSS Skin für Voodooalert in zwei Versionen vor: Eine für die Stylus Browser Extension für Gecko (z.B. Firefox) und Chromium, die auf der GUI ein Zuweisen der URL ("https://www.voodooalert.de") erlaubt, und eine für ältere Gecko und Goanna (z.B. Palemoon) Browser mit altem Stylish ≤ 2.0.7 oder Stylem, die keine derartige GUI aufweisen. Bei letzterer Version ist die URL direkt im CSS Code hinterlegt. Downloads:

• VA-Classic für Stylish ≤ 2.0.7 und Stylem @ Goanna/Gecko ohne WebExtensions (z.B. Palemoon 27.9.1 oder Firefox ≤ 47): [VA-Classic] (ohne GUI-seitige URL Konfiguration)
• VA-Classic für Stylus @ Gecko mit WebExtensions (z.B. Firefox ≥ 48) & Chromium: [VA-Classic] (mit URL Konfiguration auf der GUI)

Bevor man das Ding nutzen kann, muß man also die Stylish Extension installieren. Die gibt es [hier] für moderne Gecko/Goanna Browser (Firefox, Waterfox, Palemoon, K-Meleon, SeaMonkey), [hier] für ältere Gecko/Goanna Browser ohne Webextension Support, und [hier] für Chromium Browser (Chrome, SRware Iron, Vivaldi).

Um den Stylesheet nutzen zu können, muß zuerst eine entsprechende Borwser Extension installiert werden. Nach dem Entlarven der Stylish Extension als Spionagesoftware ergeben sich folgende Möglichkeiten, den Stylesheet weiter zu nutzen:

• Chromium: [Stylus] (Fork von Stylish 1.5.2)
• Gecko mit WebExtension Support (z.B. Firefox ≥ 48): [Stylus] (Fork von Stylish 1.5.2)
• Gecko ohne WebExtension Support (z.B. Firefox ≤ 47): [Stylish 2.0.7] (letzte als sicher geltende Version!)
• Goanna ohne WebExtension Support (z.B. Palemoon 27.9.1): [Stylem] (Fork von Stylish 2.0.7)

Nach der Installation kopiert man den Textinhalt der .css Datei in die Zwischenablage, legt in Stylus/Stylem einen neuen Style an, und kopiert den Inhalt in das große CSS Eingabefeld. Untenstehend findet ihr zwei Screenshots, die veranschaulichen sollen, welche VA-Classic Version ihr braucht.

(links: Eine moderne Stylus Version mit GUI Konfig, rechts die ältere Stylem/Stylish Implementierung)

Wenn der Stil bei euch nicht angewendet wird, habt ihr wahrscheinlich nur die falsche VA-Classic Version erwischt, oder euch bei der URL vertippt. Wenn ihr euch aber sicher seid, daß die Konfig paßt, und es trotzdem nicht greift, einfach melden!

Der VA-Classic CSS Stylesheet wird laufend aktualisiert, die Dateinamen aber ändern sich nicht. Man bekommt unter den Downloadlinks oben also immer die aktuellste Version des Stylesheets geliefert!

Ursprünglicher Beitrag, der hier stand:

Aufgrund des modernen Designs von VA seit dem WBB Upgrade sehe ich Handlungsbedarf in der Anpassung des ganzen. Ich habe heute damit begonnen, ein Stylish Stylus/Stylem CSS3 Stylesheet zu bauen, welches das Design des Forums maßgeblich verändert. Eingespielt wird das CSS einfach per lokal im Browser installierter Stylish Stylus/Stylem Extension (gibt's für alle Chromium und Gecko/Goanna Browser wie Firefox). Erste, sehr frühe Ergebnisse s.u.:

Im Endeffekt versuche ich durchgehend ein klassischeres, weniger platzverschwendendes Design über VA zu stülpen, angenähert an das Original. Dazu gehören weniger ungenutzte freie Flächen, geringere Abstände zwischen Objekten, eckige Avatare die nicht größer sind als im VA Original und so weiter und so fort.

Das ganze kann natürlich nur visuelle Komponenten beeinflussen, keine funktionalen, die auf der Serverseite behandelt gehörten. Aber zumindest läßt sich so der Look optimieren. Zudem ließe sich ein fertiges Stylesheet auch leichter vom Benutzer lokal tunen, anstatt alles von vorne schreiben zu müssen, sozusagen als "Basis" für weitere Modifikationen je nach Geschmack des jeweiligen Nutzers.

Wenn Interesse an dem Zeug bestünde, würde ich es nachhaltiger und forcierter weiterentwickeln, und das Stylesheet nicht nur für Firefox, sondern auch für Chromium-Browser warten. Allerdings ist das ein Haufen Arbeit, daher mache ich da nur weiter, wenn es wirklich jemanden juckt.

Die Stylish Extension selbst gibt es hier: [Für Chromium Browser][Für Gecko/Goanna Browser] (Es gäbe Stylish auch für Opera 12, aber der funktioniert sowieso nicht mehr mit dem neuen WBB.)

Ich fasse keine Farben an und baue auch kein themespezifisches CSS. Farben sind ganz klar Themesache, und gehen mich nichts an. Solange die grundsätzlichen CSS Klassen nicht themeübergreifend anders sind (schaut nicht danach aus) sollte das mit allen Themes klappen. Würde ich natürlich noch testen, ich bin ja erst seit kurzem dran. Es ist aber klar so, daß ich kein Theme ausgrenzen will, das es aktuell gibt.

Es ist halt bei weitem noch nicht alles "sauber", das würde dann schon einige Zeit brauchen bis es brauchbar wird.

Ob das mobile Theme beeinflußt wird (ich glaub's nicht) wäre auch noch zu beäugen. Sollte natürlich nicht passieren, weil das mobile ist denke ich ganz gut so, wie es ist.

Eventuell werde ich morgen Mal ein erstes (sicher noch sehr unvollständiges) File bereitstellen.

Ich habe derweilen die "Hottest Threads" und "Latest Posts" Boxen komplett rausgerissen aus der Forenübersicht, die braucht man mit der Notificationglocke oben und den roten Overlayicons sowieso nicht mehr?

Hier zwei Screens, einmal in "relativ klein", um die Responsiveness des modifizierten Designs zu testen, und einmal etwas fetter:

Natürlich besteht da weiterhin massiver Optimierungsbedarf, ist eben noch 0-Day.

Edit: Editor und Thread Display deutlich kompakter gemacht (auch die Buttons, beginnt schon alles langsam weniger Pixel zu verschwenden):

151 Zeilen CSS sind's schon.

Edit 2: 176 Lines in, war aufwendig, aber jetzt ist die Top Bar revisioniert, um weniger vertikalen Platz zu verbrauchen. Morgen werde ich definitiv den ersten Prerelease bereitstellen:

2018-07-03: Warnung! In diesem Post wird eine moderne Version der Stylish Extension referenziert. Diese ist aufgrund von Spionagesoftware in der Extension nicht mehr zu nutzen, statt dessen empfehlen sich sichere Forks wie Stylus oder Stylem, siehe Startpost.

Also, ich stelle hiermit eine erste Version zur Nutzung online. Das ist allerdings für alte Mozilla Browser bzw. das alte Stylish 2.x gedacht. Wenn man den Style z.B. in Firefox 60 mit Stylish 3.0 lädt, dann sind der Header und eine abschließende Klammer zu entfernen, wie in Chromium! Also diese Codeteile müssen dann weg: @-moz-document domain("www.voodooalert.de") { und die letzte }.

Zuerst aber Mal einige Screenshots, damit ihr wißt, was ihr da überhaupt kriegt:

Ok, hier der Download der .css Datei: [va-classic.css] (Links jetzt im ersten Post).

Die aktuellste Stylish Extension für Firefox und andere Gecko/Goanna Browser bekommt ihr wie gesagt [hier]. Mit Chromium habe ich noch gar nicht getestet.

Wie geht das jetzt? Das hängt von der Version der installierten Stylish Extension ab. Am besten erzeugt ihr einen neuen Style, weist ihn der Domäne "https://www.voodooalert.de" zu, kopiert das ganze CSS rein und speichert das. Alte Versionen von Stylish haben diese Domänen-Zuweisung noch nicht auf der GUI, die brauchen dann den @-moz document Header.

Getestet wurde das bisher mit Palemoon/New Moon 27.9.1 auf XP x64, Palemoon 27.9.1 auf Linux und Firefox 60 auf FreeBSD UNIX. Das 2018er und das 2004er Theme wurden in den Test einbezogen, aber man kann die Testerei bestenfalls als "sehr oberflächlich" bezeichnen.

Es ist zu erwarten, daß noch so einiges mit dem Style NICHT paßt.

Heute habe ich noch die Notifications, die Popup Menüs, die dynamische Breite des Forums und ein paar andere Kleinigkeiten wie Pins, Avatartuning usw. übernommen, sowie Text- und Listenadaptionen im Control Center.

Is keine kleine Baustelle, so ein Stylesheet, vor allem wenn man CSS nebenher noch anlernen muß. Bald hat der Kack schon 400 Zeilen!

Hier der aktuelle plain CSS Quellcode (kein Anspruch auf "Sauberkeit" oder "CSS Best Practices", ich kenn mich ja nicht aus mit der Scheiße!) => Geschnitten, da die maximale Postlänge überschritten wurde. Der aktuelle Quelltext ist dem Startpost zu entnehmen.

Stimmt, das muß wohl daran liegen, daß ich irgendeinen modernen CSS Standard verletze, in dem es kein unset mehr gibt. Das inherit funktioniert als Ersatz aber ebenso, hab's schon ausgetauscht. Jetzt grade eeendlich geschafft, die vertikalen Postabstände wie gewünscht zu reduzieren, damit da nicht so viel leerer, ungenutzter Platz zwischen den Posts im Thread verbleiben muß. Der Part hat mich gefuchst, während mich Bier.jpg im IRC mit permanenten Feature Requests bombardiert hat! (Waren aber auch mehrere nützliche dabei).

Die Datei einfach [neu herunterladen] (Links jetzt im ersten Post), ich aktualisiere laufend.

Ist natürlich sehr auf das getuned, was ich selber sehen will, also das wird sicher nicht jeden so rundum zufriedenstellen, vor allem die global reduzierte line-height, die dann nur stellenweise on demand hochgestellt ist.

Aber immerhin sind Posts jetzt schön dicht gepackt.

Feedback (technisch wie positiv und auch negativ) ist natürlich gewünscht!

Tweakstone: Andere Foren haben dazu alternierende Farben, wo z.B. alle ungeraden Posts einen Tick heller sind als die geraden. Das eignet sich super, um die einzelnen Beiträge voneinander abzugrenzen. Ich glaub nur nicht, daß ich das hier reinbringe.. und eigentlich will ich ja an der Farbgebung nichts antasten (das Entfernen des farbigen Quaders unter'm Nutzeravatar war dahingehend noch ok, aber den ganzen Posthintergrund ändern, das will ich ned.

Mal schaun ob ich noch eine bessere Lösung zum Separieren der Posts finde.

Das geht natürlich schon (habe ich mir vor einigen Minuten auch selbst überlegt). Frage is ob das in allen Themes optisch ansprechend wirkt. Aber ich teste rum damit, Linienverdickung eingeschlossen.