Mir gefällt das so!
Jeder hat seinen Geschmack, so soll es auch sein.
Auch hier ist wohl alles, wie es sein soll!
Das sieht mir aber nicht mehr danach aus. Füge mal den Code von Andreas aus Beitrag #97 mit ein, dann sollte es wieder stimmen.
Ich für meinen Teil bin erst einmal damit durch, funktioniert jetzt bis zur Nightly. Ich habe jetz nochmal alles für Auflösung 1920x1080 für die volle Breite angepasst, und das gefällt mir sehr gut. Jedem das Seine! ??
Das erspart zumindest das Ändern der hover Einträge.
Hallo, Andreas, ich habe mich mal deines verkürzten Codes bedient, arbeitet tadellos. Weniger Arbeit! ??
Grüße
FuchsFan
ich habe mich mal deines verkürzten Codes bedient
Freut mich, dann hat es sich wenigstens gelohnt ihn zu erstellen.
dann hat es sich wenigstens gelohnt ihn zu erstellen.
Aber natürlich.
Eine Frage hätte ich zu dem Code noch (betrifft den alten genauso). Es gibt dort den folgenden Block:
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="install-update"] {
margin-left: 60px !important;
padding-right: 17px !important;
background: gainsboro !important;
border-radius: 60px !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="install-update"]:hover {
background: lime !important;
color: white !important;
}Wofür ist dieser Eintrag gedacht? Wenn für einen Button, dann ist nach meinem Empfinden ja nichts zu sehen. Kläre mich bitte mal auf, eventuell ist der Eintrag ja auch überflüssig.
Grüße
FuchsFan
Wenn man bei Erweiterungen das Update nicht auf automatisch gestellt hat, dann wird erst danach gefragt.
Hier mal ein Screenshot dazu:
Ich für meinen Teil bin erst einmal damit durch, funktioniert jetzt bis zur Nightly. Ich habe jetz nochmal alles für Auflösung 1920x1080 für die volle Breite angepasst
Moin FuchsFan, verrätst Du mir, wie Du das gemacht hast?
Wenn man bei Erweiterungen das Update nicht auf automatisch gestellt hat, dann wird erst danach gefragt.
Danke, Andreas, das leuchtet mir ein.
Grüße
Fuchsfan
Moin FuchsFan, verrätst Du mir, wie Du das gemacht hast?
Guten Morgen!
Aber natürlich, dazu stelle ich mal den vollständigen Code vor (mit der Kürzung von Andreas). Die Stellen für die Ausrichtung der Button sind dahinter gekennzeichnet. Was noch fehlt ist der Button aus Beitrag #106, weil ich Updates auf automatisch eingestellt habe. Das werde ich heute mal in Angriff nehmen , den Code-Block liefere ich dann nach, wenn es recht ist.
/************************ Ersten beiden Einträge aus dem alten Code *******************/
/*** Umrandung bei Hover breiter Rand und andere Farbe ****/
:root {
--card-outline-color: DarkOrange !important;
}
/**************** Versionsnummer des Addons wird angezeigt *************************************/
@-moz-document url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
/*restore version number */
div:not([current-view="updates"]) .addon-name-link[title]::after,
div:not([current-view="updates"]) .addon-name[title]::after {
display: block !important;
content: attr(title) !important;
margin-top: -22px !important;
}
}
/************************************************************************************************************************/
/***** Code neu von hier: https://www.camp-firefox.de/forum/thema/128571-ansicht-erweiterungen-verwalten/?pageNo=1 *****/
addon-card:not([expanded]) .card-contents {
white-space: normal !important;
}
.addon-description {
max-width: 1150px !important;
}
button:hover {
cursor: pointer !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"] { /* Deaktivieren */
margin-left: -10px !important;
padding-right: 20px !important;
background: gainsboro !important;
border-radius: 60px !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"]:hover {
background: magenta !important;
color: white !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="remove"] { /* Entfernen */
margin-left: 8px !important;
padding-right: 13px !important;
background: gainsboro !important;
border-radius: 60px !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="remove"]:hover {
background: red !important;
color: white !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="preferences"] { /* Einstellungen */
margin-left: 32px !important;
padding-right: 18px !important;
background: gainsboro !important;
border-radius: 60px !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="preferences"]:hover {
background: blue !important;
color: white !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="expand"] { /* Verwalten */
margin-left: 60px !important;
padding-right: 20px !important;
background: gainsboro !important;
border-radius: 60px !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="expand"]:hover {
background: green !important;
color: white !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="install-update"] {
margin-left: 60px !important;
padding-right: 17px !important;
background: gainsboro !important;
border-radius: 60px !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="install-update"]:hover {
background: lime !important;
color: white !important;
}
/*** hiermit wird der Hintergrund bei Klick auf das Zahnrad-Symbol ausgeblendet ***/
button:-moz-focusring {
box-shadow: none !important;
outline: 0px dotted !important;
outline-offset: 0px !important;
}
/*** hiermit wird der Hintergrund bei Klick auf Buttons auf der rechten Seite ausgeblendet ***/
button:focus, button:enabled:hover {
background-color: transparent !important;
border: none !important;
}
/*** hiermit werden unter Themes die Grafiken ausgeblendet ****/
.card-heading-image {
display: none !important;
}
/***********************************************************************************************/
/* 70er Nightly Addon Manager by @.DeJaVu */
addon-list addon-card > .addon.card
{
width: 94vw !important; /* bringt die Container bis zum rechten Rand */
margin-bottom: 5px !important;
height: 65px !important; /* Höhe der Container */
border: 1px solid grey !important; /* Umrandung */
}
addon-list section addon-card,
addon-list section addon-card .card.addon
{
cursor: default !important;
}
addon-list section addon-card .card.addon .addon-card-collapsed
{
cursor: pointer !important;
}
#addons-page #heading hbox.heading-inner #heading-name.header-name
{
-moz-box-ordinal-group: 2 !important;
padding-left: 10px !important;
}
.addon-badge-private-browsing-allowed {
width: 230px !important;
background-position: left !important;
}
.addon-badge-private-browsing-allowed::after
{
content: "(In privaten Fenstern erlaubt)" !important;
margin-left: 20px !important;
}
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu
{
position: absolute !important;
margin: 0 !important;
margin-inline-end: 0 !important;
left: 520px !important;
}
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options
{
margin-left: 0 !important;
margin-inline-end: 0 !important;
}
/*** die drei Punkte werden im Container-Feld ausgeblendet *****/
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu button.more-options-button.ghost-button
{
display: none !important;
}
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list
{
display: block !important;
visibility: visible !important;
margin-bottom: 0 !important;
padding: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important;
--in-content-button-background: none !important;
top: -25px !important;
}
.arrow, .arrow.top, .arrow.bottom,
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item-separator
{
display: none !important;
}
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="toggle-disabled"] /* Deaktivieren */
{
position: absolute !important;
top: 16px !important;
left: 460px !important; /* Lage des Button Deaktivieren in Pixel vom linken Rand */
box-shadow: inset 0 0 4px 4px #888;
}
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="remove"] /* Entfernen */
{
position: absolute !important;
top: 16px !important;
left: 620px !important; /* Lage des Button Entfernen in Pixel vom linken Rand */
box-shadow: inset 0 0 4px 4px #888;
}
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="install-update"]
{
position: absolute !important;
top: 16px !important;
left: 540px !important;
}
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="preferences"] /* Einstellungen */
{
position: absolute !important;
top: 16px !important;
left: 750px !important; /* Lage des Button Einstellungen in Pixel vom linken Rand */
box-shadow: inset 0 0 4px 4px #888;
}
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="report"]
{
display: none !important;
}
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="expand"] /* Verwalten */
{
position: absolute !important;
top: 16px !important;
left: 900px !important; /* Lage des Button Verwalten in Pixel vom linken Rand */
box-shadow: inset 0 0 4px 4px #888;
}
.message-bar{
display:none;
}
/* 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: gainsboro !important;/*Hintergrundfarbe vom Button*/
margin-top:1px!important; /*Abstand zum Button darüber*/
border-radius:60px!important;/*Rundung vom Button*/
box-shadow: inset 0 0 5px 5px #888;
}
/*Aktiver Button rot, Schrift weiß*/
#categories > .category[selected]{
color:white!important;
background-color: red !important;
margin-top:1px!important;
border-radius:60px!important;
box-shadow: inset 0 0 5px 5px #888;
}
/* 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;
box-shadow: inset 0 0 5px 5px #888;
}
/* Die Breite der Felder unter Add-ons entdecken im rechten Fensterteil */
.App,
.DiscoPane,
.Footer{
max-width: initial !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*/
box-shadow: inset 0 0 3px 3px #888;
}
/* Button oben mit dem Zahnrad bei hover blau */
#header-utils-btn:hover{
color:white!important;
background-color: lime!important;
border-radius:60px!important;
box-shadow: inset 0 0 3px 3px #888;
}
/* Zurückbutton bei geöffneter Einstellung einer Erweiterung */
#go-back{
background-color: silver !important;/*Hintergrundfarbe vom Button*/
border-radius:60px!important;/*Rundung vom Button*/
box-shadow: inset 0 0 3px 3px #888;
}
#go-back:hover{
color:white!important;
background-color: lime!important;
border-radius:60px!important;
box-shadow: inset 0 0 3px 3px #888;
}
/* 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;
}Grüße
FuchsFan
Edit:
So dann hier der Block für "Aktualisieren", er befindet sich unter dem Button "Verwalten" mit gleichem Abstand vom unteren Rand wie alle anderen vom oberen. Ist aber nur zu sehen, wenn Update auf manuell steht, wie Andreas geschrieben hat.
In dem Code von Zeile 215 bis 220 ersetzen.
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="install-update"]
{
position: absolute !important;
top: 72px !important;
left: 900px !important;
box-shadow: inset 0 0 4px 4px #888;
} Guten Morgen,
kommt dieser Block "Aktualisieren" aus dem Edit zusätzlich noch in den Code (mit Kürzung von Andreas) oder wird dafür ein separater Code als @import/ im CSSWeb-Ordner erstellt?
zusätzlich noch in den Code
Dieser Teil im Code ist das:
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="install-update"] {
margin-left: 60px !important;
padding-right: 17px !important;
background: lightgrey !important;
border-radius: 60px !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="install-update"]:hover {
background: red !important;
color: white !important;
}Eigentlich müsstest du den auch haben.
Dieser Teil im Code ist das:
Guten Morgen!
Nein, das ist er nicht. In dem Code aus Beitrag #109 von Zeile 215 bis 220 ersetzen.
Grüße
FuchsFan
wenn gleich das heutige nachträglich eingefügte "Edit" dort gestanden hätte, wäre meine Frage nicht gekommen.
Aber nun ist das ja geklärt.
Habe deinen Code mal durchgespielt - leider habe ich eine andere Auflösung am PC > 1680 x 1050 < und dadurch wird auch bei ganzem Bildschirm 21,5 " alles sehr weit auseinander gezogen.
Habe in meiner Not schon Zeile 125 von 94 auf 107 vw geändert, damit zumindest die Umrandung passt.
dort gestanden hätte, wäre meine Frage nicht gekommen.
Ja, man lernt immer wieder dazu. Aber fragen kostet ja auch nichts! ???
eine andere Auflösung am PC > 1680 x 1050 <
Deshalb habe ich geschrieben, dass ich den Code für eine Auflösung 1920x1080 hergerichtet habe. Schlussfolgerung für Geräte mit anderer Auflösung, es muss an dem Code geschraubt werden.
Grüße
FuchsFan
Habe in meiner Not schon Zeile 125 von 94 auf 107 vw geändert, damit zumindest die Umrandung passt.
Mal etwas grundsätzliches zu dem Code. Wird der Thread von Anfang an gelesen, so wird jeder erkennen, dass auch ich erst lernen musste damit umzugehen. Und nur über die Hilfe von @2002Andreas und @milupo ist daraus geworden, was es ist.
Jetzt nochmal zur Anpassung für unterschiedliche Bildschirmauflösungen, was überhaupt nicht schlimm ist, wenn ich die entsprechenden Werte anpasse. Wo finde ich sie?
Um die Container nach meinem Geschmack anzupassen gibt es folgenden Block:
addon-list addon-card > .addon.card
{
width: 94vw !important; /* Ausdehnung der Container (weiße Boxen) zum rechten Rand hin */
margin-bottom: 5px !important; /* Abstand zwischen den Containern */
height: 65px !important; /* Höhe der Container */
border: 1px solid grey !important; /* Umrandung der Container mit Farbauswahl */
}Die 94vw sind bei mir passend für die 1920x1080. An diesem Wert muss geschraubt werden, damit ich die Ausdehnung zum rechten Rand hin verändern kann, so wie ich es haben möchte. Hinter den übrigen Werten habe ich eingefügt was sie bewirken.
So dann kommen wir zu den Button auf der rechten Seite. Wie in die richtige Position bringen? Dazu als Beispiel den Button "Deaktiviern":
/**** Button Deaktivieren ****/
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"] {
margin-left: -10px !important;
padding-right: 20px !important;
background: gainsboro !important; /* Hintergrundfarbe */
border-radius: 60px !important;
}
addon-list section addon-card div.card.addon div.addon-card-collapsed div.more-options-menu addon-options panel-list panel-item[action="toggle-disabled"]:hover {
background: magenta !important; /* Farbe bei Mauskontakt */
color: white !important; /* Schriftfarbe bei Mauskontakt */
}Dieses ist der erste Code-Teil dafür (es gibt noch einen zweiten Block). Hier ist eigentlich nur die Farbe anzupassen, ganz nach dem eigenen Geschmack.
Dann zu dem zweiten Block für diesen Button.
addon-list section addon-card .card.addon .addon-card-collapsed .more-options-menu addon-options panel-list panel-item[action="toggle-disabled"]
{
position: absolute !important;
top: 16px !important; /* Abstand vom oberen Rand */
left: 460px !important; /* Entfernung zum rechten Rand hin */
box-shadow: inset 0 0 4px 4px #888; /* innerer Schatten im Button/ 4px die Breite/ #888 die Farbe */
} In diesem Teil lege ich fest, wo in dem Container der Button erscheinen soll. Hinter den einzelnen Werten steht was sie bewirken.
Nach dieser Verfahrensweise muss ich dementsprechend alle anderen Button ausrichten. Andreas meinte, eine fummelige Angelegenheit. Mit Lust und Laune, und probieren geht es dann schon.
So , ich hoffe, dass es doch nun jeder hinbekommen sollte. Andere Werte habe ich auch nicht verändert.
Grüße
FuchsFan
Ich würde gerne noch den Text und die Suche nach Erweiterungen, Themes und Plugins ausblenden..
Wie würde der Code dafür sein?
die Suche nach
Meinst du das so?
Wenn ja, dann teste bitte in der userContent.css
#search-label {
display: none !important;
}
#header-search input.textbox-input::placeholder {
color: transparent !important;
}Hallo, Andreas!
Ich mische mich mal ein, bis zur 71 Beta sieht es so aus wie auf deinem Bild. Schön wäre, wenn auch das Suchfeld noch weg ist.
Im Nightly ohne Funktion.
Grüße
FuchsFan
Also alles weg oben!?
Wenn ja, teste bitte.
.search-label, search-addons > search-textbox {
display: none !important;
}Also alles weg oben!?
Nein, Andreas, der macht es nicht.