Beiträge von Büssen

Büssen · 3. Juni 2020

Hallo,

das Quadrat konnte ich mit dem ersten Code in einen Kreis verwandeln.

Habe versucht, meinen Pfad zu den Icons einzugeben:

CSS

background: url("../../../Icons/update.png") no-repeat !important;

Den Pfad habe ich zu meinem Profil gewählt - nach oberer Vorgabe.

z.B. "G:/Firefox_2-Profil/chrome/Icons/update.png"

Hat aber nicht funktioniert. Was mache ich falsch?

Nachtrag: Fehler entdeckt >> habe die Klammern nicht entfernt!!

Büssen · 3. Juni 2020

Hallo edvoldi ,

Zitat von edvoldi

Oh Schreck, ich sehe gerade das ich den falschen Code in #509 kopiert habe.,
jetzt ist der richtige drin.

Der Schreck ist inzwischen wohl verflogen!

Ich habe mir nunmehr mal die Mühe gemacht, deine "about addons" vom 02.0420 für mich umzubauen.

sieht so aus:

Wie spreche ich nun (s.a. Pfeil) "Werkzeuge für alle Addons" an? Hier ist es ja noch ein Quadrat - in deiner neuen Fassung ist es ein Kreis.

Ich schaffe es nicht, dort ein Icon unter zu bringen.

Büssen · 29. Mai 2020

Zitat von edvoldi
Hallo Büssen,
ich würde erst einmal nur meinen Code nehmen und testen was fehlt oder falsch ist.
Auch im Kreis neben Themen von EDV-Oldie, das solltest Du auch noch ändern, denn es sind ja Deine, fehlt ein Icon.
CSS
background: url("../../../Icons/update.png") no-repeat !important;
das müsstest Du löschen oder ein anderes Icon eingeben.
Im Code #509 habe ich schon die fehlende Farbe im oberen Bereich eingetragen.
Code
Dann würde ich so nach und nach die anderen Änderungen eintragen.

Hallo edvoldi,

vielen Dank für die Antwort, die mich aber erneut vor ein Problem stellt.

Ich hatte den Code von #509 gleich, nachdem eingestellt, bei mir unter FX 76.01. installiert.

Der (jetzige) Code' im #509 ist aber ein anderer - den müsstest du inzwischen geändert haben

Zuerst war es dieser:

Code

/***   AGENT_SHEET   *********************/
/***   Geändert von EDV-Oldie   **********/
/***   Letzte Änderung am 27.05.2020   ***/

