about:preferences anpassen

Mira_Belle

Da war ich wohl etwas übermotiviert!

Aber jetzt erst recht, jedoch brauche ich Hilfe.

So in etwa soll es einmal aussehen!

Weit bin ich nicht gekommen.

Ich versuche als mit den "Werkzeugen für Web-Entwickler" die passenden Elemente zu finden.

Wenn ich dann was gefunden habe und es in der "Stilbearbeitung" eintrage funktioniert es auch.

Dann erstelle ich eine CSS binde diese per @import url in die userContent.css ein

und ....

ein Teil des Codes tuts nicht.

CSS

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:preferences") {


html {
    background-color: #292c2f !important;
}
.sticky-container {
    background-color: transparent !important;
}
#categories > .category[selected], #categories > .category.selected {
    color: #0bdcff !important;
}
.category-name {
    color: #e1e1e1 !important;
}
.category[selected] > .category-icon, .category.selected > .category-icon {
    color: #0bdcff !important;
}
.category[selected] > .category-name, .category.selected > .category-name{
color: #0bdcff !important;
}

.category-icon {
    color: greenyellow !important;
}
.checkbox-check[checked] {
    background-color: #0bdcff !important;
}
#mainPrefPane {
    color: red !important;
}
html|h1 {
    color: greenyellow !important;
}
:root {
    color: red;
}

* {
    color: red;
  }
  .checkbox-check {
    color:yellow;
  }
  
  html|h1 {
    color: green;
  }
}

Alles anzeigen

Wo liege ich denn sooo falsch?

Gruß

Mira

milupo

Lösche mal als Erstes die Zeile 1. Es ist nicht mehr üblich, den Namensraum einzubinden.

Zitat von Mira_Belle

Dann erstelle ich eine CSS binde diese per @import url in die userContent.css ein

Den @import-Befehl hast du am Anfang der userContent.css? @import-Befehle müssen immer am Anfang der userContent.css (oder im anderen Fall der userChrome.css) stehen. Falls du in der userContent.css noch normalen CSS-Code hast, muss der immer hinter den @import-Befehlen stehen.

Mira_Belle

Zitat von milupo

Lösche mal als Erstes die Zeile 1. Es ist nicht mehr üblich, den Namensraum einzubinden.
Den @import-Befehl hast du am Anfang der userContent.css? @import-Befehle müssen immer am Anfang der userContent.css (oder im anderen Fall der userChrome.css) stehen. Falls du in der userContent.css noch normalen CSS-Code hast, muss der immer hinter den @import-Befehlen stehen.

Würde sagen, ja.

CSS

@import url("aboutabout.css");
@import url("aboutpreferences.css");

@-moz-document domain("

Gruß

Mira

milupo

OK. Dann ist es etwas Anderes die Ursache.

Hm. Auf jeden Fall ist html|h1 doppelt. Und was genau funktioniert nicht?

milupo

Sieht bei mir so aus:

Das untere html|h1 habe ich auskommentiert.

Du hast deine CSS-Dateien direkt im Ordner chrome? Ich verwende die Schreibweise

CSS

@import "CSSweb/preferences_mira_belle.css";

Bei mir ist die Datei im Unterordner CSSweb.

2002Andreas

Zitat von Mira_Belle

ein Teil des Codes tuts nicht.

Teste bitte, indem die überall ab Zeile 36 noch ein !important anfügst.

2002Andreas

Evtl. musst du auch oben die Eingabe:

Code

@-moz-document url("about:preferences") {

mal ergänzen zu:

Code

@-moz-document url(about:preferences), 
  url-prefix(about:preferences#privacy),  
  url-prefix(chrome://browser/content/preferences/dialogs/) {

Mira_Belle

Ich will wohl einfach zu viel, zu schnell.

Der Code sieht jetzt so aus:

CSS

@-moz-document url("about:preferences") {


html {
    background-color: #292c2f !important;
}
.sticky-container {
    background-color: transparent !important;
}
#categories > .category[selected], #categories > .category.selected {
    color: #0bdcff !important;
}
.category-name {
    color: #e1e1e1 !important;
}
.category[selected] > .category-icon, .category.selected > .category-icon {
    color: #0bdcff !important;
}
.category[selected] > .category-name, .category.selected > .category-name{
color: #0bdcff !important;
}

.category-icon {
    color: greenyellow !important;
}
.checkbox-check[checked] {
    background-color: #0bdcff !important;
}
#mainPrefPane {
    color: violet!important;
}
html|h1 {
    color: greenyellow !important;
}
:root {
    color: red!important;
}

* {
    color: orange!important;
  }
  .checkbox-check {
    color: yellow !important;
  }
}

Alles anzeigen

Das Resultat:

Rot markiert sind jene Bereiche, wo ich gerade hänge.

Also ALLE Buttons und Auswahlfelder

und

das Suchfeld nebst Hintergrund & "hover" und Rahmen usw.

Denke gehe erst einmal zu Bett.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

Also ALLE Buttons und Auswahlfelder

Meinst du das so?

CSS

#searchInput {
  background-color: red !important;
  color: white !important;
}

:root {
  --in-content-button-background: grey !important;
  --in-content-button-text-color: yellow !important;
  --in-content-button-background-hover: blue !important;
  --in-content-button-text-color-hover: lightgreen !important;
}

#chooseFolder,
#downloadFolder,
#otherInstanceHandlingUpdates > button{
  opacity: 1 !important;
}

