Celebboard Dark Mode

[Isthor]

Benötigt wird die Erweiterung Stylus (Chromium/Firefox)
Auf die Erweiterung und auf "Styles finden" klicken
Dann einfach den Style wählen

Erweiterung Stylem (Pale Moon)
Neuer Style hinzufügen und folgende URL eintragen: https://userstyles.world/api/style/5385.user.css

Ihr könnt den Style auch etwas anpassen:

Schriftfarbe und Größe von unbesuchten und besuchten Links ändern
Den Header (Celeb of the Month) ausblenden bzw. wieder einblenden
Den Rand um die Avatare entfernen um quadratische Bilder zu haben
1.33: Ihr könnt Themen von bestimmten Nutzern/Celebs farblich hervorheben
Bei Nutzern wird die Hintergrundfarbe und bei Celebs die Schriftfarbe verändert
Erklärung hier

Oben im Style gibt es folgenden Bereich:

:root {
/*Link color (doesn't affect all links)*/
    --link-color: #36acff;
/*Link color on hover (doesn't affect all links)*/
    --link-color-hover: #84ccff;
/*Font color of visited and not visited links*/
    --not-visited-link-color: #36acff;
    --visited-link-color: #c0dbff;
/*Font size of visited and not visited links*/
    --not-visited-link-size: 700;
    --visited-link-size: 400;
/*Header (Celeb of the month) - unset=ON none=OFF*/
    --header: none;
/*Avatar border - 50%=Standard 0%=OFF (0-50%)*/
    --avatar-border: 50%;
}

Erklärung

--link-color: Farbe von Links (betrifft nicht alle Links)
--link-color-hover: Farbe von Links bei Mouseover (betrifft nicht alle Links)
--not-visited-link-color: Farbe von unbesuchten Links
--visited-link-color: Farbe von besuchten Links
--not-visited-link-size: Größe von unbesuchten Links
--visited-link-size: Größe von besuchten Links
--header: Header (Celeb of the Month): unset=AN none=AUS
--avatar-border: Ändert den Rand der Avatare: 50%=Standard 0%=AUS (0-50%)

​

25.02.2023: 1.33
02.12.2022: 1.32
03.09.2022: 1.31
13.08.2022: 1.3
23.07.2022: 1.22

 

[DRDRE5]

Thanks! That's great

 

[hybrid]

:thumbup: :thumbup:

 

[xiaoluo]

:wow::wow::wow:

 

[Yagoo]

Sieht gut aus musste das Addon aber wieder deaktivieren da andere Seiten auf einmal fehlerhaft schwarz wurden. Geil wäre so Styles direkt im Board ändern zu können

 

[Spok007]

Geil wäre so Styles direkt im Board ändern zu können

Ich würde blau bevorzugen. Das bin ich irgendwie gewohnt wink2
Aber Spaß beiseite:
Danke für die Info, werde ich morgen mal in Ruhe testen

 

[Razor]

Der Code gilt noch für das vBulletin oder? Jetzt ist aber XenForo im Einsatz. Trotzdem Danke

 

[Isthor]

Ich habe einen Style für das neue Forum erstellt.
Noch ist es eine Beta und einiges fehlt.

 

[Buster]

mit Dark Reader erstellt

 

[deaman]

Wieso überhaupt Add-ons, können die Admins nicht bitte einfach andere Styles in den Konto Einstellungen frei geben?
In anderen Xenforo Boards sehe ich in meinen Einstellungen direkt über "Zeitzone" eine "Style" Zeile mit Darkmode, usw.

Oder sind in der Xenforo Software andere Styles etwa kostenpflichtig?! Sucht mal einer im Xenforo Herstellerforum wie die das dort so mit Styles abläuft?

 

[Glamour Girl]

Funktioniert und sieht gut aus!

 

[Jason163]

Dankeschön, das Update funktioniert ausgezeichnet

 

[Infacted]

Funzt super vielen Dank

 

[Death Row]

mit Dark Reader erstellt

Gibt es auch für Chrome. Läuft wie geschnitten Brot 👍

 

[EmmaW]

works!

 

[Hope]

Wow, sieht das cool aus!
Herzlichen Dank, daß ist fantastisch! .... Bin total begeistert, liest sich alles viel angenehmer mit den dunklen Farben.

 

[Death Row]

Ist diese Bitte an uns gerichtet? Wie sollen wir das denn machen? 🤔

 

[muad.dib]

Oh, cool. Muss ich auch gleich mal ausprobieren!

 

[Isthor]

Update 1.1 veröffentlicht mit ein paar weiteren kleinen Veränderungen.
Ihr könnt euch das Update in der Erweiterung direkt laden oder warten bis das Update nach maximal 24 Stunden automatisch geholt wird (falls ihr das Autoupdate nicht deaktiviert habt).

 

