Firefox

Firefox – Neuer Tab Seite eigenes Logo auch ohne Chronik

Wenn man sich keine Chronik anlegen lässt, dann kann man zwar auf der Seite Neuer Tab eines der Felder selber mit einem Link und Namen belegen, aber es wird kein Logo der Webseite angezeigt.

Neuer Tab Seite eigenes Logo auch ohne Chronik

So sieht das standardmäßig aus:

ohne icon

Wie man sieht, ist zwar der Link/Name eingetragen, aber kein Icon vorhanden.

Bis zur Firefox Version 56 war es möglich, solche Änderungen durch diverse Erweiterungen zu erreichen.

Das eine oder andere ist seit der Firefox Version 57 nicht mehr möglich, da Mozilla dafür (zumindest noch) keine Schnittstelle mehr zur Verfügung stellt.

Aus diesem Grund muss man jetzt optischen Änderung am Firefox mit einer userContent.css bzw. einer userChrome.css Datei erstellen.

test

Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.

userChrome.css und userContent.css erstellen

Hinweis:

Es ist zwar eine optische Veränderung der Ansicht im Firefox, trotzdem wird in diesem Fall die Datei userContent.css und nicht die Datei userChrome.css zur Anpassung benötigt.

Pauschal kann man sagen, alles was sich im Firefox in einem neuen Tab öffnet, muss mit der userContent.css Datei angepasst werden.

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

toolkit.legacyUserProfileCustomizations.stylesheets

auf true umschalten.

Eine genaue Erklärung dazu hatte ich hier schon mal geschrieben.

userChrome Dateien wieder nutzen

Und so wird das dann mit dem CSS – Code gemacht.

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

In dem Ordner chrome muss jetzt ein neuer Ordner mit dem Namen Icons erstellt werden.

ordner icons erstellt

In diesem Ordner Icons müssen alle später benötigten Icons/Bilder hinterlegt werden.

Das sieht dann z.B. so aus:

icon im ordner

Danach den Ordner chrome, und dann darin die userContent.css Datei öffnen.

In diese Datei tragen wir nun dafür folgenden neuen CSS Code ein:

 /* Eigenes Icon auf Neuer Tab Seite ohne angelegte Chronik */
 
li.top-site-outer:nth-child(10) > div:nth-child(1) > a:nth-child(1) > div:nth-child(1){
    background: url("./Icons/1.png") no-repeat !important; 
    background-position: 5px 2px !important;
}

(Dazu am besten den Text kopieren und in die userContent.css wieder einfügen)

Neuer Tab Seite eigenes Logo auch ohne Chronik

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

css code
Neuer Tab Seite eigenes Logo auch ohne Chronik

In meinem Beispiel habe ich das 10te Feld von oben links gerechnet angesprochen.



Im ersten Teil vom Code lautet der Eintrag dafür:

li.top-site-outer:nth-child(10)

Diese Zahl 10 musst dann also immer exakt anpassen.

Und so sieht der Pfad zu dem Icon im Ordner Icons aus:

background: url("./Icons/1.png") no-repeat !important;

Hier muss dann jeweils der Eintrag 1.png gegen den Namen des eigenen beliebigen Icons ausgetauscht werden.

Das Icon sollte aber nicht zu klein sein, in meinem Beispiel habe ich eine Größe von 95 x 95px genommen, was ich mir vorher mit einer Bildbearbeitungssoftware angepasst hatte.

Damit man später noch genau weiß was der jeweilige CSS Code bedeutet, sollte man sich über dem CSS – Code einen aussagekräftigen Hinweis erstellen.

Dazu schreibt man vor dem Text erst einen Slash und einen Stern /* dann die Beschreibung der Funktion…und als Abschluss schreibt man diesmal erst den Stern und dann das Slashzeichen */

Die Zeichen vorher und nachher bedeuten, dass der Text auskommentiert ist, und somit keinen Einfluss auf den CSS Code bzw. seine Funktion hat.

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

Und so sieht die Seite Neuer Tab dann nach der Änderung aus:

mit icon

Es wird jetzt zu dem Namen der eingetragenen Webseite auch ein Icon angezeigt.

Neuer Tab Seite eigenes Logo auch ohne Chronik

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

Danach noch einen Neustart vom Browser machen, und die Standardansicht der Seite Neuer Tab wird wieder ohne das Icon angezeigt.

Hier hatte ich mal beschrieben was man alternativ zur userChrome.css Datei am besten machen sollte:

userChrome.css aufräumen

Vorteil dadurch, es ist alles viel übersichtlicher und man findet schneller mal etwas wieder.

Dieser Tipp kann bzw. sollte auch auf die Datei userContent.css angewandt werden.

(Diese Datei wird für optische Änderungen an Webseiten, bzw. allen Firefox Seiten die in einem neuen Tab geöffnet werden benötigt)

Auch interessant:



Auf diese Seite sind Amazon-Links enthalten. Als Amazon-Partner Verdienen wir an qualifizierten Verkäufen, falls Du auf einen entsprechenden Amazon Link klickst.
Haben Sie Fragen zum diesen Artikel oder generell zu Windows oder Computer? Dann wendet euch an unserem Forum

Ähnliche Artikel

Schaltfläche "Zurück zum Anfang"