Naja, genauso wie bisher, aber mit funktionierendem (normalem, schmalen) ... Menü halt.
Jetzt ist es verstanden worden, du meinst die Erläuterungen unter dem Namen.
Dazu musst du in dem Code von hier: RE: Ansicht "Erweiterungen verwalten" ......
die Zeilen 13 bis 15 löschen, und in Zeile 24 das so ändern
min-height: 80px !important;
Jetzt ist es verstanden worden, du meinst die Erläuterungen unter dem Namen.
Dazu musst du in dem Code von hier: RE: Ansicht "Erweiterungen verwalten" ......
die Zeilen 13 bis 15 löschen, und in Zeile 24 das so ändern
min-height: 80px !important;
Jetzt passt's, super! 
Danke für deine Ausdauer. 
RESULTAT:
userContent.CSS
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xhtml), url-prefix(about:addons),url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
:root {
--addon-icon-size: 24px !important;
}
addon-card:not([expanded="true"]) .addon.card {
padding-top: 2px !important;
margin-bottom: 0px !important;
min-height: 22px !important;
}
addon-list[type="theme"] .addon.card {
min-height: 80px !important;
}
.addon.card div.more-options-menu {
height: 20px !important;
}
.header-name {
font-size: 14px !important;
margin-top: 8px !important;
}
/* Abstand zwischen den Containern */
addon-card .addon {
margin: 0px !important;
}
/* Versionsnummer wird angezeigt */
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;
}
}PS: Die absolute Krönung wäre, wenn ich die Fett-Schrift der Add-Ons noch etwas kleiner hinbekäme. 
PS: Die absolute Krönung wäre, wenn ich die Fett-Schrift der Add-Ons noch etwas kleiner hinbekäme
Pixelgröße selbst auswählen, bitte testen:
.addon-name-link[title]{
font-size: 10px !important;
} Gilt für alle Rubriken (Addons, Theme, usw.).
Nachtrag:
Und das wäre dann für die Beschreibung darunter:
.addon.card .addon-description {
font-size: 10px !important;
}Daanke für deine Mühe - herzlichen Dank! 
Daanke für deine Mühe - herzlichen Dank!
Hauptsache du bist zufrieden.
Der "Blaue Punkt" bei Erweiterungen erfüllt seinen Zweck, aber ein Punkt, an dem wir wohl noch nicht gebastelt haben (oder ???).
Nun habe ich mal gewagt da was zu machen, probiert es bitte mal aus, wenn ihr möchtet. Verbesserungen sind immer willkommen!!
So, hier dann der Code:
/* Toggle-Button aktiv/inaktiv Farbe anpassen (auch bei Hover) */
addon-card .addon.card[active="true"] .toggle-button {
background: lime !important;
padding-right: 10px !important;
padding-left: 10px !important;
width: 50px !important;
border: 2px solid dodgerblue !important;
}
addon-card .addon.card[active="true"] .toggle-button:hover {
background: red !important;
border: 2px solid green !important;
}
addon-card .addon.card[active="false"] .toggle-button {
background: red !important;
padding-right: 10px !important;
padding-left: 10px !important;
width: 50px !important;
border: 2px solid green !important;
}
addon-card .addon.card[active="false"] .toggle-button:hover {
background: lime !important;
border: 2px solid dodgerblue !important;
} Sieht dann so aus:
CSS... Auszug ... } ieht addon-card .addon.card[active="false"] .toggle-button { background: red !important;
ehm, das ieht gehört auch dazu? Wie bekommst du die Breite hin?
FRAGE: Könntes du den ganzen (breiten) Code mit kompakter Ansicht (in der Höhe) posten?
ehm, das ieht gehört auch dazu?
Hoppla, wie kommt denn das da hin? 
Code ist geändert. Danke für den Hinweis.
Wie bekommst du die Breite hin?
Da sind padding-Werte , die immer gleichmäßig änden (kleiner/größer). Außerdem ist der Wert width: 50px !important; vorhanden, der die Länge vorgibt.
Da sind padding-Werte , die immer gleichmäßig änden (kleiner/größer). Außerdem ist der Wert width: 50px !important; vorhanden, der die Länge vorgibt.
Hi, ich meinte die Breite (den Code) des Addon-Feldes, also etwa so (wie bei deinem Beispiel) ...
Hi, ich meinte die Breite (den Code) des Addon-Feldes
Das soll nun einer erraten.
Teste bitte:
/* Länge aller Container */
addon-card:not([expanded="true"]) .addon.card {
width: 1500px !important; /* Länge der Container */
} px-Wert nach Wunsch anpassen
px-Wert nach Wunsch anpassen
Hat super funktioniert, thx!
Jetzt ehm, ich möchte nicht nerven, aber ich möchte die Buttons so wie du sie hast.
Wie sieht der Code dafür aus? Ginge das auch ohne die Text-Umrahmungen?
Wie sieht der Code dafür aus? Ginge das auch ohne die Text-Umrahmungen?
Das geht, aber es ist immer der Geschmack, der bei allen immer unterschiedlich ist. Also hast du dann noch ein wenig Arbeit vor dir. Das Grundgerüst ist im folgenden Code enthalten (größtenteils von Aris).
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/
@-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:-moz-any([lang="ru"],[lang="it"],[lang="fr"],[lang="el"]) {
--addon-page-options-width: 440px;
}
html[lang*="es-"] {
--addon-page-options-width: 460px;
}
/**/
addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
.more-options-menu panel-item {
background: white !important;
color: black !important;
margin: 0 1px !important;
border: 1px solid lightgrey !important;
}
addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
addon-list panel-item:not([badged]){
border: 1px solid lightgrey !important;
}
addon-list addon-card:not([expanded="true"]) panel-list * {
background: white !important;
color: black !important;
}
addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
addon-list[type="theme"] addon-card:not([expanded="true"]) 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:not([expanded="true"]) panel-list *,
addon-list[type="theme"] addon-card:not([expanded="true"]) 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:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
border: 1px solid white !important;
}
}}
addon-list panel-item{
margin: 0 1px !important;
}
/* Button rechte Seite */
addon-list panel-item:not([badged]){
border: none !important; /* Umrahmung / none = nicht gesetzt */
}
/* reduce size of default buttons */
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
width: unset !important;
padding: 2px 5px !important;
color: red !important; /* Schriftfarbe */
font-weight: bold !important; /* fette Schrift */
}
/* remove three dots button */
addon-card .more-options-button {
display: none !important;
}
/* remove button icon */
:host([checked]),
panel-item[checked],
addon-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;
color: red !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-list addon-card:not([expanded="true"]) 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-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"],[type="all"]) addon-card:not([expanded="true"]) panel-list {
right: 1px !important;
}*/
addon-list addon-card:not([expanded="true"]) panel-list {
margin-top: -48px !important;
}
/*addon-list[type="theme"] addon-card:not([expanded="true"]) panel-list {
-moz-margin-end: 22px !important;
}*/
addon-list addon-card:not([expanded="true"]) .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-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button:hover {
cursor: pointer !important;
opacity: 1.0 !important;
filter: brightness(2.00) !important;
}
addon-list addon-card:not([expanded="true"]) .addon.card[active="true"] .theme-enable-button {
background: Highlight url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
}
addon-list addon-card:not([expanded="true"]):hover .addon.card[active="true"] .theme-enable-button {
background: red url("chrome://browser/skin/zoom-out.svg") 2px no-repeat !important;
}
addon-list addon-card:not([expanded="true"]):hover .addon.card[active="false"] .theme-enable-button {
background: green url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
}
addon-list[type="theme"] addon-card:not([expanded="true"]) .card-contents{
height: 40px !important;
}
/*input[type="checkbox"].toggle-button {
margin: 0 8px !important;
}*/
addon-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button,
input[type="checkbox"].toggle-button {
-moz-margin-end: 8px !important;
}
addon-card:not([expanded]) > .addon.card,
addon-card:not([expanded]) > .addon.card * {
overflow: hidden !important;
}
}Zeile 65 entfernt die Umrandung, und die Zeilen 72/73 legen Werte für die Schrift fest.
Hallo, Andreas!
Ich brauche mal wieder deine Hilfe. Es gibt nämlich Probleme mit dem Code von hier RE: Ansicht "Erweiterungen verwalten".
Er macht was er soll, nur, es kommt bei einem Klick auf den Button das Menü, bei erneutem Klick auf den Button (Menü noch geöffnet) schließt das Menü , aber es ist dann das Icon im Button nicht zu sehen. Erst wenn irgendwo ein Klick erfolgt, dann ist das rote Zahnrad wieder zu sehen.
Das Problem betrifft auch alle Icon in den Button auf der linken Seite. Wenn ich den Code für diese Button raus nehme, so bleibt es beim Zahnrad-Button weiter bestehen.
Kannst du bitte mal den Code für das Menü überprüfen, ob da was kontraproduktiv arbeitet.
/*=========== Button mit dem Zahnrad / MENUE dahinter ===================*/
/* Feld hinter dem Zahnrad-Button */
#page-options > panel-list:nth-child(1) {
background: lightgrey !important; /* Hintergrund */
min-width: 394px !important; /* Mindestbreite */
border: 3px solid dodgerblue !important;
padding: 2px !important;
}
div.arrow:nth-child(3){
fill: dodgerblue !important; /* kleine Spitze Richtung Zahnrad */
}
/* erste Zeile im Menü Hintergrund wird ausgeblendet */
button:focus {
background: none !important;
}
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
padding-top: 5px !important; /* Ausdehnung nach oben */
padding-bottom: 5px !important; /* Ausdehnung nach unten */
min-width: 345px !important;
/* width: 300px !important; */ /* Länge der einzelnen Felder */
margin-left: 12% ! important; /** Schrift ausrichten ab linkem Rand **/
border: 1px solid dodgerblue !important;
}
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey]:hover {
background: lightyellow !important;
color: red !important;
font-size: 13px !important;
max-height: 32px !important;
padding-left: 20px !important;
}
/* Zeilenhintergrund bei Hover */
addon-page-options panel-list panel-item:hover {
background: dodgerblue ! important; /* Farbe */
min-width: 395px !important; /* Zeilenlänge */
}
.sticky-container {
z-index: 1000 !important;
}
/* Hintergrund der Box automatisches Update */
addon-page-options panel-list panel-item[accesskey][checked] {
background: greenyellow !important;
min-width: 394px !important; /* Zeilenlänge */
}
/* Hintergrund der Box automatisches Update bei Hover */
addon-page-options panel-list panel-item[accesskey][checked]:hover {
background: dodgerblue !important;
min-width: 395px !important; /* Zeilenlänge */
}Und der Code für den Zahnrad-Button:
/*==================== 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: 50px !important; /* Länge des Button */
height: 25px ! important; /* Höhe des Button */
box-shadow: inset 0 0 2px 2px grey; /* innerer Schatten */
}
.page-options-menu .more-options-button:hover {
fill: forestgreen !important; /* Farbe des Zahnrades */
opacity: 1.0 !important;
border: 2px solid forestgreen !important;
box-shadow: inset 0 0 7px 7px greenyellow !important; /* innerer Schatten */
} Teste bitte mal mit diesem Code:
/* erste Zeile im Menü Hintergrund wird ausgeblendet */
button:nth-child(2) {
background: none !important;
}Teste bitte mal mit diesem Code:
Super, Andreas, das sieht schon viel besser aus. Dankeschön!!
Wenn es an anderer Stelle jetzt ein Problem geben sollet, dann melde dich bitte wieder.
Ansonsten...gern geschehen
Wenn es an anderer Stelle jetzt ein Problem geben sollet, dann melde dich bitte wieder.
Ja, da bin ich schon wieder.
Alles funktioniert soweit, bis auf den Button Erweiterungen (links oben), dort fehlt das Icon ganz. Alle anderen werden angezeigt und arbeiten normal.
Ändere ich im Code child in 1 oder 3, dann werden entsprechen andere Icons nicht angezeigt.
Das geht, aber es ist immer der Geschmack, der bei allen immer unterschiedlich ist. Also hast du dann noch ein wenig Arbeit vor dir. Das Grundgerüst ist im folgenden Code enthalten (größtenteils von Aris).
Zeile 65 entfernt die Umrandung, und die Zeilen 72/73 legen Werte für die Schrift fest.
Lieben Dank, FuchsFan!
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
@-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: 380px;
}
/* Länge und Höhe aller Container */
addon-card:not([expanded="true"]) .addon.card {
width: 880px !important;
height: 26px !important;
}
/* Abstand zwischen den Containern */
addon-card .addon {
margin: -4px !important;
}
.header-name {
font-size: 14px !important;
margin-top: 8px !important;
}
.addon-name-link[title]{
font-size: 14px !important;
}
.addon.card .addon-description {
font-size: 11px !important;
}
/* Versionsnummer wird angezeigt */
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;
}
panel-item[action="check-for-updates"][data-l10n-id="addon-updates-check-for-updates"] {
background: transparent !important;
}
/**/
addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
.more-options-menu panel-item {
background: white !important;
color: black !important;
margin: 0 1px !important;
border: 1px solid lightgrey !important;
}
addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):not([badged]),
addon-list panel-item:not([badged]){
border: 1px solid lightgrey !important;
}
addon-list addon-card:not([expanded="true"]) panel-list * {
background: white !important;
color: black !important;
}
addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
addon-list[type="theme"] addon-card:not([expanded="true"]) 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:not([expanded="true"]) panel-list *,
addon-list[type="theme"] addon-card:not([expanded="true"]) 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:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):hover,
addon-list[type="theme"] addon-card:not([expanded="true"]) button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button):active {
border: 1px solid white !important;
}
}}
addon-list panel-item{
margin: 0 1px !important;
}
/* Button rechte Seite */
addon-list panel-item:not([badged]){
border: none !important; /* Umrahmung / none = nicht gesetzt */
}
/* reduce size of default buttons */
link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button {
width: unset !important;
padding: 2px 5px !important;
color: green !important; /* Schriftfarbe */
font-weight: bold !important; /* fette Schrift */
}
/* remove three dots button */
addon-card .more-options-button {
display: none !important;
}
/* remove button icon */
:host([checked]),
panel-item[checked],
addon-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;
color: green !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-list addon-card:not([expanded="true"]) 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-list:-moz-any([type="theme"],[type="plugin"],[type="dictionary"],[type="all"]) addon-card:not([expanded="true"]) panel-list {
right: 1px !important;
}*/
addon-list addon-card:not([expanded="true"]) panel-list {
margin-top: -48px !important;
}
/*addon-list[type="theme"] addon-card:not([expanded="true"]) panel-list {
-moz-margin-end: 22px !important;
}*/
addon-list addon-card:not([expanded="true"]) .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-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button:hover {
cursor: pointer !important;
opacity: 1.0 !important;
filter: brightness(2.00) !important;
}
addon-list addon-card:not([expanded="true"]) .addon.card[active="true"] .theme-enable-button {
background: Highlight url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
}
addon-list addon-card:not([expanded="true"]):hover .addon.card[active="true"] .theme-enable-button {
background: red url("chrome://browser/skin/zoom-out.svg") 2px no-repeat !important;
}
addon-list addon-card:not([expanded="true"]):hover .addon.card[active="false"] .theme-enable-button {
background: green url("chrome://global/skin/icons/check.svg") 2px no-repeat !important;
}
addon-list[type="theme"] addon-card:not([expanded="true"]) .card-contents{
height: 40px !important;
}
/*input[type="checkbox"].toggle-button {
margin: 0 8px !important;
}*/
addon-list addon-card:not([expanded="true"]) .addon.card .theme-enable-button,
input[type="checkbox"].toggle-button {
-moz-margin-end: 8px !important;
}
addon-card:not([expanded]) > .addon.card,
addon-card:not([expanded]) > .addon.card * {
overflow: hidden !important;
}
}Ja, da bin ich schon wieder
Da muss ich leider passen, sorry, ich finde keine eindeutige Bezeichnung nur für diesen einen Eintrag.
Evtl. fällt einem anderen User ja noch etwas dazu ein.
Hi FuchsFan,
Du meinst das Puzzleteil von Erweiterungen oben links in about:addons direkt über Themes?
Du meinst
Hallo Dharkness ..
es geht darum, wenn man auf das Zahnrad klickt, dann ist der obere Eintrag grau hinterlegt.
Diese focus Farbe soll weg.
Ich hatte das pauschal mit Button angesprochen, aber das bezieht sich dann auf alle.
Und bei background: none sind auch die extra eingefügten Icons natürlich weg.