[Trashpainkiller]

Merci. Sieht gut aus.

 

[Isthor]

Update 1.2 veröffentlicht und aus der Beta geholt.

 

[Oberschwabe]

mit Pale Moon muss ich darauf verzichten? oder?
Verwende seit langem den Pale Moon, da damit der BilderHerunterlader (BH) super funktioniert und diesen möchte ich nicht missen

 

[Isthor]

Habe mir das mal angesehen.
Für Pale Moon gibt es die Erweiterung Stylem.
Neuer Style hinzufügen und folgende URL eintragen: https://userstyles.world/api/style/5385.user.css

 

[Oberschwabe]

hat super funktioniert - vielen Dank!!!"

 

[jbon]

An welcher Stelle werden im CSS die besuchten Links kodiert? Ich bin dabei mir einen eigenen Style zu bauen, basierend auf dem Dark Mode und bin da noch am Rätseln.

 

[Isthor]

Das erste für unbesuchte Links und das zweite für besuchte.

Beispielfarben:

.is-unread .structItem-title a {
    color: #36acff;
}

.structItem-title a {
    color: #f2930d;
}

Danke für die Idee die besuchten Links zu ändern.
Ich könnte das mit in mein Style nehmen damit jeder die Wunschfarben einfach wählen kann.

 

[jbon]

Danke, das funktioniert wirklich gut!
Ich finde das immer etwas übersichtlicher, dann fällt eine Änderung mehr auf.
Und das in den Style aufzunehmen

 

[Oberschwabe]

@Isthor änderst du das mit den besuchten Links in deinem Style noch?

Momentan ist mir der Unterschied zwischen den gelesenen und ungelesenen Links nicht deutlich genug, deshalb verwende ich den Style aktuell nur sporadisch.

 

[Isthor]

Update 1.21 veröffentlicht.
Farbe für besuchte Links geändert.
Ihr könnt nun die Schriftfarbe und Größe von unbesuchten und besuchten Links selbst ändern.
Oben im Style gibt es folgenden Bereich:

:root {
--not-visited-link-color: #36acff;
--not-visited-link-size: 700;
--visited-link-color: #c0dbff;
--visited-link-size: 400;
}

Farbe von unbesuchten Links
Größe von unbesuchten Links
Farbe von besuchten Links
Größe von besuchten Links

 

[jbon]

Kleiner Hinweis noch: bei den Default Farben sind manche Texte im Chat (rot) kaum lesbar

 

[Isthor]

Ja das ist ungünstig.
Eine Lösung wäre bei unlesbaren Farben die Helligkeit und Sättigung zu ändern aber dazu habe ich aktuell keine Motivation.

 

[fodi]

danke

 

[deimudder]

Funktioniert das auch mit Chrome auf Android?

 

[Isthor]

Funktioniert das auch mit Chrome auf Android?

Das weiß ich nicht.
Der Style ist für die Desktopversion der Webseite.

 

[Isthor]

Version 1.3 veröffentlicht.

Version 1.22 kam am 23.07.2022 und hatte nur ganz kleine Veränderungen deshalb habe ich die hier nicht extra angekündigt.
Version 1.3 hat ein paar größere Veränderungen.

Ich habe hier und da ein bisschen Farbe reingebracht, einigen Buttons und der Seitenauswahl ebenfalls Farben verpasst bzw. andere Farben damit nicht alles so grau ist und noch ein paar andere kleine farbliche Veränderungen.
Der Style wirkt nun allgemein wertiger (finde ich).
Außerdem könnt ihr nun den Header (Celeb of the Month) ausblenden wenn ihr möchtet.

Hier ein vorher/nachher Screenshot der Buttons

 

[Tibon]

Gefällt! Vielen Dank!

 

[ichilas]

sehr schöne, danke für die Anleitung

 

[Isthor]

Version 1.31 veröffentlicht.
Weitere Bereiche angepasst.
Ihr könnt nun die Farbe von bestimmten Links, unabhängig von den besuchten und unbesuchten Links, ändern.

Ich denke nicht das ich noch großartig was ändern werde also kann man den Style bis auf weiteres als final bezeichnen.

 

[Isthor]

Version 1.32 veröffentlicht.
Ihr könnt nun den Rand der Avatare verändern um quadratische Bilder zu haben.
Erklärung im ersten Beitrag.

 

[Isthor]

Version 1.33 veröffentlicht.
Hinweis: solltet ihr in den vorherigen Versionen bereits etwas geändert haben müsst ihr die Aktualisierung in der Erweiterung manuell anstoßen und bestätigen.
Dabei werden eure Änderungen überschrieben!
Also am besten alles sichern.

