Celebboard Dark Mode

Isthor

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
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:

Code:
: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
 
Zuletzt bearbeitet:

Yagoo

V:I:P
Registriert
30 Juli 2010
Themen
448
Beiträge
632
Reaktionen
224
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
 

Razor

Neuling
Registriert
3 Nov. 2008
Themen
8
Beiträge
17
Reaktionen
0
Der Code gilt noch für das vBulletin oder? Jetzt ist aber XenForo im Einsatz. Trotzdem Danke (y)
 

Isthor

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
Ich habe einen Style für das neue Forum erstellt.
Noch ist es eine Beta und einiges fehlt.
 

deaman

Special Member
Registriert
26 Juni 2009
Themen
38
Beiträge
1.803
Reaktionen
5.074
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

Böse Hexe des Westens
Registriert
7 Juni 2022
Themen
2
Beiträge
208
Reaktionen
496
Funktioniert und sieht gut aus! :thumpup)

n062.gif
 

Jason163

Neuling
Registriert
12 Juni 2022
Themen
0
Beiträge
15
Reaktionen
4
Dankeschön, das Update funktioniert ausgezeichnet :)
 

Hope

Active Member
Registriert
5 Juli 2022
Themen
0
Beiträge
181
Reaktionen
534
Wow, sieht das cool aus!
Herzlichen Dank, daß ist fantastisch! .... Bin total begeistert, liest sich alles viel angenehmer mit den dunklen Farben.
 

Death Row

Super-Moderator
Teammitglied
Registriert
31 Aug. 2012
Themen
454
Beiträge
7.464
Reaktionen
1.686
Ist diese Bitte an uns gerichtet? Wie sollen wir das denn machen? 🤔 :confused)
 

muad.dib

Durchstarter
Registriert
20 Juni 2022
Themen
0
Beiträge
25
Reaktionen
59
Oh, cool. Muss ich auch gleich mal ausprobieren! (y)
 

Isthor

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
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).
 

Oberschwabe

V:I:P
Registriert
12 Aug. 2008
Themen
16
Beiträge
3.761
Reaktionen
566
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 ;)
 

jbon

Special Member
Registriert
8 Jan. 2019
Themen
11
Beiträge
834
Reaktionen
2.670
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

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
Das erste für unbesuchte Links und das zweite für besuchte.

Beispielfarben:

Code:
.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.
 
Zuletzt bearbeitet:

jbon

Special Member
Registriert
8 Jan. 2019
Themen
11
Beiträge
834
Reaktionen
2.670
Danke, das funktioniert wirklich gut!
Ich finde das immer etwas übersichtlicher, dann fällt eine Änderung mehr auf.
Und das in den Style aufzunehmen :thumpup)
 

Oberschwabe

V:I:P
Registriert
12 Aug. 2008
Themen
16
Beiträge
3.761
Reaktionen
566
@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

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
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:

Code:
: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
 
Zuletzt bearbeitet:

jbon

Special Member
Registriert
8 Jan. 2019
Themen
11
Beiträge
834
Reaktionen
2.670
Kleiner Hinweis noch: bei den Default Farben sind manche Texte im Chat (rot) kaum lesbar
 

Isthor

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
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.
 

deimudder

V:I:P
Registriert
25 Okt. 2015
Themen
11
Beiträge
3.327
Reaktionen
3.519
Funktioniert das auch mit Chrome auf Android?
 

Isthor

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
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

 

Isthor

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
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

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
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

V:I:P
Registriert
4 Dez. 2009
Themen
2.349
Beiträge
2.812
Reaktionen
3.087
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 (/* */)

CSS:
/*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

CSS:
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

CSS:
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

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

und unten

CSS:
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

CSS:
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

CSS:
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

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

CSS:
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;
}
 
Oben