Für die User die ihren Firefox gern optisch verändern, möchte ich hier mal beschreiben, wie man die Seite about:addons optisch im Firefox der Version 66 verändern kann. In der Standardansicht werden zum Beispiel der Text in den Button auf der linken Seite abgeschnitten, während auf der rechten Seite vom Fenster noch reichlich Platz vorhanden ist.
So sieht die Seite about:addons standardmäßig aus:
Firefox 66 – about:addons Seite anpassen
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.
Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.
Und hier mal eine Erklärung wie man das mit dem neuen CSS – Code dann machen muss.
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.
Als erstes gehen wir nun dazu in den Profilordner vom Firefox, und öffnen den dort selber angelegten Ordner chrome.
Dann im Ordner chrome die userContent.css Datei öffnen.
In diese Datei tragen wir nun dafür folgenden neuen CSS Code ein:
/* Hintergrundfarbe auf allen Seiten hellgrau*/
#headered-views,
#category-box,
.App,
.DiscoPane,
.Footer{
background:lightgrey!important;
}
/* Die Button auf der linken Seite */
#categories > .category,
#preferencesButton,
#helpButton,
#addonsButton{
margin-left:1px!important; /*Abstand der Button zum linken Rand*/
}
#categories > .category:not([disabled]){
background-color: silver !important;/*Hintergrundfarbe vom Button*/
margin-top:1px!important; /*Abstand zum Button darüber*/
border-radius:60px!important;/*Rundung vom Button*/
}
/*Inaktive Button*/
#categories > .category:not([selected]),
#preferencesButton,
#helpButton,
#addonsButton{
background-color: silver !important;
margin-top:1px!important;
border-radius:60px!important;
}
/*Aktiver Button rot, Schrift weiß*/
#categories > .category[selected]{
color:white!important;
background-color: red !important;
margin-top:1px!important;
border-radius:60px!important;
}
/* Hintergrund der Button blau, Schrift weiß bei hover mit der Maus*/
#categories > .category:hover,
#preferencesButton:hover,
#helpButton:hover,
#addonsButton:hover{
color:white!important;
background-color: blue!important;
margin-top:1px!important;
border-radius:60px!important;
}
/* Die Breite der Felder einer vorhandenen Erweiterung im rechten Fensterteil */
.addon.card{
max-width: initial !important;
}
/* Die Breite der Felder unter Add-ons entdecken im rechten Fensterteil */
.App,
.DiscoPane,
.Footer{
max-width: initial !important;
}
/* Alle Button auf der rechten Seite */
.addon-control{
background-color: silver !important;/*Hintergrundfarbe vom Button*/
border-radius:60px!important;/*Rundung vom Button*/
}
/* Alle Button auf der rechten Seite bei hover blau, Schrift weiß */
.addon-control:hover{
color:white!important;
background-color: blue!important;
border-radius:60px!important;
}
/* Kleiner Pfeil nach unten in einem Button, bei hover weiß */
.addon-control:hover .menulist-dropmarker{
fill:white!important;
}
/* Button oben mit dem Zahnrad */
#header-utils-btn{
background-color: silver !important;/*Hintergrundfarbe vom Button*/
border-radius:60px!important;/*Rundung vom Button*/
}
/* Button oben mit dem Zahnrad bei hover blau */
#header-utils-btn:hover{
color:white!important;
background-color: blue!important;
border-radius:60px!important;
}
/* Zurückbutton bei geöffneter Einstellung einer Erweiterung */
#go-back{
background-color: silver !important;/*Hintergrundfarbe vom Button*/
border-radius:60px!important;/*Rundung vom Button*/
}
#go-back:hover{
color:white!important;
background-color: blue!important;
border-radius:60px!important;
}
/* Die Button unter Plugins bezüglich Aktivierung */
#detail-state-menulist{
background-color: silver !important;/*Hintergrundfarbe vom Button*/
border-radius:60px!important;/*Rundung vom Button*/
}
#detail-state-menulist:hover{
color:white!important;
background-color: blue!important;
border-radius:60px!important;
}
/* Kleiner Pfeil nach unten in einem Button unter Plugins, bei hover weiß */
#detail-state-menulist:hover .menulist-dropmarker{
fill:white!important;
}
/* Button Nach Updates suchen */
#updates-view.view-pane vbox#updates-list-empty.alert-container vbox.alert button{
background-color: silver !important;
border-radius:60px!important;
}
#updates-view.view-pane vbox#updates-list-empty.alert-container vbox.alert button:hover{
color:white!important;
background-color: blue!important;
border-radius:60px!important;
}
(Dazu am besten den Text kopieren und in die userContent.css wieder einfügen)
Firefox 66 – about:addons Seite anpassen
Und so sieht der Code dann in der userContent.css Datei aus:
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.
Keine Produkte gefunden.
Dann die userContent.css Datei schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.
Und so sieht die Seite about:addons dann nach der Änderung aus:
Der Text innerhalb der Button wird vollständig angezeigt, und die Beschreibung einer Erweiterung auf der rechten Seite des Fensters ist über die ganze Seite verteilt.
Und so die Ansicht unter Plugins:
Hinweis:
Alle Werte bzw. die Farben können beliebig ausgetauscht werden. Wer die Rundungen der Button nicht möchte, der braucht nur die Einträge mit border-radius:60px!important; wieder entfernen bzw. muss sie auskommentieren. Oder bei einer nur kleinen Rundung den Wert verändern.
Firefox 66 – about:addons Seite anpassen
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 about:addons wird wieder angezeigt.
Hier hatte ich mal beschrieben was man alternativ zur userChrome.css Datei am besten machen sollte:
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)
Allgemeiner Hinweis:
Jegliche Software sollte ausschließlich und immer nur direkt vom Hersteller geladen werden.