@-moz-document    url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
                url-prefix(about:addons) {

Nun steht da aber ein anderer:

Code

/***   AGENT_SHEET   *********************/
/***   Geändert von EDV-Oldie   **********/
/***   Letzte Änderung am 28.05.2020   ***/
/***   https://www.camp-firefox.de/forum/thema/130540-about-seiten-mit-css-codes-anpassen/   */

@-moz-document    url-prefix(about:preferences) {

Zitat

background: url("../../../Icons/update.png") no-repeat !important;

Das haut mich aus den Socken - denn in beiden ist diese Zeile

nicht vorhanden.

Ich weiß nun nicht mehr, wo bei mir genau der Fehler liegen könnte .

Vielleicht hilfst du mir mal auf die Sprünge?

Büssen · 29. Mai 2020

Moin edvoldi,

nachdem ich o.g. Code installiert habe, sieht es nunmehr so aus:

In Themes sieht es noch nicht so aus, wie im #498 dargestellt. Vielleicht fällt dir noch was ein?

Zitat von edvoldi

Ich habe da einen Code der auf mehrere Seiten wirkt und ich weiß noch nicht wo der ist.

den habe ich vorher auch schon nutzen können, z.B. für dieses Forum:

Diese Darstellung war vorher nicht so.

Daher fand ich es ganz praktisch, hervorgerufen durch deinen (versteckten) Code.

Übrigens bin ich auch ein Fan von "Silvermel" - genutzt seinerzeit im Firefox und Thunderbird.

Erst mal Danke für die Bemühungen!

Büssen · 28. Mai 2020

Hallo edvoldi,

Habe den Code mal mit Einstellung 90% laufen - sieht so aus:

Der zeigt sich noch nicht im richtigen Gewand. In der Card fehlt (s.a.'#498) der richtige Inhalt für das "Theme" "charamel 25".

Im oberen Bereich hakt es auch noch?

PS: ich mache erst mal eine Pause!

Büssen · 28. Mai 2020

Zitat von edvoldi

habe ich schon

Gruß
EDV-Oldi

Hallo edvoldi ,

habe mal von dir diesen Code übernommen:

CSS

/*   AGENT_SHEET **********************/
/*   Geändert von EDV-Oldie ***********/
/*   Letzte Änderung am 02.04.2020 ****/


 
/*   FF - Add-ons-Manager - checkbox   */

    menuitem[checked="true"] > .menu-iconic-left{
    -moz-appearance: menuimage !important;
    }
    menuitem[type="checkbox"] .menu-iconic-icon {
    display:block  !important;
    }

    menuitem[type="checkbox"] {
    -moz-appearance:none !important;
    margin-bottom: 4px !important;
    background: url("../../../Icons/blocked.png") no-repeat !important;
    padding-left:5px!important;
    background-position:5px 1px !important;} 


    menuitem[type="checkbox"][checked="true"] {
    -moz-appearance:none !important;
    margin-bottom: 4px !important;
    background: url("../../../Icons/V_grün.png") no-repeat !important;
    padding-left:5px!important;
    background-position:5px 1px !important;}


/*   FF - Add-ons-Manager linke Spalte   */

    #sidebar {
    background-color: darkgray !important;
    }

    #categories {
    margin-top:-1px !important;
    }
    #categories > .category,
    #preferencesButton,
    #addonsButton,
    #help-button {
    margin-left:1px!important;
    }
    #categories > .category:not([disabled]) {
    border-radius:60px!important;
    }
    

    
    #category-availableUpdates {
    color:red !important;
    }
    
    #category-discover .category-icon {
    background: silver url("../../../Icons/Add-ons-Web.png") !important;
    -moz-image-region: auto !important;}
    #category-discover[selected="true"] {
    background-color: silver !important;
    color: white !important; }
    
     
    #category-extension .category-icon {
    list-style-image: url("../../../Icons/addon_grün_32.png") !important;
    -moz-image-region: auto !important;}
    #category-extension[selected="true"] {
    background-color: silver !important;
    color: white !important;
    }
    
     
    #category-theme .category-icon {
    list-style-image: url("../../../Icons/themen_36.png") !important;
    -moz-image-region: auto !important;}
    #category-theme[selected="true"] {
    background-color: silver !important;
    color: white !important; }
     
     
    #category-plugin .category-icon {
    list-style-image: url("../../../Icons/plugin.png") !important;
    -moz-image-region: auto !important;}    
    #category-plugin[selected="true"] {
    background-color: silver !important;
    color: white !important; }
     
     
    #category-dictionary .category-icon {
    list-style-image: url("../../../Icons/wörterbücher_32.png") !important;
    -moz-image-region: auto !important;}
    #category-dictionary[selected="true"] {
    background-color: silver !important;
    color: white !important; }

    #preferencesButton,
    #addonsButton,
    #help-button,
    #category-availableUpdates {
    background-color: silver !important;
    margin-top:5px !important;
    border-radius:60px !important;
    }
    #preferencesButton:hover,
    #addonsButton:hover,
    #help-button:hover {
    color:white !important;
    background-color: gray !important;
    margin-top:5px !important;
    border-radius:60px !important;
    }
    
    #preferencesButton .sidebar-footer-link.preferences-icon {
    list-style-image: url("../../../Icons/config.png") !important;
    -moz-image-region: rect(0px 0px 0px 0px) !important; }
    

    #addonsButton {
    list-style-image: url("../../../Icons/addons.png") !important;
    -moz-image-region: rect(0px 16px 16px 0px) !important; }
    
    
    #help-button .sidebar-footer-link {
    list-style-image: url("../../../Icons/hilfe.png") !important;
    -moz-image-region: rect(0px 16px 16px 0px) !important; }



/*   FF - Add-ons-Manager rechte Spalte   */

/*   Rechte Spalte Breite einstellen      */
/*   Farbe   */
    html[dir="ltr"],
    .sticky-container,
    .main-search,
    .main-heading {
    background: silver !important;
    }    
    
    
/*   Name für Erweiterungen & erste Zeile   */
    .header-name {
    font-size:0px !important;
    margin-top: 17px !important; 
    }
    .header-name[data-l10n-id="extension-heading"]:after{
    font-size:18px !important;
    font-weight: bold !important;
    content: 'Erweiterungen von EDV-Oldi' !important;
    }
    .main-search {
    max-height: 10px !important;
    }    
/*   Name für Erweiterungen Ende   */    
    .search-label{display: none !important; }
    .header-name{margin-top: -35px !important; }
    .page-options-menu{margin-top: -70px !important; margin-right: 100px !important;}
    .main-search{margin-left: 500px !important;}
/*   Name für Erweiterungen & erste Zeile Ende   */


/*   Rechte Spalte Breite einstellen   */
    addon-list addon-card > .addon.card,
    addon-card[expanded] >.addon.card {
    width: 72vw !important; }
  

/*   Aktiv-Passiv Farbe   */
    .list-section-heading[data-l10n-id="extension-enabled-heading"],
    .list-section-heading[data-l10n-id="theme-enabled-heading"],
    .list-section-heading[data-l10n-id="plugin-enabled-heading"],
    .list-section-heading[data-l10n-id="dictionary-enabled-heading"] {
    background: gainsboro !important;
    font-weight: bold !important;
    color: green !important;
    text-indent: 15px;
    }
    .list-section-heading[data-l10n-id="extension-disabled-heading"],
    .list-section-heading[data-l10n-id="theme-disabled-heading"],
    .list-section-heading[data-l10n-id="plugin-disabled-heading"],
    .list-section-heading[data-l10n-id="dictionary-disabled-heading"] {
    background: gainsboro !important;
    font-weight: bold !important;
    color: red !important;
    text-indent: 15px;
    }
    
/*   Aktiv-Passiv Farbe Ende   */


