Beiträge von Mira_Belle

Mira_Belle

So geht das:

CSS

background-image: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
-moz-context-properties: fill !important;
fill: red !important;

Danke, vielen lieben Dank.

#- ------------------------------------------------------------------------------------------------------------------------------------------------- -#

Nachtrag!!!!

Das klappt wunderbar

Somit kann ich mir, wenn ich doch ein anderes Symbol besser gefällt, das Bearbeiten des *.svg sparen.

Ganz, ganz lichen Dank.

#- ------------------------------------------------------------------------------------------------------------------------------------------------- -#

Das wäre eine Möglichkeit.

Das mit dem Filter habe ich noch nicht ausprobiert!

CSS

 {
   filter: invert(12%) sepia(75%) saturate(4294%) hue-rotate(354deg) brightness(108%) contrast(120%) !important;
}

Aber ich habe nun auch eine Möglichkeit gefunden.

Man suche sich ein Symbol, welches einem zusagt,

z.B. "default-browser-16.svg"!

photon-icons/default-browser-16.svg at master · FirefoxUX/photon-icons

The design tokens for the Photon icons. Contribute to FirefoxUX/photon-icons development by creating an account on GitHub.

github.com

Lädt es runter und speichert es.

Geht auf diese Seite => https://mediamodifier.com/free-svg-editor

Lädt es hoch und passt es sich an.

Ergebnis =>

Nachteil ist halt, dass man nur unter drei Seiten unterscheiden kann!

#identity-box[pageproxystate="valid"].chromeUI

#identity-box[pageproxystate="valid"].localResource

&

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"]

Aber was soll's.

Zitat von grisu2099

Noch besser wäre, wenn wir doch noch einen Weg finden würden, die einzelnen "about"-Seiten in der URL-Bar einzeln ansprechen zu können...

Das wird unter Umständen nur ein JavaScript-Profi hinbekommen.

Denn es muss ja nach dem Favicon geprüft werden und nur wenn keins vorhanden ist,

dann ein eigenes "eingefügt" werden.

Und, wenn es noch individueller werden soll, muss auch das Label oder die "Adresse" abgefragt werden

und dieser dann ein eigenes, individuelles Symbol zugeordnet werden.

Ich sage nicht, dass das unmöglich ist, aber der Aufwand ist wohl immens!

Nachtrag.

Eben mit dem Filter etwas herumgespielt!

Funktioniert nicht so, wie ich mir das gewünscht hätte!

Entweder greift der Filter beim Logo oder er färbt das Label ein.

Habe auch ehrlich nicht mehr den Nerv dazu, weiter an dem CSS herumzudoktern.

Habe eine für mich akzeptable Lösung gefunden und bin am "Ende".

Wer mag, kann ja entweder Icons benutzen oder der einfachheitshalber eine Grafik (PNG).

Sollte es wider Erwarten doch noch ein spezielles JavaScript geben, bin ich wieder dabei,

beim Herumdoktern.

Mira_Belle

Danke jane,

nur leider kann ich mit dieser Information so gar nichts anfangen.

Mira_Belle

Zitat von grisu2099

Noch ein Fehler in deinen Codes: Nochmal Zeile 23: Da fehlen die Anführungszeichen (so wie in Zeile 10). Im anderen Code genauso...

Danke für's Korrekturlesen.

Hier noch einmal alles zusammen und berichtigt!

CSS

/* localResource */

.plain {
  padding-bottom: 2px !important;
}

#identity-box[pageproxystate="valid"].localResource #identity-icon {
  display: none !important;
}
#identity-box[pageproxystate="valid"].localResource #faviconid {
  margin-left: 1px !important;
  margin-right: 1px !important;
  margin-bottom: 1px !important;
  background: url("chrome://branding/content/icon32.png") !important;
  background-size: 16px 16px !important;
}
#identity-box[pageproxystate="valid"].localResource::after {
  content: "Firefox"!important;
  padding-left: -5px !important;
}
#identity-box[pageproxystate="valid"].localResource {
  margin-right: 8px !important;
  padding-right: 10px !important;
}

#identity-box[pageproxystate="valid"].localResource::after {
  background: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 48px 2px !important;
  background-size: 16px 16px !important;   
  padding-right: 24px !important;
}


/* chromeUI */

#identity-box[pageproxystate="valid"].chromeUI #faviconid {
  display: none !important;
}

