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

    Mir ist da eben eine Idee gekommen wie es auch ohne Url-Bar-Eintrag gehen könnte.

    Bitte nicht lachen, bin ja CSS-Dummy...

    Mit tab.tabbrowser-tab[label="Downloads"][selected] {} oder so ähnlich könnte man checken, was im

    TAB steht, hier also mein vielgeliebter Text "Downloads".

    Wenn diese Bedingung erfüllt ist, bugsiert man das gewünscht Icon in die Urlbar rein:

    CSS
    #identity-box[pageproxystate="valid"].chromeUI::after
{
    background: url("../icons/download.gif/") !important;
    background-repeat: no-repeat !important;
    background-position: 80px 1px !important;
    background-size: 15px 15px !important;   
    padding-right: 24px !important;
}

    :( Ich bin aber zu dumm zum zum, die Idee in funktionierenden Code umzusetzen...

    W11 Home 64bit - FF128.x

    Zitat von jane

    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 <3 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. :D

    Mit <3lichem Gruß

    Mira

    3 Mal editiert, zuletzt von Mira_Belle (17. Februar 2023 um 23:44) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

    Zitat von grisu2099

    Vielleicht hat

    Wie Sören schon sagte, nur mit CSS geht es nicht.

    Und die Aussage von Heinrich von hier:

    stimmt so auch nicht.

    Die Icons die er in seinen Bildern anzeigt, sind nämlich Standard vorhanden wenn man das Skript FavIconInUrlBar.uc.js nutzt.

    D.h., er hat sich auch nicht nachträglich selber eingefügt ;)

    Und einzelne Icons hat Mira_Belle ja auch selber eingefügt, nur eben nicht für jede about Seite ein anderes.

    Ob bzw. wie das mit einem Skript geht, kann ich nicht sagen.

    Zitat von 2002Andreas
    Zitat von grisu2099

    sind aber nicht Standard!

    Naja, er hat vorhandene Icons ausgetauscht, das ist etwas anderes als kompl. welche einzusetzen.

    Hat er mit an Sicherheit grenzender Wahrscheinlichkeit nicht!

    Zumindest nicht direkt per CSS, denn an die Favicons kommt man so ohne weiteres nicht ran. (In der Adressleiste!)

    Es sei denn, er hat die Favicons "direkt" über die Tabs bearbeitet, das könnte unter Umständen möglich sein :!:

    Damit habe ich mich nicht beschäftigt, weil die Zielsetzung ja eine andere war, und

    uns auch nicht weiter bringt, da die meisten internen Seiten gar kein Favicon haben.

    Aber ich habe schon einige Male darauf hingewiesen, dass es wohl nur über ein JavaScript möglich sein wird,

    individuelle Symbole den einzelnen Tabs und somit über die vorhandene Funktion des FavIconInUrlBar.uc.js Scripts

    diese dann in die Adressleiste zu kopieren.

    Um das zu bewerkstelligen, müsste das Script abfragen, ob es denn schon ein Favicon gibt,

    wenn nicht das Label abfragen um dann dem Label ein Icon (Symbol) zuzuordnen und dieses dann

    in die Adressleiste zu kopieren.

    Hinzukommen muss dann noch eine Funktion zur Fehlervermeidung!

    Ist mir heute Nacht so durch den Kopf geschwirrt, weiß aber nicht mehr das Szenario.

    Nachtrag

    Wer Zeit und Lust hat, kann den Weg über die Favicons ja mal ausprobieren,

    die wirkliche Herausforderung wird dann aber sein, ein Favicon zu ersetzen, welches gar nicht vorhanden ist!

    Und sollte das wirklich funktionieren, wird das Ende der Fahnenstange wohl dann erreicht sein,

    wenn es individuell werden soll!

    Ich denke, diesen Aufwand kann man sich sparen, denn für dieses Ergebnis hätten wir ja eine fast identische Lösung.

    Der Unterschied würde meiner Meinung nur darin bestehen, dass interne Seiten, welche ein Favicon schon mitbringen,

    ein eigenes, individuelles Symbol zugewiesen werden kann.

    Da finde ich den Ansatz über ein erweitertes, neues JavaScript zum Anpassen der Symbole irgendwie sympathischer.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (18. Februar 2023 um 13:49) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

    Zitat von Mira_Belle

    Hat er mit an Sicherheit grenzender Wahrscheinlichkeit nicht!

    Zumindest nicht direkt per CSS

    :/

    Standard:

    Mit CSS:


    Ohne auf weitere Einzelheiten einzugehen:

    Du hast mich wohl falsch verstanden, denn öffne mal about:config, about:performance, about:preferences

    und/oder about:processes :!:

    Und genau das, Dein CSS Beispiel, habe ich ja genau so umgesetzt. => #48

    Was ich meinte, ist, dass er wohl nur über den Weg der "Tabsicons" (Favicons) gegangen sein kann,

    dann dann, und nur dann, lassen sich diese Symbole dirkt ansprechen und eben auch austauschen,

    und zwar einzeln!

    Natürlich im zusammenspiel mit dem Script.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (18. Februar 2023 um 14:45)

    Zitat von Mira_Belle

    Du hast mich wohl falsch verstanden

    Nein.

    Du hast gesagt, das Icon lässt sich nicht per CSS tauschen.

    Dass das dann ein Problem auf den anderen Seiten ist, habe ich ja auch nicht bestritten.

    Und bisher haben wir keinerlei Belege wie Heinrich das angeblich per CSS Code für alle Seiten unterschiedlich gemacht hat, was laut Sören gar nicht geht. ;)

    Zitat von 2002Andreas

    Nein.

    Du hast gesagt, das Icon lässt sich nicht per CSS tauschen.

    Dass das dann ein Problem auf den anderen Seiten ist, habe ich ja auch nicht bestritten.

    Und bisher haben wir keinerlei Belege wie Heinrich das angeblich per CSS Code für alle Seiten unterschiedlich gemacht hat, was laut Sören gar nicht geht. ;)

    Mh, doch, denn es waren die gemeint! Es geht immer um die und ums individuelle austauschen einzelner Symbole (Icons)!

    Und wie er es gemacht haben könnte, habe ich auch aufgezeigt!

    Nur würde das eben NUR bei den Seiten greifen,

    wo eben auch ein Favicon vorhanden ist, welches man ersetzen kann!

    Somit ist es wohl, so denke ich, doch möglich und ich glaube eben nicht an ein Fake seitens Heinrich.

    Probiere es doch einfach mal aus, sollte für Dich doch ein Klacks sein.

    Favicon gegen eine Grafik austauschen.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (18. Februar 2023 um 14:53)

    Zitat von Mira_Belle

    Es geht immer um die

    Von Heinrich gibt es 3 Screenshots, wo eh schon ein Icon vorhanden ist.

    Er hat also die 3 dann nur ausgetauscht.

    Seiten die kein Icon haben, und er eines eingefügt hat, hat er nicht gezeigt.

    Zitat von Mira_Belle

    waren die gemeint!

    Ich weiß welche gemeint sind, nämlich alle für unterschiedliche about Seiten, darum geht es in diesem Thread ja ;)

    Und da ich keine Lösung per Skript kenne, ist das Thema für mich praktisch erledigt.

    Zitat von 2002Andreas

    Und bisher haben wir keinerlei Belege wie Heinrich das angeblich per CSS Code für alle Seiten unterschiedlich gemacht hat, was laut Sören gar nicht geht. ;)

    Alle Seiten?

    Die Bildchen zeigen aber nur Seiten, die ein eigenes Favicon mitbringen,

    und genau deswegen ist mir die Idee mit den Tabicon (Favicons) überhaupt erst gekommen.

    Mit <3lichem Gruß

    Mira

    Zitat von 2002Andreas

    Bei Nutzung vom dem Skript wird das so angezeigt.

    Alles klar, wir gingen beide von einem anderen „Standard“ aus. :D

    Zitat von 2002Andreas

    Und bisher haben wir keinerlei Belege wie Heinrich das angeblich per CSS Code für alle Seiten unterschiedlich gemacht hat, was laut Sören gar nicht geht. ;)

    Die Frage ist nicht nur an dich gerichtet, ich hab deine Aussage jetzt nur stellvertretend für ein paar Beiträge zitiert.

    Hat er denn irgendwo geschrieben, dass er das ohne Mitwirken eines Scripts gemacht hätte? Ein paar Beiträge weiter oben wurde auf diesen Beitrag verwiesen und dort schrieb er nur, dass er es geschafft hat, jeder dieser Seiten ein eigenes Icon zu geben. Da steht nichts davon, dass das alleine via userChrome.css passiert wäre.