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

Was Heinrich da eingebracht hat, hat nichts mit den about-Seiten zu tun, sondern ist eine Unterscheidung in der Adresseingabe anhand diverser Identifier. Ich hatte in meiner letzten Antwort dort noch drei Beispiele eingefügt.

Natürlich hat das mit den about-Seiten zu tun.

Es soll je about-Seite ein passendes, eigenes Icon in der URL-Bar erscheinen.

Betrifft es direkt about-Seiten vom Inhalt her? Nein. Das hatte ich schon drüben versucht, dir zu erklären.

Zitat von harff182

dann geh doch bitte woanders Klugscheißen.

Anstand ist immer Glückssache, oder?

Also, habe es getestet und habe das Schuldige gefunden.

Es ist ein JavaScript, welches bei mir die FavIcons in die Adressbar hinein zaubert.

So schauts aus ohne Script:

und so schauts aus mit Script:

Hier nun das Script:

// FavIconInUrlBar.uc.js
// Source file https://www.camp-firefox.de/forum/thema/130540-about-seiten-mit-css-codes-anpassen/?postID=1214926#post1214926

(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';
})();

Und wie man unschwer sehen kann, hat das 2002Andreas in dem anderen Thread eingebracht,

nur einige Seiten vor dem Ende, als unsere Fragen aufkamen.

So nun zu meinem Problem, naja ein Problem ist es ja im Grunde nicht, aber, ich will das nicht so.

Wenn ich about:about aufrufe, schaut die Adressleiste halt ganz anders aus.

Ich habe mich mit einer Anpassung schon vergeblich abgemüht.

Konnte zwar das "Ordnersymbol" gegen das Firefoxsymbol austauschen,

aber dann verließen sie mich.

Damit ich nicht mir die Finger wund schreibe, und umständlich erläre, was ich vorhabe,

habe ich "gebastelt" und es kann sofort erkannt werden, um was es mir geht.

Mein Wunsch wäre, dass es so aussieht:

(Ja, ich habe es hinbekommen, die Symbole in der Farbe zu ändern)

Nachtrag!

Zitat von harff182

... , scheint so, als wenn man CSS für da braucht, wo was fehlt, sei es ein Text (Label) oder ein Icon.

Das wusste ich ja und habe da ja auch schon etwas herumgebastelt.

--------------------------------------------------------------------------------------------------------------------------------------------------------

Das "Ordnersymbol" gegen das Firefoxsymbol austauschen und richtig positionieren!

#identity-box[pageproxystate="valid"].localResource #identity-icon {
  list-style-image: url(chrome://branding/content/icon32.png) !important;
  margin-left: 5px !important;
  margin-right: -3px !important;  
}

Schriftzug "Firefox" einfügen und richtig positionieren!

#identity-box[pageproxystate="valid"].localResource::after {
  content: "Firefox"!important;
  padding-left: -5px !important;
}

Das zweite, unerwünschte Firefoxsymbol ausblenden.

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

So weit, so gut.

Nur wie bekomme ich jetzt dieses Symbol in der richtigen Position hinter den Schriftzug?

chrome://global/skin/icons/settings.svg

Da hänge ich (fest) und komme einfach nicht weiter.

--------------------------------------------------------------------------------------------------------------------------------------------------------

Zweiter Nachtrag!

Zitat von harff182

Danke für den Hinweis: eingebaut und funktioniert mit einigen about:xxx

...

Hab aber grade zuviel RL am Hals um was zu testen...

Gerne doch.

Und RL geht immer vor, von daher alles i.O..

Kleine Korrektur für die Box!

#identity-box[pageproxystate="valid"].localResource {
  margin-right: 8px !important;
  padding-right: 34px; 
}

Mir fehlt jetzt nur noch dieses Symbol. Grrr.

Habe nun das CSS etwas umgeschrieben.

.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: 34px; 
}

Jedoch bin ich noch immer nicht dahintergekommen, wie ich ein Symbol hinter den Text bekomme.

#identity-box[pageproxystate="valid"].localResource #faviconid::after geht nicht!

Es muss doch einen Trick geben. Grrr.

Zitat von Mira_Belle

Jedoch bin ich noch immer nicht dahintergekommen, wie ich ein Symbol hinter den Text bekomme.

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.

#identity-icon-box.identity-box-button{
    background: url("file:///C:/FoxIcons/0302.png") !important;
    background-repeat: no-repeat !important;
    background-position: 85px 4px !important;
    background-size: 15px 15px !important; 
    padding: 0 25px 0 15px !important;
}

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.

.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;
}

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?

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.

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.

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?

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