#identity-box[pageproxystate="valid"].chromeUI {
  margin-right: 8px !important;
  padding-right: 1px !important;
}
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button {
  margin-right: 2px !important;
  padding-right: 0px !important;
}
#identity-box[pageproxystate="valid"].chromeUI::after {
  background: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  content: " "!important;
  background-repeat: no-repeat !important;
  background-position: 6px 2px !important;
  background-size: 16px 16px !important;   
  padding-right: 6px !important;
  padding-left: 25px;
}

/* #identity-box[pageproxystate="invalid"] */

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] #identity-icon {
  display: none !important;
}
#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] #faviconid {
  margin-left: 5px !important;
  margin-right: 1px !important;
  margin-bottom: 1px !important;
  background: url("chrome://branding/content/icon32.png") !important;
  background-size: 16px 16px !important;
}
#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"]::after {
  content: "Firefox"!important;
  padding-left: -5px !important;
}
#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] {
  margin-right: 8px !important;
  padding-right: 10px !important;
}

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"]::after {
  background: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 48px 2px !important;
  background-size: 16px 16px !important;   
  padding-right: 24px !important;
}

Alles anzeigen

Und ich zitiere mich noch einmal selbst!

Zitat von Mira_Belle

Kann mir jemand helfen, das Symbol avatar-empty.svg einzufärben?
fill bewirkt nichts
color wirkt sich bei localResource & #identity-box[pageproxystate="invalid"] nur auf das Label aus
und
background bzw. background-color nur auf "Hintergründe".

Alles anzeigen

Wenn das mit dem Script nicht funktioniert, und ich habe mir da so meine Gedanken gemacht und komme zu dem Fazit,

das kann zwar funktionieren, aber der Aufwand wird gigantisch sein,

möchte ich doch die Symbole wenigstes Farbig, ohne dass ich diese direkt bearbeiten muss,

bzw. ich farbige Grafiken (*.png oder *.ico) benutzen muss.

Bitte.

Mira_Belle

Kann mir jemand helfen, das Symbol avatar-empty.svg einzufärben?

fill bewirkt nichts

color wirkt sich bei localResource & #identity-box[pageproxystate="invalid"] nur auf das Label aus

und

background bzw. background-color nur auf "Hintergründe".

Und absolut klasse fände ich es, wenn sich jemand das JavaScript vornehmen könnte.

Es wäre so schön, wenn vorgegebene Symbole behalten werden könnten.

Mira_Belle

Zitat von grisu2099

Deine Codes können so wie gepostet nicht funktionieren...
Im obigen Code Zeile 23: zweimal ein ;
Im anderen Code entsprechend genauso...

Ist korrigiert, Danke für den Hinweis.

Die Stilbearbeitung hat sich daran nicht gestört,

und wenn ich es im Laufe des Tages in die userChrome.css geschrieben hätte,

hätte ich mir wieder einmal ’nen Wolf gesucht.

Mira_Belle

Nachgereicht!

Der Code für about:home & about:welcome:

CSS

/* #identity-box[pageproxystate="invalid"] */

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] #identity-icon {
  display: none !important;
}
#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] #faviconid {
  margin-left: 5px !important;
  margin-right: 1px !important;
  margin-bottom: 1px !important;
  background: url("chrome://branding/content/icon32.png") !important;
  background-size: 16px 16px !important;
}
#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"]::after {
  content: "Firefox"!important;
  padding-left: -5px !important;
}
#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] {
  margin-right: 8px !important;
  padding-right: 10px !important;
}

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"]::after {
  background: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 48px 2px !important;
  background-size: 16px 16px !important;   
  padding-right: 24px !important;
}

Alles anzeigen

Mira_Belle

Nun eine behelfsmäßige Lösung!

Alle internen Seiten sind nun gleich.

Alle, nein, nicht alle.

about:privatebrowsing schaut so aus.

Und dabei werde ich es auch belassen.

about:credits ist eine externe Seite, da mache ich auch nichts dran.

about:home & about:welcome muss ich noch den anderen Seiten anpassen

Da gehe ich aber erst morgen dran.

Hier "mein" vorläufiger Code:

CSS

/* localResource */

.plain {
  padding-bottom: 2px !important;
}