/*   Add-on Manager - Farbe der Elemente anpassen   */
    .addon.card {
    background: gainsboro !important;
    max-width: initial !important;
    }

/*** Hintergrund der Container bei Hover andere Farbe ****/ 
    addon-card:not([expanded="true"]) .addon.card:hover {
      background: #76ee00 !important;
      border: 1px solid green ! important;
    }

/*** Umrandung der Container bei Hover breiter Rand und andere Farbe ****/ 
    :root {
    --card-outline-color: DarkOrange !important;
    }

/**** fortlaufende Nummerierung installierter Erweiterungen, Themes, usw. ****/    
    body {
      counter-reset: section;                     
    }

/**** Hintergrund Container und Umrandung ****/    
  /*   addon-list addon-card > .addon.card {
      background: #F8F8FF !important;
      border: 2px solid #EEAD0E !important;
      border-radius: 20px !important;
    }                 */

   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
      color: red !important;
      font-weight: bold !important;
      counter-increment: section;                 
      content: counter(section, decimal-leading-zero)".) ";
      padding-right: 20px !important; 
      margin-top:5px!important; /* Lage im Container */
      margin-left: -5px !important; /* Abstand vom linken Rand */
    }  


/*   Add-on Manager - Farbe der Elemente anpassen Ende   */

    
    #list-view > #addon-list .date-updated {
    display: block  !important; }
    
    
