Anleitung: Das Forum transmoggen

Um das neue Forum besser lesbar zu machen, hab ich einige Anpassungen am optischen Erscheinungsbild des Forums durchgeführt.


Was die Erweiterung bewirkt

Sämtliche Funktionen des neuen Forums bleiben erhalten.

Visuelle Anpassungen

  • Kleinere Schriftgröße
  • Weniger unnötige Abstände und Leerraum
  • Verbesserte Wahrnehmung der einzelnen Beiträge
  • Optional: Weitere Anpassungen (weiter unten)

Vorher-Nachher-Vergleich

https://i.imgur.com/4ZVMmmx.jpg

Betroffene Websites

Alle Blizzard-Foren, die auf der neuen Forensoftware basieren (z.B. Overwatch und World of Warcraft).


Installation

Schritt 1:

Installiert die Erweiterung “Stylus” in eurem Browser:


Chrome
https://goo.gl/DYvaHH

Firefox
https://goo.gl/BN81Jk

Opera
https://goo.gl/k66LPL

Schritt 2:

Ruft folgende Seite auf und klickt auf “Install Style.”

https://goo.gl/hrS1Mw

Version vom 20.11.2018 / 20:00


Optionales

Diese Anpassungen erlauben euch das Forum nach euren Wünschen zu verändern.


Mehr Bildschirmbreite nutzen:
Version vom 20.11.2018 / 20:00
https://goo.gl/yyZNH9

Kleinere Grafiken und Gifs:
Version vom 21.11.2018 / 08:30
https://goo.gl/q4wyAY

Schriftart des alten Forums:
Version vom 20.11.2018 / 20:00
https://goo.gl/d8Gwdc

Korrekte Klassenfarben anzeigen:
Version vom 20.11.2018 / 20:00
https://goo.gl/rmpRQQ

"Gespeichert"-Anzeige entfernen:
Version vom 22.11.2018 / 10:29
https://goo.gl/1Eznt2

Titel nicht in Großbuchstaben:
Version vom 24.11.2018 / 20:39
https://goo.gl/a6DdZb
26 Likes

Kannst du noch irgendwas hinzufügen, das die Smileys deaktiviert sind bzw halt als schrift angezeigt werden?

2 Likes

Kann man mit arbeiten die Schriftgröße ist dann doch etwas sehr klein wenn man mit 4K im Forum unterwegs ist, sollte sich aber anpassen lassen.

Zusätzlich hat sich bei dir aber ein kleiner Fehler eingeschlichen in Punkt 3. Und zwar benutzt du Typographische Hochkommata die von JSON als falsch verstanden werden. Hier muss das ganze auf normale doppelte Hochkommata geändert werden, so dass es folgendermaßen aussieht:
{
„manifest_version“: 2,
„name“: „WoW-Forum“,
„version“: „0.1.0“,
„description“: „“,
„content_scripts“: [{
„css“: [„styles.css“],
„js“: [„content.js“],
„matches“: [„https://eu.forums.blizzard.com/*“]
}]
}

@edit
Ich muss mich korrigieren. Der Fehler tritt nicht auf weil du ihn gemacht hast, sondern das Forum setzt die falschen Hochkommatas. Solltest du noch in dein Posting mit aufnehmen das man darauf schauen sollte.

3 Likes

Edit:
Bei der Verwendung von [ code][ /code] werden die Anführungszeichen (") korrekt dargestellt.

Links werden schon erlaubt, aber auch erst mit dem entsprechenden Trustlevel. Siehe dazu auch:

Ab Trustlevel 2 kann man Links zu Vertrauenswürdigen Seiten einstellen (Wird von Blizzard festgelegt welche das sind)

Wenn ihr mir noch etwas empfehlen könnt, um den riesigen Rand links und rechts auf ca. 2 oder 3 cm zu verkleinern, wäre ich euch unsagbar dankbar.

Gibt es da Methoden?

1 Like

An sich könnte man den Viewport des Contentcontainers per CSS verändern. Hier ist aber die Frage inwieweit das Forum das zuläßt oder ob es nicht geblockt wird.
Müßte man mal ausprobieren.

Wärst du so gütig das in den nächsten Tagen (halt wenn du irgendwann Zeit und Lust dazu hast) das auszutesten und sollte es klappen, eine kleine Erklärung für mich zu schreiben?

Ich kenne mich mit so etwas überhaupt und ganz und gar nicht aus : (

Edit Das mit den zwei farben ist so unglaublich gut ! Danke danke

Hab das alles gemacht und es geht bei mir nicht. Habe auch auf die (") geachtet.
(Manifest-Datei fehlerhadt oder nicht Lesbar)

Dein “kBByQK6.png” zeigt mir koreanische Mahlzeiten an.

Da bin ich schon am schauen. Aber nicht weil es mich stört sondern eher deswegen um auf 4K den freien Platz besser zu nutzen. Sollte ich dazu was haben gebe ich hier Bescheid.

Du musst https: //i. imgur. com kBByQK6. png (ohne leerzeichen) schreiben. um das Bild anzusehen.

Wenn du den fehlercode hast, wirst du vermutlich nicht alle " erstzt haben, in dem Fenster welches den fehlercode ausgibt hast du bei den angezeigten " dann ein ? in einer schwarzen fläche - da sind noch die alten "

Der link einmal zum anklicken.

1 Like

Das bekomme ich Angezeigt.
https: // drive.google. com/file/d/1T4rKOg2b7KQjc58HDVyooKbvKXCAfvja/view?usp=sharing

Ich hab meinem Beitrag jetzt einen Download-Link mit zweiter Anleitung hinzufügt. Versuchs mal damit.

2 Likes

Ok das hat geklappt. Der Fehler ich selbst. Ich habe nur Textdokumente erstellt und diese eben umbenannt, ich dachte das mit der umbennenung auch das Format geändert wird

Ich gehe mal davon aus, das du dir nur die Datei Namen anzeigen lässt, nicht aber die datei endungen? :smiley:

Stimmt, dann kann man etwas länger suchen woran es liegt ^^

Hast du schon eine Idee zum vergrößern des Viewports?
Hierzu gibt es in den Elementen einzelne Bereiche wie z. B. container.posts die sich aber nicht beeinflussen lassen, auch die CSS-Anweisung .modal-inner-container{min-width:700px}.desktop-view beeinflusst da nichts weiter. Sieht fast danach aus als würde man den Viewport des inneren Containers nicht beeinflussen können

Ja, ich hab es über die Entwicklertools schon geschafft.

Die Breite des Textbereichs kann mit einer max-width-Angabe beim Element #main-outlet angepasst werden. Ideal wäre hier mit %-Angaben zu arbeiten, damit alle Bildschirme optimal ausgefüllt werden. Und auch nicht zu groß, da noch etwas Platz für die Chronik (rechts) erforderlich ist.

Die Chronik selbst ist absolut positioniert und kann über das Element .timeline-container an den rechten Bildschirmrand fixiert werden. Einfach right:5% !important; zuweisen.

1 Like

Bitte einmal für deppen wie mich genau erklären was ich wo und wie eingeben hinzufügen und klicken muss. ^^ ( Ich bitte vielmals um Entschuldigung, sollte ich nerven)

Füge diese 2 Zeilen der styles.css hinzu:

#main-outlet{max-width:80% !important;}
.timeline-container{right:10% !important;}

Lade anschließend die Erweiterung neu. Das Forum nimmt jetzt 80 % der Bildfläche statt 1.280 Pixel ein.

2 Likes