Alles anzeigen

Nur mal so.

Diesen Teil habe ich mal entfernt:

CSS

* {
    color: orange!important;
  }

Damit wird fast jeder Text in orange dargestellt. Dieses * sollte man immer mit Vorsicht nutzen.

Sieht dann so aus damit:

Nur der einzelne Text den du gesondert ansprichst, dem kannst du dann eine andere Farbe geben.

Der Rest bleibt orange wie im Beispiel.

Mira_Belle

Danke Andreas für die Tipps und die Codeschnipsel.

Mir wurde gerade bewusst, dass ich meine Idee des Designs noch einmal überdenken muss.

Gerade hier aus dieser Seite mit all ihren verschiedenen Elementen,

Links, Buttons, Knöpfe und Häkchen usw., laufe ich mit meiner Idee auf Grund!

Wie so manch einer mit bekommen hat, habe ich ja die Hilfeseite,

aber auch schon die "Über About"-Seite meinen Vorstellungen entsprechen

umgestaltet und auch da (hier) gibt es schon einen Stilbruch.

Der ist zwar nicht so "groß", aber halt vorhanden.

Aber mit dieser Einstellungsseite mit ihren vielen Elementen, ...

Ne, das bekomme ich jetzt nicht so einfach unter einen Hut.

Ich hätte da zwar eine Idee, aber dazu bin ich nicht im Entferntesten in der Lage diese

umzusetzen, da die Seite dann mehr oder weniger komplett umgestaltet werden müsste.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

das bekomme ich jetzt nicht so einfach unter einen Hut.

Du schaffst das

Einfach immer die exakte Bezeichnung wählen, möglichst also keine pauschale nehmen.

Und alles gaaaanz in Ruhe machen.

Mira_Belle

Keine Ahnung was ich hier mache,

aber das Resultat kann sich schon sehen lassen.

Mein bisheriger Code:

CSS

@-moz-document url("about:preferences") {


html {
    background-color: #292c2f !important;
}
/* Bereich um Suchfeld  */
.sticky-container {
    background-color: transparent !important;
}

/* Augewähles Element in Auswahlfeld  */
#categories > .category[selected], #categories > .category.selected {
    color: #0bdcff !important;
}
.category[selected] > .category-icon, .category.selected > .category-icon {
    color: #0bdcff !important;
}
.category[selected] > .category-name, .category.selected > .category-name{
color: #0bdcff !important;
}
/* Text im Auswahlfeld  */
.category-name {
  color: #10c497 !important;
}
/* Icons im Auswahlfeld  */
.category-icon {
    color: greenyellow !important;
}

/* Checkboxen  */
.checkbox-check[checked] {
    background-color: #0bdcff !important;

}

#mainPrefPane {
    color: #e1e1e1!important;
}
/*
html|h1 {
    color: red !important;
}
*/
:root {
    color: #e1e1e1 !important;
  --in-content-button-background: #414446 !important;
  --in-content-button-text-color: #e1e1e1 !important;
  --in-content-button-background-hover: #484B4D !important;
  --in-content-button-text-color-hover: #e1e1e1 !important;    
  --in-content-text-color: #e1e1e1 !important;
  --in-content-primary-button-background: #e1e1e1 !important;
  --in-content-box-background: #414446 !important;

  --in-content-item-selected:#5a5d5e !important;
  --in-content-item-selected-text:#e1e1e1 !important;

  --in-content-link-color: greenyellow !important; 
  --in-content-link-color-hover: rgb(89, 133, 25) !important; 

  --in-content-primary-button-background: #0bdcff !important;
  --in-content-primary-button-text-color: #e1e1e1 !important;    

  --in-content-primary-button-background-active: red !important; 
  --in-content-primary-button-background-hover: greenyellow !important; 


}
/*  Suchfeld  */
#searchInput {
  background-color: #292c2f !important;
  color: #e1e1e1 !important;

}