/*   Add-ons-update   */ 
    panel-list {
    background: gainsboro !important;
    }
    .more-options-button[action="page-options"] {
    background: url("../../../Icons/update.png") no-repeat !important;
    border: 1px solid blue !important;
    padding-left:5px!important;
    background-position:5px 5px !important; 
    }
    .more-options-button[action="page-options"]:hover {
    background: gray url("../../../Icons/update.png") no-repeat !important;
    border: 1px solid blue !important;
    padding-left:5px!important;
    background-position:5px 5px !important;
    }
    

    panel-item[action="check-for-updates"][data-l10n-id="addon-updates-check-for-updates"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/updates_prüfen.png") !important; }
    
    
    panel-item[action="view-recent-updates"][data-l10n-id="addon-updates-view-updates"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/update_1.png") !important; }


    panel-item[action="install-from-file"][data-l10n-id="addon-install-from-file"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/update_2.png") !important; }


    panel-item[action="debug-addons"][data-l10n-id="addon-open-about-debugging"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/addons_debuggen.png") !important; }
    
    
    panel-item[action="set-update-automatically"][data-l10n-id="addon-updates-update-addons-automatically"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/V_grün.png") !important;
    }    
/*    panel-item[action="set-update-automatically"][data-l10n-id="addon-updates-update-addons-automatically"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/blocked.png") !important; }    */    
    
    
    panel-item[action="reset-update-states"][data-l10n-id="addon-updates-reset-updates-to-automatic"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/addons_auto.png") !important;
    }    
    panel-item[action="reset-update-states"][data-l10n-id="addon-updates-reset-updates-to-manual"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/addons_manuell.png") !important; }
    
    
    panel-item[action="manage-shortcuts"][data-l10n-id="addon-manage-extensions-shortcuts"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/keybord.png") !important; }

    
    
/*   Ghost Button Erweiterungen   */

/*  panel-item[action="toggle-disabled"][data-l10n-id="disable-addon-button"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/deaktivieren.png") !important; }
    
    panel-item[action="toggle-disabled"][data-l10n-id="enable-addon-button"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/addons.png") !important; }
*/    
    
    panel-item[action="remove"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/papierkorb_rot.png") !important; }
    
    panel-item[action="install-update"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/update.png") !important; }
    
    panel-item[action="preferences"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/config.png") !important; }
    
    panel-item[action="report"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/warnung.png") !important; }
    

    panel-item[action="expand"] {
    --icon:  url("file:///C:/Dropbox/Chrome/Icons/V_grün.png") !important; }
    
    
/*   Ghost Button Plugins   */

    panel-item[data-l10n-id="manage-addon-button"] {
    --icon: url("file:///C:/Dropbox/Chrome/Icons/addon_verwalten.png") !important; }
    
    
    panel-item[data-l10n-id="ask-to-activate-button"] {
    --icon: url("file:///C:/Dropbox/Chrome/Icons/info_1.png") !important }
    
    
    panel-item[data-l10n-id="always-activate-button"] {
    --icon: url("file:///C:/Dropbox/Chrome/Icons/always-activate.png") !important; }
    
    
    panel-item[data-l10n-id="never-activate-button"] {
    --icon: url("file:///C:/Dropbox/Chrome/Icons/never-activate.png") !important; }
    
    
/*   Ghost Button weitere Einstellungen   */
    named-deck-button[data-l10n-id="permissions-addon-button"] {
    background: red !important;
    color: green !important; } 
    
    
    
    
    
     
     


     /*   Add-ons-Manager Ende   */

Alles anzeigen

Leider bekomme ich z.B. bei "Themes" nicht das angezeigt wie auf deinem Beispielbild.

Kannst du da mal reinschauen.

Büssen · 27. Mai 2020

Moin,

ich habe zugelangt. Musste in der Darstellung noch Anpassungen vornehmen, da ich sicher eine andere Auflösung verwende.

Sieht nunmehr so aus (Firefox 76.01):

Ich hoffe, dass ich alles richtig dargestellt habe.

Büssen · 25. Mai 2020

Zitat von FuchsFan

Hallo Büssen!
.............................................
So, Hauptsache du bist zufrieden. Der Code könnte noch geändert werden, die Thematik dazu hast du ja mitbekommen. Wenn du ihn bereinigt haben möchtest, so sag an.

Nachtrag:
Du müsstest mal uBlock aktualisieren, Version 1.27.6 ist schon dran.

Alles anzeigen

Ich werde erstmal weiter testen. diese Version unterscheidet sich im Design ein wenig von der Vorversion.

Bei Kick auf "Zahnrad" waren z.B. immer Icons im Klappfenster drin.**

Du siehst aber auch alles (uBlock).!!

Mein Hauptgerät ist und bleibt immer noch der PC - da ist die richtige Version drauf.

**Nachtrag: die neue Version auf dem PC zeigt die Icons an! Aufgrund des größeren Bildschirms natürlich auch nicht mehr die verdeckten Schriften bei "Plugins."

Büssen · 25. Mai 2020

Zitat von FuchsFan

So, Büssen, hier wird nicht aufgegeben, soweit kommt das noch.

Du nimmst jetzt mal für den kleinen Bildschirm diesen Code (kannst für jeden nehmen mit Anpassungen), die Breite der Container ist auf 800 Pixel eingestellt. Das kannst du verändern in Zeile 55 .

Moin FuchsFan,

ich wollte mit meinem Anliegen eigentlich nicht so viel Staub aufwirbeln - inzwischen ist ja einiges passiert.

Habe den anhängenden Code installiert:

Diese Einstellung bei 80 % vorgenommen - und den Wert in Zeile 55 dabei herauf gesetzt.

So passt es gut, die überdeckten Zeilen bei "Plugins" sind nicht schlimm.

Werde weiter testen - vielen Dank für deinen Einsatz!

Büssen · 24. Mai 2020

Zitat von FuchsFan

Ich werde jetzt einen neuen aufbauen, in dem dann auch die Breite einstellbar ist. Bis dahin musst du dich in Geduld üben. Kannst du das ?

FuchsFan

In Corona-Zeiten gibt es keinen Zeitfaktor - sondern nur den "Geduld-Faktor"

Natürlich kann ich warten - es eilt nicht!

Büssen · 24. Mai 2020

Hier nun mein Code für den "Addon-Manager"

CSS

/*============================= Addon-Manager ================================*/

/*  Addons-Verwaltung: Hintergrundfarben */
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
 url-prefix(about:addons) { 

   #sidebar {
      background: #CDC8B1 !important; /* Hintergrund linke Seite */
    }
    
    .main-search,
    .sticky-container,
    .main-heading,
    #content {
      background: #EEEED1 !important; /* Hintergrund rechte Seite */
      font-size: 15px !important;
    } }

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/******** Button (kleine Quadrate)  einrichten - farbliche Anpassung ********************/

@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
    
    panel-item[action="toggle-disabled"][data-l10n-id="disable-addon-button"] {
      -moz-context-properties: fill !important;
      fill: red !important;
    }
    
    panel-item[action="toggle-disabled"][data-l10n-id="enable-addon-button"] {
      -moz-context-properties: fill !important;
      fill: green !important;
    }
    
    panel-item[data-l10n-id="remove-addon-button"] {
      -moz-context-properties: fill !important;
      fill: red !important;
    }

    panel-item[data-l10n-id="install-update-button"] {
      -moz-context-properties: fill !important;
      fill: blue !important;
    }
    
    panel-item[data-l10n-id="preferences-addon-button"] {
      -moz-context-properties: fill !important;
      fill: grey !important;
    }
    
    panel-item[data-l10n-id="report-addon-button"] {
      -moz-context-properties: fill !important;
      fill: orange !important;
    }
    
    panel-item[data-l10n-id="expand-addon-button"],
    panel-item[data-l10n-id="manage-addon-button"] {
      -moz-context-properties: fill !important;
      fill: blue !important;
    }
    
    panel-item[data-l10n-id="ask-to-activate-button"] {
      -moz-context-properties: fill !important;
      fill: red !important;
    }
    
    panel-item[data-l10n-id="always-activate-button"] {
      -moz-context-properties: fill !important;
      fill: green !important;
    }
    
    panel-item[data-l10n-id="never-activate-button"] {
      -moz-context-properties: fill !important;
      fill: red !important;
    } }

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/********* Versionsnummer wird angezeigt ************************************************/

@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
    
    /*restore version number */
    div:not([current-view="updates"]) .addon-name-link[title]:not([data-l10n-args])::after,
    div:not([current-view="updates"]) .addon-name[title]:not([data-l10n-args])::after {
      display: block !important;
      content: attr(title) !important;
      margin-top: -22px !important;
    } }

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/************Button (Felder) auf der rechten Seite **************************************/

@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {

    html {
      --addon-page-options-width: 340px;
    }
    
    /* <some> locales require adjustments */
    html[lang="de"] {
      --addon-page-options-width: 370px;
    }
    
    html:-moz-any([lang="ru"],[lang="it"],[lang="fr"],[lang="el"]) {
      --addon-page-options-width: 440px;
    }
    
    html[lang*="es-"] {
      --addon-page-options-width: 460px;
    }
    /**/
    
/* Umrandung und Hintergrund der Button rechte Seite */    
    addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
    .addon.card panel-item:not([badged]){
      border: 1px solid grey !important;
      background: lightyellow !important;
      /* border-radius: 50px !important; */
      margin-top: -3px !important;
    }
    
/* Umrandung und Hintergrund der Button rechte Seite bei Hover */        
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]):hover,
    .addon.card panel-item:not([badged]):hover{
      border: 1px solid red !important;
      background: blue !important;
      color: white !important;
      /* border-radius: 50px !important; */
    }    
    
    addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
    .addon.card panel-item:not([badged]){
      border: 1px solid lightgrey !important;
    }
    
    addon-list addon-card panel-list * {
      background: white !important;
      color: black !important;
    }
    
    addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
    addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
      border: 1px solid black !important;
    }
    
    @supports -moz-bool-pref("browser.in-content.dark-mode") {
      @media (prefers-color-scheme: dark) {
        addon-list addon-card panel-list *,
        addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
        .more-options-menu panel-item {
          background: black !important;
          color: white !important;
        }
        addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
        addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
          border: 1px solid white !important;
        }
    } }
    
    :-moz-any(addon-list,panel-list) panel-item{
      margin: 0 1px !important;
    }
    
    /* reduce size of default buttons */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 2px 5px !important; 
    }
    
    /* remove three dots button */
    addon-card .more-options-button {
      display: none !important;
    }

    /* remove button icon */
    :host([checked]),
    panel-item[checked],
    :-moz-any(addon-list,panel-list) panel-item {
      --icon: unset !important;
    }
    
    /* restore buttons */
    div.arrow.top + div.list {
      display: flex !important;
      flex-flow: row wrap !important;
      justify-content: flex-start !important;
    }

    panel-item[action="preferences"] {
      order: -1;
    }
    
    panel-item[badged] {
      border: 1px solid Highlight !important;
    }
    
    panel-item[badged]::after,
    :host([badged]) button::after,
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button::after,
    :-moz-any(addon-options,plugin-options) button::after {
      display: none !important;
      content: unset !important;
    }
    
    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: var(--addon-page-options-width) !important;
      z-index: 1000 !important;
    }
    
    addon-page-options panel-list panel-item {
      min-width: calc(var(--addon-page-options-width) - 20px) !important;
      width: 320px !important;
    }
        
    .sticky-container {
      z-index: 1000 !important;
    }
    
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      padding-inline-start: 20px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
      min-width: calc(var(--addon-page-options-width) - 10px) !important;
      width: calc(var(--addon-page-options-width) - 10px) !important;
    }

    addon-page-options panel-list panel-item[accesskey][checked] {
      background: url("chrome://global/skin/icons/check.svg") 5px no-repeat !important;
    }
    
    addon-card panel-list {
      position: relative !important;
      display: flex !important;
      overflow: hidden !important;
      background: unset !important;
      border: unset !important;
      box-shadow: unset !important;
      min-width: unset !important;
      width: unset !important;
      float: right !important;
      right: 36px !important;
    }
    
    addon-card panel-list {
      margin-top: -48px !important;
    }

    addon-card .addon.card .theme-enable-button {
      -moz-appearance: none !important;
      min-width: 20px !important;
      width: 20px !important;
      max-width: 20px !important;
      height: 20px !important;
      font-size: 0 !important;
      border: 1px solid !important;
      border-top: 3px solid !important;
      -moz-margin-end: 1px !important;
      opacity: 0.9 !important;
    }
    
    addon-card .addon.card .theme-enable-button:hover {
      cursor: pointer !important;
      opacity: 1.0 !important;
      filter: brightness(2.00) !important;
    }
    
    addon-card .addon.card[active="true"] .theme-enable-button {
      background: Highlight url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
    }
    
    addon-card:hover .addon.card[active="true"] .theme-enable-button {
      background: red url("chrome://browser/skin/zoom-out.svg") 2px no-repeat !important;
    }
    
    addon-card:hover .addon.card[active="false"] .theme-enable-button {
      background: green url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
    }

    addon-card .card-contents {
      display: block !important;
      height: 40px !important;
    }
    
    addon-card .card-contents .addon-description {
      display: block !important;
      mask-image: linear-gradient(to left, transparent, black 10px) !important;
    }

    addon-card .addon.card .theme-enable-button,
    input[type="checkbox"].toggle-button {
      -moz-margin-end: 8px !important;
    }
    
    .card-contents input[type="checkbox"].toggle-button {
      -moz-margin-end: 0px !important;
    }
    
    addon-card > .addon.card,
    addon-card > .addon.card * {
      overflow: hidden !important;
    } }

