Forum dunkler Hintergrund
- Ersteller Kusarr
- Erstellt am
BenRo
Software-Overclocker(in)
In Chrome zB Rechtsklick+Element untersuchen auf den hellen Bereich, finden welche CSS Klasse den Hintergrund ("background") definiert. Dann ein entsprechendes Plugin (gibt mehrere) installieren, eine angenehme Farbe finden (gibt Tabellen mit Farbwerten online, wenn man kein Hexadezimal lesen kann), dann per Plugin die neue Farbe für die CSS-Klasse definieren. Sollte nicht so schwer sein.
Edit: Wenn ich am Wochenende etwas Zeit habe, mach ich gerne ne ausführliche Anleitung mit Bildern.
Edit: Wenn ich am Wochenende etwas Zeit habe, mach ich gerne ne ausführliche Anleitung mit Bildern.
Zuletzt bearbeitet:
Bunny_Joe
BIOS-Overclocker(in)
In Chrome zB Rechtsklick+Element untersuchen auf den hellen Bereich, finden welche CSS Klasse den Hintergrund ("background") definiert. Dann ein entsprechendes Plugin (gibt mehrere) installieren, eine angenehme Farbe finden (gibt Tabellen mit Farbwerten online, wenn man kein Hexadezimal lesen kann), dann per Plugin die neue Farbe für die CSS-Klasse definieren. Sollte nicht so schwer sein.
Edit: Wenn ich am Wochenende etwas Zeit habe, mach ich gerne ne ausführliche Anleitung mit Bildern.
Bitte!
efdev
PCGHX-HWbot-Member (m/w)
Am besten mal einen Thread da aufmachen : http://extreme.pcgameshardware.de/pcgh-extreme-forum-nur-feedback-zum-forum/94
Die Idee klingt nicht Schlecht vielleicht lässt sich das Umsetzen, gerade Abends empfinde ich den Hintergrund auch eher Anstrengend und Nervig geht bestimmt auch noch vielen anderen so.
Oder das Thema in einem der Beiden Threads ansprechen ich wüsste jetzt nicht welcher wirklich Passend würde ist immerhin ein etwas Spezielleres Thema:
feedback zum redesign
verbesserungsvroschläge
Die Idee klingt nicht Schlecht vielleicht lässt sich das Umsetzen, gerade Abends empfinde ich den Hintergrund auch eher Anstrengend und Nervig geht bestimmt auch noch vielen anderen so.
Oder das Thema in einem der Beiden Threads ansprechen ich wüsste jetzt nicht welcher wirklich Passend würde ist immerhin ein etwas Spezielleres Thema:
feedback zum redesign
verbesserungsvroschläge
Zuletzt bearbeitet:
BenRo
Software-Overclocker(in)
Ich hab mir das nun mal näher angeschaut, es ist wirklich nicht schwer.
Man benötigt das Browser-Plugin "Stylish", das es sowohl für Chrome als auch Firefox gibt.
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=de
Nach der Installation findet sich rechts oben ein S-Symbol, das Logo von Stylish, bei mir war kein Neustart des Browsers notwendig:
Erstmalige Einrichtung – Die folgenden vier Schritte fallen nur einmalig an, später erkennt Stylish das Forum dann automatisch, wenn alles klappt:
1. Man ruft das Forum auf und klickt das Stylish-Logo (S-Symbol rechts oben) an, dann auf den untersten Link: "Style erstellen für: extreme.pcgameshardware.de/diese URL".
2. Es sollte darauf geachtet werden, dass im Feld "URLs auf der Domain" korrekt "extreme.pcgameshardware.de" steht – ohne das extreme. bezieht sich das alles auch auf die PCGH-Hauptseite!
3. Dann werden die neuen CSS-Designinformationen in das Hauptfeld geschrieben (mehr Infos weiter unten). Hier ist ein Beispiel zum rauskopieren – dies ist ein möglichst simples Beispiel Grün-auf-Schwarz, wer etwas ein wenig harmonischeres haben will, bitte ganz nach unten scrollen:
4. Zu guter Letzt muss links oben ein Name eingegeben werden (beliebiger Name, ich habe "PCGH" genommen) und auf Speichern geklickt werden:
Das ganze sollte sofort aktiv sein, was an der rot hinterlegten "1" im S-Symbol/Stylish-Logo des Browsers sichtbar ist. Dort kann man den Style auch deaktivieren, falls es Probleme gibt, indem man einfach auf das S und dann auf das Kontrollkästchen klickt. Ein Neuladen der Seite ist zur Aktivierung/Deaktivierung nicht notwendig.
Ergebnis:
Da vermutlich nicht jeder grün auf schwarz haben will, hier nun die Informationen, wie eigene Farben gesetzt werden können:
Ich werde hier keine Einführung in CSS geben, wer mehr will bzw. die Hintergründe verstehen will, möge "CSS Tutorial" oder ähnlich googeln. Daher nur in aller Kürze:
- Die Zeile mit background-color bezieht sich auf die Hintergrundfarbe, die Zeile color auf die Textfarbe.
- Darauf achten, dass die CSS-Anweisungen mit einem Semikolon ; am Ende der Zeile enden
- Die Einrückung mit Leerzeichen/Tabs dient nur der Übersichtlichkeit und ist egal, macht euch hier keinen Kopf
- Die Farben werden im RGB (Rot-Grün-Blau)-Farbraum angegeben und zwar mit Werten zwischen 0 und 255, ein kräftiges Rot wäre
ROT: 255
GRÜN: 0
BLAU: 0
Weiß wäre – da es ein additiver Farbraum ist:
ROT: 255
GRÜN: 255
BLAU: 255
GANZ WICHTIG: Diese Zahlen werden allerdings hexadezimal und nicht dezimal angegeben!
255 dezimal ist zum Beispiel ff hexadezimal. KEINE ANGST, hexadezimal verstehen ist ganz einfach, so geht es (Titel des Threads ignorieren, es geht nur um Post #11 darin):
http://extreme.pcgameshardware.de/p...ob-h-oder-z-board-aktivieren-post7650388.html
Wenn ihr es nicht versteht oder nicht lernen wollt, es gibt online Konverter Dezimal zu Hexadezimal und auch der Windowstaschenrechner kann das.
Hinweis: Die Groß/Kleinschreibung von Buchstaben (a-f) in der hexadezimalen Schreibweise ist egal.
Das oben genannte kräftige Rot wäre also
ROT: ff
GRÜN: 00
BLAU: 00
Oder das Weiß:
ROT: ff
GRÜN: ff
BLAU: ff
- In CSS wird allen Farbwerten ein # vorangestellt
#ff0000
#ffffff
- Es gibt eine Kurzschreibweise wenn beide Zeichen eines Farbwerts (R/G/B) identisch sind:
#f00 = #ff0000
#fff = #ffffff
#000 = #000000
Ob die Kurz- oder die Langschreibweise verwendet wird, ist in diesem Fall völlig egal.
- Wenn ihr eure Farben nicht selber basteln wollt, so gibt es Color Picker, Onlinefarbtabellen, Grafikprogramme die den Hexadezimalwert anzeigen und, und, und.
Beispiel: Dezente, nicht ganz so grelle Grautöne ersetzen die hellgrauen/weißen Bereiche:
Das grün-auf-schwarz oben ist nicht gerade was für den täglichen Einsatz, daher hier eine halbwegs brauchbare Basis zum Dranrumspielen in Grautönen:
Man benötigt das Browser-Plugin "Stylish", das es sowohl für Chrome als auch Firefox gibt.
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=de
Nach der Installation findet sich rechts oben ein S-Symbol, das Logo von Stylish, bei mir war kein Neustart des Browsers notwendig:
Erstmalige Einrichtung – Die folgenden vier Schritte fallen nur einmalig an, später erkennt Stylish das Forum dann automatisch, wenn alles klappt:
1. Man ruft das Forum auf und klickt das Stylish-Logo (S-Symbol rechts oben) an, dann auf den untersten Link: "Style erstellen für: extreme.pcgameshardware.de/diese URL".
2. Es sollte darauf geachtet werden, dass im Feld "URLs auf der Domain" korrekt "extreme.pcgameshardware.de" steht – ohne das extreme. bezieht sich das alles auch auf die PCGH-Hauptseite!
3. Dann werden die neuen CSS-Designinformationen in das Hauptfeld geschrieben (mehr Infos weiter unten). Hier ist ein Beispiel zum rauskopieren – dies ist ein möglichst simples Beispiel Grün-auf-Schwarz, wer etwas ein wenig harmonischeres haben will, bitte ganz nach unten scrollen:
Code:
body, #content-container {
/* Hintergrundfarbe, ich nehme hier schwarz */
background-color: #000;
/* Vordergrundfarbe, ich nehme hier einen Grünton */
color: #74C365;
}4. Zu guter Letzt muss links oben ein Name eingegeben werden (beliebiger Name, ich habe "PCGH" genommen) und auf Speichern geklickt werden:
Das ganze sollte sofort aktiv sein, was an der rot hinterlegten "1" im S-Symbol/Stylish-Logo des Browsers sichtbar ist. Dort kann man den Style auch deaktivieren, falls es Probleme gibt, indem man einfach auf das S und dann auf das Kontrollkästchen klickt. Ein Neuladen der Seite ist zur Aktivierung/Deaktivierung nicht notwendig.
Ergebnis:
Da vermutlich nicht jeder grün auf schwarz haben will, hier nun die Informationen, wie eigene Farben gesetzt werden können:
Ich werde hier keine Einführung in CSS geben, wer mehr will bzw. die Hintergründe verstehen will, möge "CSS Tutorial" oder ähnlich googeln. Daher nur in aller Kürze:
- Die Zeile mit background-color bezieht sich auf die Hintergrundfarbe, die Zeile color auf die Textfarbe.
- Darauf achten, dass die CSS-Anweisungen mit einem Semikolon ; am Ende der Zeile enden
- Die Einrückung mit Leerzeichen/Tabs dient nur der Übersichtlichkeit und ist egal, macht euch hier keinen Kopf
- Die Farben werden im RGB (Rot-Grün-Blau)-Farbraum angegeben und zwar mit Werten zwischen 0 und 255, ein kräftiges Rot wäre
ROT: 255
GRÜN: 0
BLAU: 0
Weiß wäre – da es ein additiver Farbraum ist:
ROT: 255
GRÜN: 255
BLAU: 255
GANZ WICHTIG: Diese Zahlen werden allerdings hexadezimal und nicht dezimal angegeben!
255 dezimal ist zum Beispiel ff hexadezimal. KEINE ANGST, hexadezimal verstehen ist ganz einfach, so geht es (Titel des Threads ignorieren, es geht nur um Post #11 darin):
http://extreme.pcgameshardware.de/p...ob-h-oder-z-board-aktivieren-post7650388.html
Wenn ihr es nicht versteht oder nicht lernen wollt, es gibt online Konverter Dezimal zu Hexadezimal und auch der Windowstaschenrechner kann das.
Hinweis: Die Groß/Kleinschreibung von Buchstaben (a-f) in der hexadezimalen Schreibweise ist egal.
Das oben genannte kräftige Rot wäre also
ROT: ff
GRÜN: 00
BLAU: 00
Oder das Weiß:
ROT: ff
GRÜN: ff
BLAU: ff
- In CSS wird allen Farbwerten ein # vorangestellt
#ff0000
#ffffff
- Es gibt eine Kurzschreibweise wenn beide Zeichen eines Farbwerts (R/G/B) identisch sind:
#f00 = #ff0000
#fff = #ffffff
#000 = #000000
Ob die Kurz- oder die Langschreibweise verwendet wird, ist in diesem Fall völlig egal.
- Wenn ihr eure Farben nicht selber basteln wollt, so gibt es Color Picker, Onlinefarbtabellen, Grafikprogramme die den Hexadezimalwert anzeigen und, und, und.
Beispiel: Dezente, nicht ganz so grelle Grautöne ersetzen die hellgrauen/weißen Bereiche:
Das grün-auf-schwarz oben ist nicht gerade was für den täglichen Einsatz, daher hier eine halbwegs brauchbare Basis zum Dranrumspielen in Grautönen:
Code:
body, #content-container {
background-color: #ccc;
}
.postbitlegacy .userinfo, .postbitlegacy .postdetails, .eventbit .eventdetails {
background-color: #b8b8b8;
}
.postbitlegacy .postbody, .eventbit .eventdetails .eventbody {
background-color: #b5b5b5;
}
.textbox, textarea, select, .formcontrols .blockrow, .post_field, .navlinks {
background-color: #ddd;
}
Zuletzt bearbeitet:
Ähnliche Themen
