about:preferences anpassen

  • Firefox-Version
    96.0
    Betriebssystem
    Windows 10 Version 21H2 (Build 19044.1415)

    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.


    Wo liege ich denn sooo falsch?


    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

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

    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.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

  • 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

    Mit <3lichem Gruß

    Mira

  • OK. Dann ist es etwas Anderes die Ursache.


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

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

    Einmal editiert, zuletzt von milupo () aus folgendem Grund: Ein Beitrag von milupo mit diesem Beitrag zusammengefügt.

  • 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.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

  • 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/) {
  • Ich will wohl einfach zu viel, zu schnell.

    Der Code sieht jetzt so aus:


    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

    Mit <3lichem Gruß

    Mira

  • Also ALLE Buttons und Auswahlfelder

    Meinst du das so?



    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.

  • 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

    Mit <3lichem Gruß

    Mira

  • Keine Ahnung was ich hier mache,

    aber das Resultat kann sich schon sehen lassen. :D


    Mein bisheriger Code:

    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

    Mit <3lichem Gruß

    Mira

  • 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

    Mit <3lichem Gruß

    Mira

  • 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.

    Mit <3lichem Gruß

    Mira

  • TADA, bumbumbumbumbum


    Ich bin schon ein klein wenig stolz.


    Gruß

    Mira

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt 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;

  • 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;

    }

    Es grüßt,

    Ralf