/***************** Container anpassen **************************************************/

@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {  

/* Container in der Breite anpassen*/

message-bar-stacks + #main:not([class="site-main"]) div[current-view="list"] {
max-width: 100% !important;
}



/* Hintergrund der Container bei Hover andere Farbe */ 
    addon-card:not([expanded="true"]) .addon.card:hover {
      background: #76ee00 !important;
    }
    
/* Abstand zwischen den Containern */    
    addon-card .addon { 
      margin: 7px !important;
    }    
    
/* Umrandung der Container bei Hover breiter Rand und andere Farbe */ 
    :root {
      --card-outline-color: DarkOrange !important;
    }
    
/* Hintergrund der Container mit anderer Farbe */ 
    addon-card:not([expanded="true"]) .addon.card {
      background: #F1F7FC !important; /* Hintergrundfarbe */
      border: 2px solid grey !important;  /* Umrandung */
      border-radius: 15px !important;  /* Ecken abgerundet */
      width: 1200px !important;  /* Länge der Container */
      max-height: 120px !important; /* Höhe der Container bei Themes */
    } }

/****************** sonstige Anpassungen ***************************/

/* unter Themes die Grafik anpassen */    
.card-heading-image {
      min-width: 800px !important; /* Länge der Grafik */
      height: 80px !important; /* Höhe der Grafik */
      margin-left: -4px !important; /* Abstand vom linken Rand */
      margin-top: -6px !important;  /* Abstand vom oberen Rand */
    } 
    