#chooseFolder,
#downloadFolder,
#otherInstanceHandlingUpdates > button{
  opacity: 1 !important;
}

  .checkbox-check {
    color: #e1e1e1 !important;
  }

  .checkbox-check[checked] {
    border-color: transparent !important;
    fill: black !important;
  }
/*Text in Schaltflächen */
button {
  color: #e1e1e1 !important;
/*  background-color: yellow !important;*/
} 

}

Alles anzeigen

Wo ich gerade hänge:

1) ist ok, so will ich es!

2) Mh, auch ok, ist "gehovert", Farbe wird noch angepasst.

3) Tja, der Button ist gedrückt, des halb rot, ist so weit i.O. ,aber das Drumherum. Das will ich weg.

4) Feld ist markiert und auch hier das Drumherum. Wie krich ich das weg?

Gruß

Mira

Sören Hentzschel

CSS

radio[focused="true"] > .radio-check {
  outline: none !important;
}

Oder du setzt die Farbe einfach transparent:

CSS

:root {
  --in-content-focus-outline-color: transparent !important;
}

Mira_Belle

Danke Sören

Zweiter Codeschnipsel ist perfekt!

Habe aber gerade ein anderes Problem

Die Browserwerkzeuge öffnen sich nicht,

bzw. das Fenster ploppt nur kurz auf.

Werkzeuge für Web-Entwickler funktionieren ganz normal.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

Die Browserwerkzeuge öffnen sich nicht

Im Profilordner mal den Ordner:

chrome_debugger_profile

löschen, und den Fx neu starten.

Der Ordner wird dann wieder neu erstellt.

Dharkness

Zitat von Mira_Belle

Die Browserwerkzeuge öffnen sich nicht,
bzw. das Fenster ploppt nur kurz auf.

Lösche im Profil den Ordner chrome_debugger_profile, oder benenne ihn erst einmal um, natürlich bei beendetem Fx.

Mira_Belle

Habe es hinbekommen.

Habe so lange "Strg+Umschalt+Alt+I" gedrückt gehalten,

bist das Fenster öffnete, gleich die Fehlermeldungen ALLE gelöscht.

Nun geht es wieder.

Aber Danke für den oben genannten Tipp, den muss ich mir merken.

Habe auch etwas weiter rumgebastelt und kann sagen,

so gut wie fertig

Noch ein wenig putzen, Farben anpassen und dokumentieren.

Gruß

Mira

PS: Und nochmals Danke an ALLE, die mir weitergeholfen haben.

Mira_Belle

TADA, bumbumbumbumbum

CSS

