• 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.



    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.


    https://www.win-10-forum.de/artikel-attachments/26351-mozilla-browser-firefox-about-addons-seite-userchrome.css-usercontent.css-personalisieren-anpass.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;
    	}


    https://www.win-10-forum.de/artikel-attachments/26352-mozilla-browser-firefox-about-addons-seite-userchrome.css-usercontent.css-personalisieren-anpass.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

    Gefällt dir der Artikel

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

    ?

    Meinung des Autors
    Ich mag solche Spielereien, denn sie bringen Farbe ins Leben… oder so… ^^Jetzt kommentieren!
    Hinweise & Tipps:

    1. Lade dir unsere Windows-10-App herunter, um bei einem neuen Artikel eine Push-Benachrichtung auf deinem Smartphone / Tablet / Desktop-PC zu erhalten
    2. Oder folge uns auf Facebook, Google oder Twitter um keinen News- oder Tipp-Artikel mehr zu verpassen
    3. Besuche unseren Artikel Windows 10 Fragen und Antworten für Neueinsteiger
    4. Sofern du eine bestimmte Frage zu Windows 10 hast, stelle sie einfach direkt hier
    « Amazon - Personalisierte Werbung im Browser deaktivieren oder aktivieren? So einfach geht es!Dell SupportAssist-Tool erlaubt Zugriff durch Dritte - Aktueller Patch schließt die Sicherheitslücke »
    Ähnliche News zum Artikel

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

    Outlook E-Mails nach dem Beantworten automatisch schließen - So funktioniert es!
    Man beantwortet schnell einmal eine E-Mail in Outlook und will danach am liebsten direkt etwas neues machen, aber die ursprüngliche E-Mail... mehr
    Windows 10 Datei-Explorer Dark Mode ausschalten - Kann man das Datei-Explorer Dark Theme deaktivieren?
    Viele Nutzer haben darauf gewartet aber so manchem ist es dann doch etwas zu viel, nämlich das Dark Theme das man nach einem Windows 10... mehr
    E-Mail Link öffnet Browser oder falsches E-Mail Programm in Windows 10 - Das kann helfen!
    Immer wieder haben Nutzer mit dem Öffnen von Links die eigentlich Outlook oder ein anderes E-Mail Programm starten sollten so Ihre Probleme... mehr
    YouTube Videos oder ganzen Desktop vom PC auf andere Geräte streamen - So einfach geht es!
    Google bietet bei Nutzung des Chrome Browsers ein paar nützliche Funktionen für die YouTube Webseite an die man in anderen Browsers nicht... mehr
    Zombieload Schwachstelle macht Intel Prozessoren angreifbar - Wie schützt man sich vor Zombieload
    Im Moment macht nach Foreshadow, Meltdown und Spectre eine neue Schwachstelle die Runde. Mit Zombieload sollen viele Intel Prozessoren und... mehr

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

    – deine Meinung ?
    Kommentare
    1. Avatar von Argor
      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
    Kommentar schreiben

    z.B. "Gast" oder "Mike"