/* blendet den Text für privates Browsing ein */    
    .addon-badge-private-browsing-allowed::before {
      content: "(In privaten Fenstern erlaubt)" !important;
      margin-left: 10px !important; /* Entfernung nach rechts */
    }

 .addon-badge-private-browsing-allowed {
      min-width: 430px !important; /* lila Icon Entfernung nach rechts */
    }
    
/* unter Verwalten das sich öffnende Menü verbreitern */    
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html),
 url-prefix(about:addons) {      
       
    html body div#full div#content div#main div addon-card div.card.addon{
      min-width: 1100px !important; /* Breite in px */
    } }    
    
/* Unter Plugins - Nachfragen ob aktiviert werden soll - entfernt */
    .card > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1),
    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(2) > div:nth-child(1) > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1),
    #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(3) > div:nth-child(1) > plugin-options:nth-child(4) > panel-list:nth-child(1) > panel-item:nth-child(1) {
      display: none !important;
    }     

/* fortlaufende Nummerierung installierter Erweiterungen, Themes, usw. */    
    body {
      counter-reset: section;                     
    }

   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(2) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before,
   #main > div:nth-child(1) > addon-list:nth-child(1) > section:nth-child(3) > addon-card:nth-child(n+2) > div:nth-child(1) > div:nth-child(2)::before {
      color: red !important;
      font-weight: bold !important;
      counter-increment: section;                 
      content: counter(section, decimal-leading-zero)".) ";
      padding-right: 20px !important; 
      margin-top: -2px!important; /* Lage im Container */
      margin-left: 5px !important; /* Abstand vom linken Rand */
    }  

/* Größenänderung der Button rechte Seite */
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
      width: unset !important;
      padding: 4px 25px !important; /* 4px ist die Höhe und 25px die Länge der rechten Button */
      border: 1px solid grey !important;  /* Umrandung */
    }    

/* Länge der Container unter Empfehlungen */    
.card {
      width: 800px!important; /* Länge */
      background: white !important;  /* Hintergrund */
    }
    
/* Button mit dem Zahnrad */
    .page-options-menu > .more-options-button {
      fill: red !important; /* rotes Zahnrad */ 
      border: 1px solid grey !important; /* farbige Umrandung */
      border-radius: 15px !important; /* Abrundung */
      width: 60px !important; /* Länge des Button */
      height: 30px ! important; /* Höhe des Button */
      box-shadow: inset 0 0 2px 2px grey; /* innerer Schatten */
    } 
    
/* Button oben mit dem Zahnrad bei Hover */
    .page-options-menu > .more-options-button:hover {
      fill: lime !important; /* Farbe des Zahnrades */
    }

/* Aussehen des Menü hinter dem Zahnrad */    
    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      margin-left: 6% ! important;
      min-width: 350px !important;
      width: 375px !important; /* Länge der einzelnen Felder */
      background: white ! important; /* Farbe des Hintergrundes */
    }

    .sticky-container {
      z-index: 1000 !important;
    }

    addon-page-options panel-list panel-item {
      width: 425px !important; /* Länge der aktivierten Menü-Leiste */
      background: none ! important;
    }
    
addon-page-options panel-list panel-item:hover {
      width: 425px !important; 
      background: lime ! important;
      color: red !important;
    }    

    addon-page-options panel-list {
      min-width: unset !important;
      width: auto !important;
      max-width: 430px !important; /* Ausdehnung der Felder nach rechts */ 
      background: #f8f8ff ! important; /* farbiger Hintergrund des Feldes */
      padding-left: 8px !important; /* Ausdehnung nach links */
      padding-right: 3px !important; /* Ausdehnung nach rechts */
      z-index: 1000 !important;
    }
    
/* Hintergrund der Box Updates automatisch aktualisieren */
    addon-page-options panel-list panel-item[accesskey][checked] {
      background: gold !important;
    }        
    
    
