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

Diskutiere Firefox about:addons Ansicht personalisieren mit userContent.css Skript - So einfach geht es! im Windows 10 FAQ Forum im Bereich Windows 10 Foren; 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...
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.

MozillaFirefoxVideosÜberblendungseffekteÜberblendeffekteÜberblendenEffekteVollbildvideos.png



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.

MozillaBrowserFirefoxAboutAddonsSeiteuserchrome.cssusercontent.csspersonalisierenanpass.png


Vor Änderung der userContent.css Datei​

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

MozillaBrowserFirefoxAboutAddonsSeiteuserchrome.cssusercontent.csspersonalisierenanpass-1.png


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

Erfahrener Benutzer
Dabei seit
30.04.2019
Beiträge
739
Ort
Saarland
Version
Win 10 x 64 Pro 2004
System
X-570, R9 3900X, 32 GB, RTX 3080 STRIX OC, PG348Q
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
 
Thema:

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

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

Firefox Farbe und Form der Browser Tabs per userChrome.css Datei verändern - So funktioniert es!: Über die useChrome.css Datei kann man einige Veränderungen vornehmen und auch wenn vieles davon vielleicht nur Spielerei ist kann man aber auch...
Firefox Trennlinien in Farbe und Stärke anpassen mit userChrome.css Datei - So einfach geht es!: Bei dem einen muss Firefox eben einfach nur funktionieren, die anderen nutzen Add-Ons für weitere Funktionen und wieder andere wollen auch die...
Firefox Lesezeichen-Symbolleiste mehrzeilig darstellen über userChrome.css Datei - So geht es!: Wer gerne viele Webseiten direkt über die Lesezeichen-Symbolleiste im Firefox Browser erreichen will ist entweder von der Menge her durch den...
Firefox Lesemodus in der Breite anpassen per userContent.css Datei - So einfach geht es!: Im Firefox Browser kann man eine Lesemodus aktivieren mit dem dann die Webseite den Artikel als Text mit wenig Grafik darstellt und auch Objekte...
Firefox userContent.css Datei nutzen und Farben für Textmarkierungen im Firefox Browser ändern: Wenn es um kleine Tweaks aller Art geht ist das für den einen Spielerei, für den nächsten einfach der Spaß am Verändern und für andere ist die...
Oben