#identity-box[pageproxystate="valid"].localResource #identity-icon {
  display: none !important;
}
#identity-box[pageproxystate="valid"].localResource #faviconid {
  margin-left: 1px !important;
  margin-right: 1px !important;
  margin-bottom: 1px !important;
  background: url("chrome://branding/content/icon32.png") !important;
  background-size: 16px 16px !important;
}
#identity-box[pageproxystate="valid"].localResource::after {
  content: "Firefox"!important;
  padding-left: -5px !important;
}
#identity-box[pageproxystate="valid"].localResource {
  margin-right: 8px !important;
  padding-right: 10px !important;
}

#identity-box[pageproxystate="valid"].localResource::after {
  background: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 48px 2px !important;
  background-size: 16px 16px !important;   
  padding-right: 24px !important;
}


/* chromeUI */

#identity-box[pageproxystate="valid"].chromeUI #faviconid {
  display: none !important;
}

#identity-box[pageproxystate="valid"].chromeUI {
  margin-right: 8px !important;
  padding-right: 1px !important;
}
#identity-box[pageproxystate="valid"].chromeUI > .identity-box-button {
  margin-right: 2px !important;
  padding-right: 0px !important;
}
#identity-box[pageproxystate="valid"].chromeUI::after {
  background: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
  content: " "!important;
  background-repeat: no-repeat !important;
  background-position: 6px 2px !important;
  background-size: 16px 16px !important;   
  padding-right: 6px !important;
  padding-left: 25px;
}

Alles anzeigen

Mira_Belle

Eine kleine Hürde ist genommen!

Alle Seiten mit dem Selektor #identity-box[pageproxystate="valid"].localResource haben nun

das gleiche Aussehen.

Für die Seiten mit dem Selektor #identity-box[pageproxystate="valid"].chromeUI

wird es meiner Einschätzung nach nur mit einem Script funktionieren!

Denn einige Seiten bringen ihr eigenes Icon im Tab schon mit, dies wird ja kopiert und dann

in der Adresszeile hinter dem Label angezeigt, andere wiederum haben kein Icon im Tab!

Und hier muss im Script eine Prüfung erfolgen und nur wenn kein Icon vorhanden ist,

darf dann ein fest definiertes Icon eingefügt werden.

Ich denke, meine Idee weiter oben, war gar nicht so schlecht.

Jedoch hapert es an Kenntnissen bezüglich JavaScript.

Mira_Belle

Zitat von .DeJaVu

Wie wäre es mit ähnlichem
#urlbar-input [title^="camp-firefox"]
Darunter gibt es keine weitere Spezifikation.

Sorry .DeJaVu, das verstehe ich jetzt nicht, bzw. worauf Du hinaus willst.

Ich habe die Idee mit dem JavaScript mal wieder aufgegriffen!

Also wenn es kein Icon für den Tab gibt, dass dann z.B. "chrome://mozapps/skin/extensions/extension.svg"

eingefügt wird!

Habe wie folgt das Script geändert:

JavaScript

(function() {
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
        let fav = document.createXULElement('image');
        fav.setAttribute('id', 'faviconid');
        fav.setAttribute('class', 'faviconclass');
gBrowser.tabContainer.addEventListener('TabAttrModified', function() {            
    let favicon = gBrowser.selectedTab.image;  
    if (favicon) {    
        fav.src = favicon;        
        var position = document.getElementById('identity-icon');
        position.parentNode.insertBefore(fav, position.previousSibling);
    }
    else {
        fav.removeAttribute('src');
        let customIcon = new Image();
        customIcon.src = "chrome://mozapps/skin/extensions/extension.svg";
        customIcon.width = 16;
        customIcon.height = 16;
        var position = document.getElementById('identity-icon');
        position.parentNode.insertBefore(customIcon, position.previousSibling);
    }
}, false);
    fav.style.height = '16px';
    fav.style.width  = '16px';
    fav.style.marginLeft  = '7px';
    fav.style.marginRight  = '3px';
    fav.style.marginTop  = '2px';
})();

Alles anzeigen

Aber, das Ergebnis gleicht einer Katastrophe!

Es wird zwar das Icon eingefügt, aber immer, egal ob es schon eins gibt oder nicht,

und wenn man die Tabs wechselt, wird ständig ein weiteres Icon hinzugefügt.

Wenn ich doch nur verstehen würde, was ich da mache.

Mira_Belle

Zitat von grisu2099

Zitat von Mira_Belle

Und da das Script eben jene kopiert und in die Adresszeile schafft,

...aber nicht die selbst zugewiesenen...

Danke für die Info.

Hat mir Arbeit erspart.

Die Idee wäre ja viel zu einfach gewesen.