/* Zurückbutton bei geöffnetem Menü Einstellung/Verwalten */
    .back-button {
      background-color: silver !important;/*Hintergrundfarbe vom Button*/
      width: 60px !important;
      border-radius: 60px !important;/*Rundung vom Button*/
      box-shadow: inset 0 0 3px 3px #888; 
    }
    
    .back-button:hover {
      color: white !important;
      background-color: dodgerblue !important;
      border-radius: 60px !important;
      box-shadow: inset 0 0 3px 3px #888;
    }    

/* Aktiviert/Deaktiviert - Farbe */
    .list-section-heading[data-l10n-id="extension-enabled-heading"],
    .list-section-heading[data-l10n-id="theme-enabled-heading"],
    .list-section-heading[data-l10n-id="plugin-enabled-heading"],
    .list-section-heading[data-l10n-id="dictionary-enabled-heading"] {
    font-weight: bold !important;
    color: forestgreen !important;
    text-indent: 15px;
    }
    .list-section-heading[data-l10n-id="extension-disabled-heading"],
    .list-section-heading[data-l10n-id="theme-disabled-heading"],
    .list-section-heading[data-l10n-id="plugin-disabled-heading"],
    .list-section-heading[data-l10n-id="dictionary-disabled-heading"] {
    font-weight: bold !important;
    color: red !important;
    text-indent: 15px;
    }
/* Aktiviert/Deaktiviert - Farbe - ENDE */

Alles anzeigen

Mit Notepad++ geöffnet:

in Zeile 311 hinzugefügt "Container in der Breite anpassen"

in Zeile 313 >> obigen Code eingefügt - geändert z.B. auf 100 %

Bei Aufruf tut sich aber nichts!

Büssen · 24. Mai 2020

Zitat von FuchsFan

Hallo, Büssen!
.............................................
Wenn es dir besonders wichtig ist, dann muss ich mich nochmal bei Aris umschauen, er hat ja einiges zu bieten.

Moin FuchsFan,

es wäre mir schon wichtig, den Container in der Breite an zu passen, denn auch auf dem PC würden 90 % schon wieder rechts nicht passen.

Ich fand den Addon-Manager (so wie er ist) richtig gut.

Hier nun die 80% Lösung auf dem PC. Beim Notebook würden gerade 67% passen. Dann wäre die Schrift wieder zu klein.

Die Container sollten aber schon die ganze Breite ausfüllen!

Sehe gerade, dass Dharkness einen Code eingestellt hat. Als Code separat ausgeführt, kann ich momentan keine Änderung sehen.

Büssen · 24. Mai 2020

Zitat von Büssen

Moin
Habe diese Dateien alle in einem portablen Firefox 76.01 installiert. Da bei mir alles vergrößert dargestellt wurde, bin ich auf 80 % gegangen.
Nun passt alles wie in den Beispielbildern dargestellt!

Moin,

das war die passende Geschichte (#399) auf meinem PC. Dort ist alles OK.

Auf dem Notebook passt die Darstellung allerdings nicht mit 80%.

Gibt es eine Stelle im Code, wo ich die Container noch etwas verkürzen kann - gesucht, aber nicht gefunden?

Büssen · 21. Mai 2020

Moin,

hier oben ist aber Feiertag angesagt (Himmelfahrt/Vatertag)

Mein Beispiel aus #210 war nicht vom FX 76 - sondern von Beta 77.

Mit diesem Code - neuer Versuch:

CSS

/* AGENT_SHEET */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:about") {

html {background: #FFFFFF !important;}

body{
background-color: #fffff0 !important;
max-width: 1020px !important;
margin-top: 25px !important;
margin-bottom: 30px !important;
margin-left: 210px !important;
padding-top: 25px !important;
padding-left: 25px !important;
padding-right: 25px !important;
padding-bottom: 25px !important;
border-left-color: lightblue!important;
border-top-color: lightblue!important;
border-right-color: dodgerblue!important;
border-bottom-color: dodgerblue!important;
border-radius: 20px !important;
border-width: 4px !important;
border-style: outset !important;}

.container > h1:nth-child(1){
margin-left: 80px !important;
color: blue !important;
font-size: 24px !important;
font-weight: bold !important;}

ul { list-style: none !important;}

#abouts{
background-color: #fffffF !important;
margin-left: -10px !important;
margin-top: 25px !important;
padding-top: 25px !important;
padding-left: 25px !important;
padding-right: 25px !important;
padding-bottom: 25px !important;
border-left-color: lightblue!important;
border-top-color: lightblue!important;
border-right-color: dodgerblue!important;
border-bottom-color: dodgerblue!important;
border-radius: 20px !important;
border-width: 4px !important;
border-style: outset !important;}

p {margin-left: 90px !important; font-size:15px!important;}

h1::before {content: "Endors Firefox: "; font-weight:bold !important; color:red !important; margin-left: 80px !important;}

a{color:black!important;}

a{
text-decoration:none!important;
color:black!important;}

/* Die ersten 18 */

#abouts > li:nth-child(-n+19){
appearance:none!important;
background: gainsboro url("..//icons/Bild3.png")no-repeat !important;
color:transparent!important;
font-size:14px!important;
text-decoration:none!important;
margin-top:3px!important;
margin-bottom: 5px !important;
margin-right:55px!important;
margin-left: 25px !important;
padding-right: 15px !important;
padding-left:35px!important;
padding-top: 1px!important;
padding-bottom: 2px!important;
border-left-color: lightblue!important;
border-top-color: lightblue!important;
border-right-color: dodgerblue!important;
border-bottom-color: dodgerblue!important;
border-style: outset !important;
border-width:2px !important;
background-position:10px 2px!important;
border-radius:14px!important;}

