Firefox 66 Ansicht für about:addons Seite über userContent.css Datei verändern und personalisieren

03.05.2019 14:06 Uhr | Zeiram

Vielen reicht das was Firefox optisch ab Werk bietet völlig aus, aber nicht jeder mag es dann nur in verschiedenen Grautönen und wenn man will kann man dies ja auch relativ leicht ein wenig ändern. In diesem kurzen Ratgeber zeigen wir Euch wie man mit einem Code in der userContent.css Datei die Ansicht der about:addons Seite in Firefox ein wenig an Eure Wünsche anpassen kann.

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… ^^

Ähnliche Artikel

Oben