So, wie bekommen wir es nun hin, in der Adressleiste den einzelnen Seiten ganz individuell Icons zuzuweisen.

Mira_Belle

Meine Gedanken überschlagen sich und mir kam noch eine Idee!

Die Symbole, welche in den Tabs angezeigt werden, sind doch Seitenspezifisch?

Und da das Script eben jene kopiert und in die Adresszeile schafft, ...

Leider habe ich keine Zeit mehr dem nachzugehen.

Mira_Belle

Aufdröseln

Ich habe mal zwei Screenshots gemacht und habe Fragen dazu!

about:about

Man schauen auf die Zeile label

bei value steht nix! und dahinter collapsed="true"

Nun about:addons

Wie man hier unschwer erkennen kann, steht in der Zeile label

bei value="Firefox" und der Eintrag collapsed="true" fehlt ganz.

Nun meine Frage an die Profis!

Wo sind diese Einträge hinterlegt?

Und wie, wenn überhaupt möglich, kann man darauf Einfluss nehmen?

Analog zu diesem Problem gibt es mit dem JavaScript auch noch die Zeile image id="faviconid",

wo ich dann das gleiche Problem habe!

z.B. about:debugging#/setup

Hier ist ein Icon hinterlegt und hier

about:buildconfig

wiederum nicht!

Auch hier die Frage, wo steht das?

Und wie könnte man darauf Einfluss nehmen?

Also hier noch einmal das JavaScript:

JavaScript

(function() {
    if (location.href !== 'chrome://browser/content/browser.xhtml') return;
        let fav = document.createXULElement('image');
        fav.setAttribute('id', 'faviconid');
        fav.setAttribute('class', 'faviconclass');
    gBrowser.tabContainer.addEventListener('TabAttrModified', function() {            
        let favicon = gBrowser.selectedTab.image;  
        if (favicon) {    
            fav.src = favicon;        
            var position = document.getElementById('identity-icon');
            position.parentNode.insertBefore(fav, position.previousSibling);
        }
        else {
            fav.removeAttribute('src');
        }
    }, false);
    fav.style.height = '16px';
    fav.style.width  = '16px';
    fav.style.marginLeft  = '7px';
    fav.style.marginRight  = '3px';
    fav.style.marginTop  = '2px';
})();

Alles anzeigen

Wenn ich das richtig verstehe, müsste man, wenn es kein Tabicon gibt, dem Ganzen dann ein "Eigenes" zuweisen.

Nur wo und wie?

Wenn das klappen sollte, wäre ja schon einmal ein Problem gelöst.

Mira_Belle

Zitat von Sören Hentzschel

Zitat von Mira_Belle

Meine Idee wäre gewesen, Änderungen an den Selektoren in der userContent.css
jeweils den einzelnen Seiten zu geordnet vorzunehmen.
Ob's geht?

Nein, siehe Hinweis von grisu2099. Genau darum geht es ja bei der Unterscheidung zwischen userContent.css und userChrome.css: Anpassungen der Browseroberfläche („chrome“) müssen in die Datei userChrome.css, Anpassungen am Content in die Datei userContent.css. Die Adressleiste ist ganz klar Browseroberfläche.

Habe ich auch gerade festgestellt!

Es geht nicht.

Ergo, mein Fehler.

Jetzt bliebe nur noch, die Selektoren soweit aufzudröseln, dass Unterschiede der einzelnen Seiten

zu Tagen treten. Ob es da überhaupt Unterschiede gibt?

Mira_Belle

Zitat von grisu2099

Hab ich jetzt einen Denkfehler?
Wie willst du mit der userContent.css on die URL-Bar kommen?

War nur so eine Idee.

Habe mir mal die Zeit genommen und die Selektoren herausgesucht.

Da wären:

#identity-box[pageproxystate="valid"].chromeUI #identity-icon denen wird das Firefoxicon