@-moz-document url("about:preferences") {

    /* Hintergrund  */
    html {
        background-color: #292c2f !important;
    }
    /* Bereich um Suchfeld  */
    .sticky-container {
        background-color: transparent !important;
    }
    /*  Suchfeld  */
    #searchInput {
        background-color: #292c2f !important;                        /*  Hintergrund */
        color: #e1e1e1 !important;                                    /*  Text  */
    }
    /* Textfarbe */
    #mainPrefPane {
        color: #e1e1e1!important;
    }
    /*----------------------------------*/
    /********** Auswahlfeld  **********/
    /*----------------------------------*/

    /* Augewähles Element in Auswahlfeld (Icon) */
    .category[selected] > .category-icon, .category.selected > .category-icon {
        color: #0bdcff !important;
    }
    /* Augewähles Element in Auswahlfeld (Text) */
    .category[selected] > .category-name, .category.selected > .category-name{
        color: #0bdcff !important;
    }
    /* Augewähles Element in Auswahlfeld (gedrückt) */
    #categories > .category:hover:active {
        background-color: #414446 !important;
    }
    /* Text im Auswahlfeld  */
    .category-name {
        color: #e1e1e1 !important;
    }
    /* Icons im Auswahlfeld  */
    .category-icon {
        color: #e1e1e1 !important;
    }
    /*-------------------------------*/
    /********** Checkboxen  **********/
    /*-------------------------------*/
    
    #chooseFolder,
    #downloadFolder,
    #otherInstanceHandlingUpdates > button{
        opacity: 1 !important;
    }
    .checkbox-check {
        color: #e1e1e1 !important;                                    /*  Rahmen  */
    }    
    .checkbox-check[checked] {
        background-color: #0bdcff !important;                        /*  Hintergrund aktiv */
        border-color: transparent !important;                        /*  Rahmen aktiv  */
        fill: black !important;                                        /*  Häkchen  */
    }

    :root {
        color: #e1e1e1 !important;
        --in-content-button-background: #414446 !important;            /* Hintergrund Felder  */
        --in-content-button-text-color: #e1e1e1 !important;            /* Textfarbe Felder  */
        --in-content-button-background-hover: #484B4D !important;    /* Hintergrund Felder hover  */
        --in-content-button-text-color-hover: #e1e1e1 !important;    /* Textfarbe Felder hover  */
        --in-content-text-color: #e1e1e1 !important;                 /* Textfarbe Überschriften */
	--in-content-button-background-active: #414446  !important;

        --in-content-primary-button-background: #e1e1e1 !important;
        --in-content-box-background: #414446 !important;

        --in-content-item-selected:#5a5d5e !important;
        --in-content-item-selected-text:#e1e1e1 !important;

        --in-content-primary-button-background: #0bdcff !important;                /* Button */
        --in-content-primary-button-text-color: #e1e1e1 !important;                /* Button (mitte) */
        --in-content-primary-button-background-active: red !important;            /* Button aktiv  */

        --in-content-focus-outline-color: #e1e1e1 !important;                    /* Rahmen um Suchfeld */

        --in-content-item-hover: #5a5d5e !important;                /* Reiter hover */
        --in-content-item-hover-text: #e1e1e1 !important;
        --in-content-item-selected:#292c2f !important;                /* Reiter aktiv */
        --in-content-item-selected-text:#e1e1e1 !important;
    }
    /*-----------------------------*/
    /************ Links ************/
    /*-----------------------------*/
    
    .text-link {
        color: #0bdcff !important; 
        text-decoration: none !important; 
    }
    .text-link:hover {
        color: #0990a8 !important;
        text-decoration: underline !important; 
    }
    .text-link:hover:active {
        color: #054652 !important;
        text-decoration: underline !important; 
    }
    /*Rahmen um die Buttons */
    radio[focused="true"] > .radio-check {
        outline: none !important;
    }
    /*Text in Schaltflächen */
    button {
        color: #e1e1e1 !important;
    } 
    /* Infobox Dateitypen */
    .info-box-container {
        background-color: #414446 !important;
    }
    /*------------------------------------------------*/
    /**** Auswahlfeld in Datenschutz & Sicherheit **** /
    /*------------------------------------------------*/

    .content-blocking-category.selected {
        background-color: #e1e1e13f !important;
    }
    .content-blocking-category.selected {
        border-color: #e1e1e1 !important;
    }
    .content-blocking-category.selected .content-blocking-warning {
        background-color: #e1e1e15b !important;
    }

}

Alles anzeigen

Ich bin schon ein klein wenig stolz.

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

Ich bin schon ein klein wenig stolz.

Kannst du auch sein

Das solltest du aber bitte mal genauer überprüfen:

Jeweils gleiche Einträge, aber mit unterschiedlichen Farben.

Zeile 71:

--in-content-primary-button-background: #e1e1e1 !important;

Zeile 77:

--in-content-primary-button-background: #0bdcff !important;

Zeile 74:

--in-content-item-selected:#5a5d5e !important;

Zeile 85:

--in-content-item-selected:#292c2f !important;

Zeile 75 und 86 sind identisch.

Und damit sehe ich keine Funktion:

:root {

color: #e1e1e1 !important;

Dharkness

Zitat von Mira_Belle

Ich bin schon ein klein wenig stolz.

Da ↓ sind für die Farbwerte 8 statt 6 stellen.

Zeile 120-122:

.content-blocking-category.selected {

background-color: #e1e1e13f !important;

}

Zeile 126-128:

.content-blocking-category.selected .content-blocking-warning {

background-color: #e1e1e15b !important;

}

about:preferences anpassen

Ähnliche Themen

Addons Manager Code anpassen