/* Die ersten 18 hover */

#abouts > li:nth-child(-n+19):hover{
appearance:none!important;
background: #B2EDFA url("..//icons/Bild3.png")no-repeat !important;
color:transparent!important;
font-size:14px!important;
text-decoration:none!important;
padding-left:35px!important;
padding-right: 15px !important;
padding-top: 1px!important;
padding-bottom: 2px!important;
border-left-color: #bbddff !important;
border-top-color: #bbddff !important;
border-right-color: #11508d !important;
border-bottom-color: #11508d !important;
border-style: outset !important;
border-width:2px !important;
background-position:10px 2px!important;
border-radius:14px!important;}

/* Die letzten 19 */

#abouts > li:nth-child(n+20){
appearance:none!important;
background: cornsilk url("..//icons/Bild3.png")no-repeat !important;
color:transparent!important;
font-size:14px!important;
margin-left: 25px !important;
margin-top:3px!important;
margin-bottom: 5px !important;
margin-right:30px!important;
padding-left:35px!important;
padding-right: 15px !important;
padding-top: 1px!important;
padding-bottom: 2px!important;
border-left-color: #ffb2b2 !important;
border-top-color: #ffb2b2 !important;
border-right-color: #8d0000 !important;
border-bottom-color: #8d0000 !important;
border-style: outset !important;
border-width:2px !important;
background-position:10px 2px!important;
border-radius:14px!important;}

/* Die letzten 19 hover */

#abouts > li:nth-child(n+20):hover{
appearance:none!important;
background: #B2EDFA url("..//icons/Bild3.png")no-repeat !important;
color:transparent!important;
font-size:14px!important;
margin-left: 25px !important;
margin-right:30px!important;
padding-left:35px!important;
padding-right: 15px !important;
padding-top: 1px!important;
padding-bottom: 2px!important;
border-left-color: #bbddff !important;
border-top-color: #bbddff !important;
border-right-color: #11508d !important;
border-bottom-color: #11508d !important;
border-style: outset !important;
border-width:2px !important;
background-position:10px 2px!important;
border-radius:14px!important;}
}

Alles anzeigen

Damit könnte ich erst mal leben.

Vielen Dank an die Helfer!

Büssen · 20. Mai 2020

Hallo,

habe mir mal den neuesten about about-Code gegönnt und im 76-er-Profil probiert.

Lassen sich die Felder rechte Seite noch anpassen (verkürzen)?

Büssen · 19. Mai 2020

Hallo,

sieht im Nightly nun so aus:

rechts unten (Sicherheit) fehlt die Rundung - nach links verschoben.

Büssen · 18. Mai 2020

Moin,

trotzdem fehlen im Nightly-Beispiel von Boersenfeger einige Icon (gelb umrahmte Felder).

Darauf bezog sich meine Antwort #138. Bis auf "Save verbose" müssten alle anderen eigentlich da sein.

Büssen · 18. Mai 2020

Zitat von Boersenfeger

Imho fehlen einige Icons bzw Code für Buttons.. jeweils gelb markiert!?

Hallo Boersenfeger,

schau mal in den Ordner Icon:

dort müssen die Bilder 16 bis 26.png und 119.png drin sein.

Dann siehst du auch alle Icons im Nightly.

Restliche Icons von # 124 kopieren.

Büssen · 18. Mai 2020

Hallo edvoldi,

das war wieder ein guter Kundendienst!

Vielen Dank - nun passt wieder alles. >> zumindest im besagtem Profil.

Habe in einem anderen Profil gleiches Verhalten - geändert: aber hier geht alles zu weit nach rechts raus.

Musste hier auf 90% runter, damit alles sichtbar ist.

Büssen · 18. Mai 2020

Moin,

habe ein Problem mit about:debugging.

Wenn ich normal aufrufe:

Links bleibt ein großer Rand - bis Sidebar Lesezeichen

Gehe ich runter auf 90 % Größe, dann sieht es so aus:

Es bleibt links auch noch ein Rand - bis Sidebar.

Bei 80 % passt die Größe, trotzdem bleibt links ein Rand. Das Original scheint 110 % zu haben.

Was müsste ich ändern?

Nachtrag: habe diese Zeile von 200 px auf 30 px geändert

CSS

body{background-color: #ffffff !important; margin-left: 30px !important;

Nun passt es wieder >> es bleibt noch ein ganz kleiner Rand.

Beiträge von Büssen

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

Ansicht "Erweiterungen verwalten"

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen

About Seiten mit CSS Codes anpassen