url(chrome://branding/content/icon16.png) zu gewiesen.

#identity-box[pageproxystate="valid"].localResource #identity-icon denen wird das Favicon

url(chrome://global/skin/icons/page-portrait.svg) zu gewiesen.

#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon denen wird das Vorhängeschloss

url(chrome://global/skin/icons/security.svg) zu gewiesen.

und zu guter Letzt gibt es noch zwei Seiten, nämlich about:home & about:welcome

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"]

denen wird die Lupe url(chrome://global/skin/icons/search-glass.svg) zu gewiesen.

Der Seite about:downloads sowie einigen anderen haben den Selektor

#identity-box[pageproxystate="valid"].chromeUI.

Da nun das Label zu ändern und/oder dahinter noch zusätzlich ein Icon zu plazieren,

ist also eine nicht so gute Idee, denn es wirkt sich ja auch auf andere Seiten

mit gleichem Selektor aus, z.B. auf about:buildconfig, about:policies und viele weitere!

Hier die Seiten mit dem Selektor #identity-box[pageproxystate="valid"].localResource

about:about, about:checkerboard, about:logging, about:logo, about:memory,

about:mozilla, about:networking, about:newtab, about:privatbrowsing, about:robots,

about:serviceworkers, about:sync-log, about:third-party, about:unloads, about:url-classifier,

about:webrtc & about:windows-messages

Dann gibt es noch Seiten mit dem Selektor #identity-box[pageproxystate="valid"].chromeUI

about:addons, about:buildconfig, about:cache, about:certificate, about:compat,

about:config, about:crashes, about:debugging, about:downloads, about:license,

about:logins, about:loginsimportreport, about:performance, about:plugins, about:policies,

about:preferences, about:processes, about:profiles, about:profiling, about:protections,

about:rights, about:studies, about:support & about:telemetry

Und wie erwähnt gibt es die zwei Seiten mit dem Selektor

#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"]

about:home & about:welcome

Aber es gibt da noch ein Schmankerl! #identity-box[pageproxystate="valid"].verifiedDomain

für about:credits

Ich erhebe keinen Anspruch auf Vollständigkeit!

Aber das war noch nicht alles

Wäre ja viel zu einfach, mit diesen Informationen zu arbeiten.

Da war doch noch das JavaScript.

Tja, das ist die Würze in dieser Suppe.

Denn es sorgt dafür, dass bei manchen Seiten an erster Stelle das Firefoxicon url(chrome://branding/content/icon16.png), dann das Label Firefox und an letzter und dritter Stelle ein weiteres Icon angezeigt wird.

Aber eben nicht bei allen!

Und das hat auch nichts mit den oben genannten Selektoren zu tun!

Z.B. Bei about:addons werden das Logo, das Label und ein Icon angezeigt,

und bei about:cache nur Logo & Label.

Bei about:about werden das Favicon und das Logo angezeigt,

und bei about:logo jedoch nur das Favicon.

about:credits lass ich jetzt mal außen vor.

Meine Idee wäre gewesen, Änderungen an den Selektoren in der userContent.css

jeweils den einzelnen Seiten zu geordnet vorzunehmen.

Ob's geht?

#- ----------------------------------------------------------------------------------------------------------------------------------------------- -#

Nachtrag

Die Seiten:

CSS

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

CSS

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

CSS

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

usw.

Mira_Belle

Zitat von grisu2099

Die Sache hat nur einen entscheidenden Fehler:
Ruf mal mit diesem Code z.B. "about:addons" auf...

Getestet in einem neuen Nightly. Einzige Anpassung ist dein Code.
Ergänzung: Habe nur das Icon in ein bei mir vorhandenes geändert.

Sch.....

Du hast recht und nicht nur da! about:debugging#/setup & about:preferences genau so.

Und ich weiß nicht weiter, ich brauch’ ’ne Pause.

Was mir jetzt nur so ad hoc dazu einfällt, den Code in die userContent.css zu schreiben

und explizit den Seiten zuzuweisen.

Ob’s funktioniert?

Kann das mal jemand prüfen?

Ich habe dazu z.Z. keinen Nerv mehr

und ab morgen auch nicht mehr so viel Zeit für solche Sachen.

Bitte.

Mira_Belle

Was'ne Geburt!

CSS

#identity-box[pageproxystate="valid"].chromeUI #faviconid {
  margin-left: 1px !important;
  margin-right: -19px !important;
  margin-bottom: 1px !important;
}

#identity-box[pageproxystate="valid"].chromeUI #identity-icon-label {
  display: none !important;
}

#identity-box[pageproxystate="valid"].chromeUI {
  margin-right: 10px !important;
  padding-right: 1px !important;
}

#identity-box[pageproxystate="valid"].chromeUI::after {
  content: "Downloads"!important;
  background: url("../icons/bibli16.gif/") !important;
  background-repeat: no-repeat !important;
  background-position: 75px 3px !important;
  background-size: 15px 15px !important;   
  padding-right: 26px !important;
  background-color: gold !important;    /* Nur zum Test */
}

Alles anzeigen

Werte eventuell noch anpassen.

Mira_Belle

Und noch einen Nachtrag!

In #13 steht der Code für die Änderungen für den Container von about:about.

Und geh endlich ins Bett, Du hast den Anhang vergessen.

#- ------------------------------------------------------------------------------------------------------------------------------------------------- -#

Nachtrag

Dir geht es nur um das Icon?

CSS

#identity-box[pageproxystate="valid"].localResource #faviconid {  display: none !important;}
#identity-box[pageproxystate="valid"].chromeUI::after {
  content: "";
  background: url("path/to/new-icon.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 49px 2px !important;
  background-size: 15px 15px !important;   
  padding-right: 24px !important;
  display: inline-block !important;
}

An den Werten musst Du halt noch etwas herumschrauben.

Mira_Belle

Zitat von harff182

...
Am einfachsten wäre es wohl, wenn Du den Code für about:about einfach für about:downloads änderst.
Icon is egal, das bekomm ich hin.
...

Geht es Dir jetzt um die Anpassung der Page about:downloads

oder um die Anpassung des Containers (Anzeige mit Symbolen und Text) in der Adresszeile?

Am einfachsten, so denke ich, wäre es, wenn Du Bildchen machts!

Und die Selektoren habe ich ja schon benannt.

#- -------------------------------------------------------------------------------------------------------------------------------------------------- -#

Nachtrag

Habe gerade in meinem "nackten" Profil nachgeschaut.

Es wird das Firefoxlogo und danach "Firefox" angezeigt,

aber dahinter kein weiteres Symbol (#faviconid),

d.h. Arbeit und Gefrickel, ::after oder ::befor und Klimmzüge.

Mira_Belle

Hattest Du per CSS eigene Anpassungen im Container für "about:downloads"?

#identity-box[pageproxystate="valid"].chromeUI ist der Selektor für "about:downloads".

#identity-box[pageproxystate="valid"].chromeUI #identity-icon das Icon.

#identity-box[pageproxystate="valid"].chromeUI #identity-icon-label der Text.

#identity-box[pageproxystate="valid"].chromeUI #faviconid das Symbol nach dem Text.

#- ---------------------------------------------------------------------------------------------------------------------------------- -#

Nachtrag.

@harff182

Eventuell kann ich ja aushelfen, wenn von Dir im RL so viel abverlangt wird.

Wenn Du, so wie ich, Bildchen machen könntest,

ohne Script, mit Script und wie es denn aussehen soll.

Und wenn Du eigenen CSS-Code verwendet hast, den halt dann auch.

Ich hätte bis zum WE noch ein wenig Zeit.

Mira_Belle

Zitat von FuchsFan

Ich überblicke das jetzt nicht genau, was Du hier machen möchtest, und wie es aussehen soll.
Ein Icon hinter den Text habe ich auf die Schnelle mal so hinbekommen, eventuell hilft es Dir ja weiter.
...

Danke für Deinen Codeschnipsel.

Mir hat einfach die rettende Idee gefehlt.

CSS

.plain {
  padding-bottom: 2px !important;
}

#identity-box[pageproxystate="valid"].localResource #identity-icon {
  display: none !important;
}
#identity-box[pageproxystate="valid"].localResource #faviconid {
  margin-left: 1px !important;
  margin-right: 1px !important;
  margin-bottom: 1px !important;
}
#identity-box[pageproxystate="valid"].localResource::after {
  content: "Firefox"!important;
  padding-left: -5px !important;
}
#identity-box[pageproxystate="valid"].localResource {
  margin-right: 8px !important;
  padding-right: 10px !important;
}

#identity-box[pageproxystate="valid"].localResource::after {
    background: url("file:C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/iff60u96.default-release/chrome/icons/firefox-logo.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 49px 2px !important;
    background-size: 15px 15px !important;   
    padding-right: 24px !important;
}

Alles anzeigen

Und hier das Resultat, um das es mir ging.

So ohne diesen Code

Und jetzt so, genau so wie ich es wollte!

Grrr. Festgebissen, gekämpft, niedergerungen und gewonnen.

Eine Sache wurmt aber noch, wie ordne ich diesem Symbol nun eine Farbe zu?

Beiträge von Mira_Belle

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs

Eigene Icons für about:xxx in deren Urlbar und Tabs