Firefox about:addons Ansicht personalisieren mit userContent.css Skript - So einfach geht es!

Wer es gerne bunt und individuell mag will vielleicht auch in diverse Menüs und Einstellungen etwas mehr Farbe bringen und in Firefox geht dies aktuell wenn man will mit einem Stück Code über die userContent.css Datei. Wie man die about:addons Ansicht per userContent.css in Firefox ändern kann zeigt Euch dieser kurze Ratgeber.

Alles zum Thema Microsoft auf Amazon​

Wie man die userContent.css Datei ganz einfach anlegen kann haben wir in diesem Ratgeber bereits erklärt und diese Datei ist auch zwingend notwendig wenn man die about:addons Seite verändern will. Öffnet die Datei userContent.css und kopiert den Code unter dem folgenden Screenshot hinein. Wenn dort schon andere Skripte stehen fügt ihn per Copy&Paste einfach ganz am Ende mit dazu ein.

Vor Änderung der userContent.css Datei​

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

Nach Änderung der userContent.css Datei​

Ein sehr umfangreicher Code, aber darum muss man ihn ja zum Glück auch nicht mehr selber schreiben. Alle wichtigen Punkte sind mit Hinweisen versehen, so dass man das Ganze in Farben, Form und Größe auch ein wenig anpassen kann wenn man will. Macht man einen Fehler und die Ansicht ist völlig zerstört kann man den Code einfach wieder löschen oder durch diesen hier ersetzen und von vorne anfangen. Änderungen werden aber immer erst nach einem Neustart des Firefox Browsers übernommen.

Quelle: WindowsPower​

Meinung des Autors: Ich mag solche Spielereien, denn sie bringen Farbe ins Leben… oder so… ^^

 

[Argor]

Ich nutze diese css schon längere Zeit, um damit verschiedene Systeme in meinem Arbeitsumfeld auseinanderhalten zu können. Dabei sind die Frontend-Seiten eigentlich alle nur im Domain-Namen zu unterscheiden. Diese im Hintergrund farblich zu kennzeichnen hat mir schon manchen üblen Fehler beim Wechsel zwischen Entwicklungs-, Test- oder Produktivsystem erspart.
Es sit also nicht nur als "nette farblich Spielerei" nutzbar
Daher finde ich den Hinweis hier absolut TOP