PHNjcmlwdCBhc3luYyBzcmM9Imh0dHBzOi8vcGFnZWFkMi5nb29nbGVzeW5kaWNhdGlvbi5jb20vcGFnZWFkL2pzL2Fkc2J5Z29vZ2xlLmpzP2NsaWVudD1jYS1wdWItNTc2MjY0MDc2NzM2NjUwMyIKICAgICBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4=
Aktion: Ashampoo WinOptimizer 25 Kostenlos


Cgo8IS0tIHdpbmRvd3Nwb3dlciBtaXR0ZTIgbmV1IC0tPgo8aW5zIGNsYXNzPSJhZHNieWdvb2dsZSIKICAgICBzdHlsZT0iZGlzcGxheTpibG9jayIKICAgICBkYXRhLWFkLWNsaWVudD0iY2EtcHViLTU3NjI2NDA3NjczNjY1MDMiCiAgICAgZGF0YS1hZC1zbG90PSI3NzkzMjc1MTg2IgogICAgIGRhdGEtYWQtZm9ybWF0PSJhdXRvIgogICAgIGRhdGEtZnVsbC13aWR0aC1yZXNwb25zaXZlPSJ0cnVlIj48L2lucz4KPHNjcmlwdD4KICAgICAoYWRzYnlnb29nbGUgPSB3aW5kb3cuYWRzYnlnb29nbGUgfHwgW10pLnB1c2goe30pOwo8L3NjcmlwdD4K

Wenn man im Firefox 78 in die Urlbar klickt, werden die erste 8 Einträge der Wichtigen Seiten, die man unter dem Neuen Tab bearbeiten kann, angezeigt. Nach der Eingabe eines Zeichens werden je nach Einstellung auch gespeicherte Lesezeichen angezeigt. Das kann man an einem blauen Symbol dafür erkennen. Leider ist dieses Symbol jetzt sehr klein. Wer dieses kleine Symbol gerne deutlicher hervorheben möchte, der kann das mit einem CSS Code erreichen.

So sieht das standardmäßig für die gespeicherten Lesezeichen aus:

stern standard

Und so sieht das für die angepinnten Seiten aus:

angepinnt standard

Ich finde, die Symbole sind sehr klein, und dadurch schlecht zu erkennen.

Firefox 78 – Urlbar grünes Symbol für Lesezeichen und angepinnte Seite

userChrome.css und userContent.css erstellen

Hinweis:

Wer zum ersten mal eine dieser Dateien benutzt, der muss zusätzlich in about:config den Wert:

toolkit.legacyUserProfileCustomizations.stylesheets

auf true umschalten.

Wie das gemacht wird hatte ich hier schon mal beschrieben:

userChrome Dateien wieder nutzen

Und hier nun die Erklärung, wie man das mit dem CSS – Code dann machen muss.



Als erstes gehen wir dazu in den Profilordner vom Firefox, und öffnen dort den selber angelegten Ordner chrome.

Dann im Ordner chrome die userChrome.css Datei öffnen.

In diese Datei tragen wir nun folgenden CSS Code ein:

/*Urlbar grünes Symbol für Lesezeichen und angepinnte Seite*/
@-moz-document url(chrome://browser/content/browser.xhtml) {

.urlbarView-type-icon {
min-width: 16px !important;
height: 16px !important;
margin-bottom: 0 !important;
margin-inline-start: 0 !important;
fill: green !important;
}

.urlbarView-favicon {
margin-inline-start: 20px !important;
}
}

Und so sieht der Code dann in der userChrome.css Datei aus:

css 1

Die Farbe kann beliebig verändert werden.

devolo 8415 WLAN Powerline Adapter, Magic 1 WiFi Starter Kit -bis...
  • Smarte Mesh-Vernetzung: WLAN mit 1200 Mbit/s für Ihr gesamtes Zuhause, perfekt für Streamen, Surfen und Home-Office!

Firefox 78 – Urlbar grünes Symbol für Lesezeichen und angepinnte Seite

Dann die userChrome.css Datei schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.

Und so sieht das dann mit dem neuen farbigen Symbol für die Lesezeichen aus:

stern gruen

Und so für die angepinnten Wichtigen Seiten:

angepinnt gruen

Ich finde, es ist jetzt viel deutlicher zu erkennen, ob es sich um ein vorhandenes Lesezeichen, bzw. einer angepinnten Seite handelt.

Wenn man für alle Icons eine unterschiedliche Farbe haben möchte, dann geht das mit diesem CSS Code:

@-moz-document url(chrome://browser/content/browser.xhtml) {

.urlbarView-type-icon {
min-width: 16px !important;
height: 16px !important;
margin-bottom: 0 !important;
margin-inline-start: 0 !important;
}

.urlbarView-favicon {
margin-inline-start: 20px !important;
}

/*Lesezeichen Icon rot */
.urlbarView-row[type="bookmark"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
color: red !important;
}

/*Angepinnte Seite blau */
.urlbarView-row[pinned] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
color: blue !important;
}

/*Zu diesem Tab wechseln Icon grün */
.urlbarView:not([actionoverride]) .urlbarView-row[type="switchtab"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {
color: green !important;
}
}

Das sieht dann so damit aus:

farbe unterschiedlich Bzw. so:

farbe unterschiedlich 1

Möchte man eines Tages diese Änderung nicht mehr nutzen, dann reicht es aus, den CSS Code in der userChrome.css wieder zu löschen.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Share.
PHNjcmlwdCBhc3luYyBzcmM9Ii8vcGFnZWFkMi5nb29nbGVzeW5kaWNhdGlvbi5jb20vcGFnZWFkL2pzL2Fkc2J5Z29vZ2xlLmpzIj48L3NjcmlwdD4KPGlucyBjbGFzcz0iYWRzYnlnb29nbGUiCiAgICAgc3R5bGU9ImRpc3BsYXk6YmxvY2siCiAgICAgZGF0YS1hZC1mb3JtYXQ9ImF1dG9yZWxheGVkIgogICAgIGRhdGEtYWQtY2xpZW50PSJjYS1wdWItNTc2MjY0MDc2NzM2NjUwMyIKICAgICBkYXRhLWFkLXNsb3Q9IjM1NDg3MjYwNjEiPjwvaW5zPgo8c2NyaXB0PgogICAgIChhZHNieWdvb2dsZSA9IHdpbmRvdy5hZHNieWdvb2dsZSB8fCBbXSkucHVzaCh7fSk7Cjwvc2NyaXB0Pg==