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

Nachgereicht!

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

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

Deine Codes können so wie gepostet nicht funktionieren...

Im obigen Code Zeile 23: zweimal ein ;

Im anderen Code entsprechend genauso...

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.

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.

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

Ich würde zwar auch grundsätzlich Anführungszeichen verwenden, die sind aber tatsächlich optional, solange es kein Leerzeichen im Pfad gibt.

Schaden tun sie demnach aber nicht und man hat sie drin, wenn man sie braucht...

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!

/* 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;
}

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.

Zitat

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

Der relevante Ausschnitt im Quelltext des SVG 'avatar-empty.svg' lautet: fill="context-fill" fill-opacity="context-fill-opacity"

Wenn das genau so im css berücksichtigt wird, sollte es auch funktionieren.

Hier nochmal das SVG zum Abgleich:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
  <path d="M8.5 13.25c1.912 0 3.571-1.038 4.489-2.569A1.993 1.993 0 0 0 11.495 10l-5.99 0c-.596 0-1.126.267-1.494.681.918 1.531 2.577 2.569 4.489 2.569z"/>
  <path d="M8.5 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/>
  <path d="M8.5 2.25c3.446 0 6.25 2.804 6.25 6.25s-2.804 6.25-6.25 6.25-6.25-2.804-6.25-6.25S5.054 2.25 8.5 2.25M8.5 1a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15z"/>
</svg>

Danke jane,

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

So geht das:

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

Zitat von jane

So geht das:

Sehr schön, entfällt das doch recht umständliche "Gefiltere":

filter: invert(13%) sepia(68%) saturate(7447%) hue-rotate(1deg) brightness(103%) contrast(117%);

Zitat von BrokenHeart

entfällt das doch

Leider aber nicht überall.

Z.B. bei einem Icon einer Erweiterung, funktioniert die andere Version hier nicht

Zitat von 2002Andreas

Z.B. bei einem Icon einer Erweiterung, funktioniert die andere Version hier nicht

Hast du mal ein Beispiel?

Zitat von BrokenHeart

Hast du mal ein Beispiel...

Z.B. bei der Erweiterung Clippings.

da funktioniert nur dieser Code hier:

#_91aa5abe-9de4-4347-b7b5-322c38dd9271_-browser-action {
   filter: invert(12%) sepia(75%) saturate(4294%) hue-rotate(354deg) brightness(108%) contrast(120%) !important;
}

PS:

Bin mal eine Weile offline jetzt.

Hab mir 'Clippings' jetzt mal testweise installiert.

Zitat von 2002Andreas

da funktioniert nur dieser Code hier:

Ja, scheint so zu sein, da Im 'svg' für fill/stroke -> context-fill/context-stroke gesetzt sein muss.

Falls es dafür nicht auch eine einfachere Lösung gibt, nutzt man halt wahlweise das eine oder andere...

Ja klar, das geht nur mit Icons, die Mozilla-eigen sind, die z.B. fill auf fill="context-fill"

gesetzt haben. Bei 3-rd-party-icons - oder Icons von Erweiterungen - , die fill auf 'blue'

oder Sonstiges setzen, steht die Farbe fest, damit sind somit auch einfache Änderungen fast nicht möglich.

Also bleibt es dann doch beim Filtern, da das ja überall funktioniert.

Zitat von jane

das geht nur mit Icons

Danke für die Erklärung

Unter Umständen kann es ja Mira_Belle helfen. Das war das Ziel.....