In Version 1.33 könnt ihr Themen von bestimmten Nutzern/Celebs farblich hervorheben
Bei Nutzern wird die Hintergrundfarbe und bei Celebs die Schriftfarbe verändert
Aufgrund meines CSS-Anfängerwissens bin ich hier eingeschränkt und es werden auch bestimmte Zeitangaben und andere Stellen ebenfalls in anderer Schriftfarbe angezeigt
Aber das ist das beste Ergebnis das ich bekommen habe.
Ich weiß als Erweiterung könnte man sowas viel besser machen (oder direkt in der Forensoftware) aber ich kann kein Javascript um eine eigene Erweiterung zu schreiben
Also bleibt mir nur ein Userstyle (bis man das vielleicht irgendwann direkt in der Forensoftware machen kann)

Vorschaubilder mit Beispielfarben





Anleitung

Oben gibt es den Root-Bereich
Der Teil für die farblichen Hervorhebungen ist standardmäßig auskommentiert (/* */)

/*Highlight posts of specific users - color 1*/
/*    --highlight-user-1: #121f40;*/
/*Highlight posts of specific users - color 2*/
/*    --highlight-user-2: #18462d;*/
/*Highlight posts with specific celebs*/
/*    --highlight-celeb: #d9ff00;*/

Wen ihr etwas davon nutzen möchtet müsst ihr /* */ in der jeweiligen Zeile entfernen
Beispiel:

/* --highlight-user-1: #121f40;*/
in
--highlight-user-1: #121f40;
ändern

Direkt darunter könnt ihr die Nutzer/Celebs hinzufügen

div[data-author="<User>"] {
    background-color: var(--highlight-user-1);
}

<User> mit dem Nutzer austauschen
Möchtet ihr mehreren Nutzern die gleiche Farbe zuweisen müsst ihr den Teil div[data-author="<User>"] kopieren und mit einem Komma und Leerzeichen trennen

Beispiel

div[data-author="<User1>"], div[data-author="<User2>"], div[data-author="<User3>"] {
    background-color: var(--highlight-user-1);
}

Möchtet ihr jedem Nutzer/Celeb eine eigene Farbe zuweisen müsst ihr die entsprechenden Teile kopieren und etwas anpassen

Beispiel

Oben im root

    --highlight-user-1: #121f40;
    --highlight-user-2: #18462d;
    --highlight-user-3: #18462d;

und unten

div[data-author="<User1>"] {
    background-color: var(--highlight-user-1);
}

div[data-author="<User2>"] {
    background-color: var(--highlight-user-2);
}

div[data-author="<User3>"] {
    background-color: var(--highlight-user-3);
}

Der Teil für die Celebs

div a[href*="<Celeb>"]:not(.u-concealed):not(.button--link):not(.message-attribution-gadget):not(.actionBar-action):not(.tagItem) {
    color: var(--highlight-celeb) !important;
}

<Celeb> mit dem Namen austauschen, Vorname/Nachname kleinschreiben und mit einem - verbinden
Außerdem keine Umlaute verwenden

lena-meyer-landrut
emilia-schuele

Möchtet ihr weitere Celebs hinzufügen kopiert den ganzen Teil

div a[href*="<Celeb1>"]:not(.u-concealed):not(.button--link):not(.message-attribution-gadget):not(.actionBar-action):not(.tagItem) {
    color: var(--highlight-celeb) !important;
}

div a[href*="<Celeb2>"]:not(.u-concealed):not(.button--link):not(.message-attribution-gadget):not(.actionBar-action):not(.tagItem) {
    color: var(--highlight-celeb) !important;
}

div a[href*="<Celeb3>"]:not(.u-concealed):not(.button--link):not(.message-attribution-gadget):not(.actionBar-action):not(.tagItem) {
    color: var(--highlight-celeb) !important;
}

Möchtet ihr weitere Farben hinzufügen müsst ihr beide Bereiche erweitern wie bei den Nutzern oben beschrieben

    --highlight-celeb: #d9ff00;
    --highlight-celeb-2: #d9ff00;
    --highlight-celeb-3: #d9ff00;

div a[href*="<Celeb1>"]:not(.u-concealed):not(.button--link):not(.message-attribution-gadget):not(.actionBar-action):not(.tagItem) {
    color: var(--highlight-celeb) !important;
}

div a[href*="<Celeb2>"]:not(.u-concealed):not(.button--link):not(.message-attribution-gadget):not(.actionBar-action):not(.tagItem) {
    color: var(--highlight-celeb-2) !important;
}

div a[href*="<Celeb3>"]:not(.u-concealed):not(.button--link):not(.message-attribution-gadget):not(.actionBar-action):not(.tagItem) {
    color: var(--highlight-celeb-3) !important;
}