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

harff182

'nabend...

In einem Nachbarthread bin ich auf einen (für mich) interessanten Post von Heinrich gestoßen:

Beitrag

RE: About Seiten mit CSS Codes anpassen

Wenn alle sagen eigene Icons bei about Seiten gehen nicht.........................

DOCH GEHT !!

und immer die passenden dazu in den Tab`s

Alles eine Frage des Willens, das Linke ist auch getauscht, mir gefällt das Alte Firefox Icon besser als das Neue

Heinrich

14. Dezember 2022 um 00:57

Eigene Icons für about:xxxx in der zugehörigen Urlbar und dem zugehörigen Tab find ich gut.

grisu2099 hat für Tabs schon einen Lösungsweg aufgezeigt, den ich umsetzen konnte:

Beitrag

RE: About Seiten mit CSS Codes anpassen

Geht z.B. so:

(Quelltext, 24 Zeilen)

grisu2099

12. Februar 2023 um 13:27

Mira_Belle scheint an "Icon in Urlbar" zu basteln:

Beitrag

RE: About Seiten mit CSS Codes anpassen

[…]

Wenn Du etwas Geduld aufbringst, ... (im Laufe der nächsten Tage)

Ich habe das, finde nur nicht auf die Schnelle, den passenden Code!

Es könnte nämlich auch durch ein JavaScript umgesetzt sein!

Ich habe heute vergeblich den ganzen Tag damit verbracht about:about mit Symbolen und Text in

in die Urlbar zu bekommen, ("Firefoxicon", Text "Firefox" und dahinter ein SVG)

Mira_Belle

12. Februar 2023 um 17:42

Damit es im Nachbarthread nicht untergeht und weil es dort nicht ganz thema-konform ist, frag ich hier mal nach, ob jemand eine Lösung kennt, wie man ein about:xxx-anhängiges Icon in die Urlbar mit Abstand hinter den Text "Firefox" bekommt.

.DeJaVu

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.

grisu2099

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

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

.DeJaVu

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

harff182

Ist es denn so schwer zu verstehen, was ich möchte?

Warum muß auch hier angefangen werden rumzumäkeln, das die Wortwahl nicht stimmt?

Ich möchte einfach nur das mit dem Pfeil gekennzeichnete Icon an die mit dem gekennzeichnete Stelle haben.

.DeJaVu :

Wenn Du mir da nicht weiterhelfen willst oder kannst, dann geh doch bitte woanders Klugscheißen.

Foxxiator

Zitat von harff182

dann geh doch bitte woanders Klugscheißen.

Anstand ist immer Glückssache, oder?

Mira_Belle

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:

JavaScript

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

Alles anzeigen

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)

harff182

Zitat von Mira_Belle

Es ist ein JavaScript, welches bei mir die FavIcons in die Adressbar hinein zaubert.
....
Und wie man unschwer sehen kann, hat das @2002Andreas in dem anderen Thread eingebracht,
nur einige Seiten vor dem Ende, als unsere Fragen aufkamen.

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

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

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

Mira_Belle

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!

CSS

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

CSS

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

Das zweite, unerwünschte Firefoxsymbol ausblenden.

CSS

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

Mira_Belle

Kleine Korrektur für die Box!

CSS

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

Mir fehlt jetzt nur noch dieses Symbol. Grrr.

Mira_Belle

Habe nun das CSS etwas umgeschrieben.

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

Alles anzeigen

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.

FuchsFan

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.

CSS

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

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?

harff182

FuchsFan + Mira_Belle :

Beides irgendwie einsetzbar, aber bei mir tauchen Icons auch auf, wo sie nicht sollen.

Also zB. mein Download-Icon bei anderen als about:downloads.

Kann man vielleicht irgendwie festlegen, bei welcher Url es ausschließlich angezeigt werden soll?

Muß nochmal runter zu meiner Mom zur Abendpflege, danach guck ich mal, ob ich was im/mitm Inspektor finde.

bis später...

harff182

Ich muß ersma aufgeben.

Hab mir nen Wolf nach "urlbar" gesucht, ob ich irgendwie an Url/Label/Text "about:downloads" rankomme.

Nix gefunden oder erkannt.

Schade.

guts nächtle...

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.

harff182

Zitat von Mira_Belle

Eventuell kann ich ja aushelfen, wenn von Dir im RL so viel abverlangt wird.
...
Ich hätte bis zum WE noch ein wenig Zeit.

Mira_Belle Das ist sehr, sehr lieb von Dir

Ich hatte den Code von FuchsFan etwas umgebastelt, aber fälschlicherweise angenommen, man/ich könnte irgendwie mit sowas wie urlbar[label="about:downloads"] eine Zusatzbedingung nutzen.

Schwamm drüber, war wohl ne dumme Idee...

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.

Vielleicht wäre es noch machbar, über die einzelnen {} Bereiche einen Kommentar zu schreiben, was da passiert bzw passieren soll.

Meinereiner benutz zwar fast nur :about und :download, aber wenn andereiner was anderes anpassen will, wären entsprechende Kommentare hilreich.

Hab eben auf FF110 upgedatet und noch keine Überraschung erlebt, auch deswegen hats mit meiner Antwort etwas gedauert.

Bin allerdings gleich - morgen wird "Großkampftag mit Hausbesuch"...

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.

harff182

Ich will das hier erreichen:

Ich habe schon versucht, Deinen Code aus #13 für about:about mit den Infos aus #16 für about:downloads anzupassen.

War zu dumm zum zum...

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.

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

RE: About Seiten mit CSS Codes anpassen

RE: About Seiten mit CSS Codes anpassen

RE: About Seiten mit CSS Codes anpassen

Ähnliche Themen

Symbole in den Kontextmenüs [ Update ]

neue Schaltfläche "Einheitliche Erweiterungen"

FF Menü reagiert nicht