[Chrome] Stylish Probleme

[dmaker]

Hallo ngb,

da ich über die Suchfunktion nichts gefunden habe, stelle ich meine Frage einfach mal hier:

Ich benutze Chrome als Webbrowser und mein Bildschirm scheint die Neigung zu haben, die Hintergrundfarbe des epicorp-Themes sehr rötlich/bräunlich darzustellen, ist vielleicht auch Absicht so. Jedoch würde mir persönlich ein schwächer gesättigter Hintergrund mehr gefallen.

Also mach ich mich als Laie mal auf zu den Entwicklertools und ändere den Wert für die Hintergrundfarbe und siehe da, das Forum wirkt mir gleich viel besser. Wenn ich aber einen Thread anklicke oder die Seite aktualisiere, ist alles wieder im Originalzustand!

Hier also die Frage: Ist es möglich, in den Chrome Entwicklertools Änderungen global für eine Domain abzuspeichern, sodass diese angepasste style.css immer angewendet wird? Wie gesagt, ich bin ein Laie, werde also mit fachwissengespickten Antworten nicht so viel anfangen können
Danke schonmal,

grüße dmaker

 

[Fhynn]

Re: Chrome Entwicklertools: Änderungen speichern?

Du könntest einfach Stylish installieren als Addon...

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=de

Siehe auch das UserScripts Forum / den Sticky dort.

lg,

 

[dmaker]

Re: Chrome Entwicklertools: Änderungen speichern?

Wenn ich das richtig sehe, muss ich da einen eigenen "Stil" schreiben - scheint noch nicht ganz zu klappen, hab mir jetzt einfach mal einen Codeschnipsel gegoogelt:

@namespace url(http://www.w3.org/1999/xhtml);


@-moz-document domain("ngb.to") {
body {

background: #5A524C !important;
}
}

Will aber nicht hinhauen, ist wohl nicht ganz richtig
Soll doch eigentlich nur der Hintergrund auf dem ganzen ngb #5A524C sein

 

[Kugelfisch]

Re: Chrome Entwicklertools: Änderungen speichern?

Du hast zwei Probleme: Einerseits ist dein Style im Mozilla-Format, d.h. er benutzt Gecko-spezifische Abschnitte (-moz-Präfix). Chromes Stylish-Erweiterung kann solche Styles zwar importieren, wenn du selbst welche anlegst, solltest du die Gültigkeitsbereiche jedoch über die Einstellungsmöglichkeit unterhalb des Code-Eingabebereichs festlegen. Achte ausserdem darauf, dass der Style aktiviert ist (im linken Bereich, `Aktiviert`-Checkbox):


Ausserdem musst du (wie du auch über die Entwicklertools feststellen kannst) den Hintergrund für das html-, nicht denjenigen für das body-Element ändern:
[src=css]html {
background: #5A524C !important;
}[/src]

 

[dmaker]

Re: Chrome Entwicklertools: Änderungen speichern?

Danke, hat funktioniert

--- Automatisch zusammengeführter Beitrag ---

Okay, es hat sich doch noch mal etwas ergeben:

Ich hab noch ein bisschen an anderen Farben rumgespielt, heraus kommt folgender Code:

[src=css]html {

background: #915A35 !important;

.body_wrapper {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
background: #DFD2B3;

.announcements .announcerow {
background: #DFDDD9;

.forumhead {
background: #DD7B37;

.threadlisthead {
background: #3A3A3A;
}[/src]

Der Background und der Body Wrapper funktionieren, die drei letzten Sachen allerdings nicht - ich hab wohl wieder was falsch gemacht

PS: Gibt es eigentlich schon einen Sammelthread für Coding-Anfänger, in dem man sowas fragen kann?

 

[Kugelfisch]

Re: Chrome Entwicklertools: Änderungen speichern?

Der Grund dafür wird möglicherweise klarer, wenn du die korrekte Sprache (CSS) für das Syntax-Highlighting auswählst

Nach
[src=css]html {
background: #915A35 !important;
[/src]fehlt eine schliessende geschweifte Klammer, dadurch werden die folgenden Regeln als Teil des Definitionsblocks der ersten Regel betrachtet, wo sie natürlich deplatziert sind.


Weitere Fragen kannst du gerne in diesem Thread stellen, und ggf. den Threadtitel etwas generischer fassen.

 

[dmaker]

Re: Chrome Entwicklertools: Änderungen speichern?

Habe die Klammer mal so eingefügt, führt aber zu einem Bug, dass der Body Wrapper jeweils beim ersten Laden einer Unterseite einen dunklen Beigeton bekommt.
Wenn man von neuem auf die gleiche Unterseite geht, tritt das wieder auf.

[src=css]html {
background: #915A35 !important;
}
.body_wrapper {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
background: #DFD2B3;


.announcements .announcerow {
background: #DFDDD9;

.forumhead {
background: #DD7B37;


.threadlisthead {
background: #3A3A3A;


.postbit .posthead, .postbitlegacy .posthead, .eventbit .eventhead {
background: url(images/buttons/newbtn_middle.png) repeat-x #5C5854;
][/src]
Als ich die Klammer erst nach dem Body Wrapper-Abschnitt gesetzt habe, ging der Bug wieder weg, allerdings funktioniert immer noch alles nach dem Body Wrapper nicht
Hatte ursprünglich gedacht, dass vielleicht die verschiedenen Verweise (forumhead, threadlisthead etc.) auf verschiedene .css-Dateien abzielen und ich das entsprechend angeben muss, aber sowohl der funktionierende Background als auch die nicht funktionierende Announcerow sind in der gleichen .css-Datei...

 

[Fhynn]

Seufz. Hast du ein BISSCHEN Ahnung von CSS? Anscheinend nicht.

Also. Du willst für .body_wrapper was festlegen. Okay. Also du schreibst

.body_wrapper {
Anweisungen;
}

Du schließt das nicht.



html {
background: #915A35 !important;
}

.body_wrapper {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
background: #DFD2B3;
}


.announcements .announcerow {
background: #DFDDD9;
}

.forumhead {
background: #DD7B37;
}


.threadlisthead {
background: #3A3A3A;
}


.postbit .posthead, .postbitlegacy .posthead, .eventbit .eventhead {
background: url(images/buttons/newbtn_middle.png) repeat-x #5C5854;
}

 

[Kugelfisch]

Die schliessende geschweifte Klammer fehlte nicht nur beim ersten Definitionsblock, sondern auch bei allen folgenden Blöcken. Jede Regel muss aus einem Selektor (z.B. `.forumhead`) und einem Definitionsblock bestehen, welcher mit { beginnt und mit } endet. Ausserdem musst du deine Definitionen ggf. mit einer !important-Direktive versehen (wie du das bei der ersten Regel getan hast), damit sie eventuelle Definitionen des Boards überschreiben. Wie in http://www.w3.org/TR/CSS2/cascade.html#cascading-order dokumentiert haben die Definitionen der Seite (Author-Stylesheet) Priorität gegenüber nicht-!important-Definitionen des Benutzers (User-Stylesheet), nicht jedoch gegenüber !important-Definitionen.

Nachtrag: Zeitliche Überschneidung mit Fhynns Beitrag.

 

[dmaker]

@ Fhynn: Wie ich schon im Startbeitrag meinte: Ich bin Laie. Meinte ich ernst

Danke ihr beiden!

Schlussendlich war die Lösung die !important-Direktive, ohne die hat auch das Schließen jedes Blocks nicht geholfen.
Toll wie flott man hier Antworten bekommt

grüße, dmaker