da wohl auch Codes für den alten Anwendungs-Button so bezeichnet werden
Gebe ich dir Recht, aber sie werden dort bei ihm in dem Ordner aufgelistet, und damit ich bei den vielen Dateien nicht die Übersicht verliere, so habe ich das einfach übernommen. Gleichnamigen Ordner in Chrome und dann @import.
Grüße
FuchsFan
Du verlinkst nur auf die Übersichtsseite. Wie heißt bei Aris die entsprechende CSS-Datei?
Welche jetzt speziell für das Menü zuständig ist , kann ich nicht sagen. Wenn du in die Dateien schaust mit deiner Erfahrung und deinen Kenntnissen wirst du das bestimmt feststellen. Mich würde das auch interessieren.
Hier dann die Namen der Dateien, die ich nutze:
Im Ordner > buttons <:
======================
icons_colorized.css (diese habe ich gewählt/neuerdings sind noch viele dazu gekommen)
buttons_on_bookmarks_toolbar_old_size_and_appearance.css
buttons_on_navbar_classic_appearance.css
Im Ordner > appbutton <:
========================
appbutton_popup_icons_colorized.css
appbutton_popup_more_icons.css
Grüße
FuchsFan
Edit:
Es ist die Datei: appbutton_popup_icons_colorized.css
Was mich aber doch mal interessieren würde, wo das Original zu finden ist. Ich tippe ja ganz stark auf Aris, aber da habe ich die Dateien nicht gefunden. Ich weiß auch nicht, wie die Hauptdatei original heißt.
Ich nutze es von Aris. Aus seinem ganzen Paket habe ich aber nur 5 Dateien in Betrieb, u.a. ist auch die für das Hamb.Menü dabei. Weil er ja immer fleißig aktualisiert, so bin ich immer auf dem neuesten Stand.
Hier zu finden:
https://github.com/Aris-t2/CustomCSSforFx
So schaut's aus:
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;
} 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
Wie ist es damit:
Ich habe es im aktuellen Nightly ausprobiert, keine Probleme.
Grüße
FuchsFan
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
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
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! ??
Die kann man ausblenden:
Na wunderbar, Andreas, damit ist das Problem erst einmal aus der Welt. Hier im 71b11 mit der Höhe 60px (wie im Original):
Grüße
FuchsFan
Im Nightly wird fast jeden Tag etwas verändert, von daher passe ich mir dort fast gar nichts an.
Ich wollte nur zum Verständnis bringen, dass die Rubrik Themes ab der 71b anders gestaltet ist. Im 70 sind die Grafiken nicht dabei, deshalb reicht auch die Höhe von zB. 60px.
Also die unter Erweiterungen..Themes..Plugins.
Ich glaube bei Themes würde das schon reichen. Ich habe ein Bild vom Nightly angehängt. Nun sollte auch verständlich sein, warum die Höhe der Container dementsprechend angepasst sein muss.
jeden einzelnen Button exakt anzusprechen
Na, das ist aber ein großer Batzen Arbeit, lohnt sich der Aufwand?
Ja, Andreas , das ist gut möglich, dass es damit zusammenhängt.
Ich habe im 71b11den Wert in dem Block angepasst, sieht dann nicht mehr so schön aus, aber das Durcheinander bei Themes ist dann entwirrt. Ich glaube, dass es durch die Grafiken (oder wie das immer heißt) kommt.
addon-list addon-card > .addon.card
{
width: 80vw !important;
margin-bottom: 5px !important;
height: 125px !important; den Wert so erhöht
border: 1px solid grey !important;
}
Grüße
FuchsFan
Im jetzigen Fall ist das dann natürlich zusätzliche (unnötige) Arbeit.
Ja, Andreas, den Code, den ich gestern zuletzt rein gestellt habe funktioniert in der aktuellen Version 70 ganz sauber. Gestern dann noch die "Überraschung ", funktioniert nur teilweise in 71b11 und im Nightly. Es wäre nett, wenn das mal jemand überprüfen könnte.
Es geht darum:
1. Im 71b11 , in der Rubrik > Themes > ein wirres Durcheinander. Die Button liegen nicht an den dafür vorgesehenen Flächen. Einige
liegen übereinander. Alle anderen Rubriken hier dann noch sauber.
2. Im Nightly unter Themes das gleiche Szenario. Dann wirkt der Code für das Zahnradsymbol auch nicht mehr. Der Rest dann noch sauber, so wie ich das erkennen kann.
Schade, das es in den Versionen Ärger macht,
Grüße
FuchsFan
Wie du selbst bemerkt hast, ist das css von mir nicht fehlerfrei, das ist keine Absicht.
Hallo .DeJaVu!
Das habe ich dir nicht unterstellt. So, wie du ja selbst sagst, sind Teile des Codes von dir, was nahe liegt, dass du der erste Ansprechpartner bei Fehlern sein solltest. Das hat Andreas auch so gesehen. Deinen ersten Beitrag dazu empfand ich wie einen Schuss aus der Hüfte heraus. Eventuell hast du es ja nicht so gemeint, und ich es nur so empfunden.
Ich akzeptiere auch deine Entscheidung, jeder macht das , wozu er Lust und Laune hat. Und ich bitte dich, mach jetzt aus dieser Sache kein Drama, alles nicht lebenswichtig.
Grüße
FuchsFan
Ich habe ihn nur verändert:
Gut Andreas, so würde es auch gehen. Dann müsste ich aber unter Erweiterungen, usw. die Button weiter nach rechts bringen, würde dann besser aussehen, denke ich.
Erst einmal nehme ich den Block
.addon-description {
min-width: 1150px !important;
}
ganz raus, so kann das Andere bleiben.
Dank auch an dich, Andreas. ?
Warum sagst du das nicht gleich, genau das ist der Schlüssel zum Erfolg. Das ist ja nicht mein Code, aber weil er mir gefällt habe ich versucht ein wenig zu "basteln". Mit der Hilfe von Andreas, und jetzt mit deiner läuft die Sache wieder rund.
Ich habe jetzt erst einmal den kompletten von dir erwähnten Block entfernt, das Ergebnis sieht dann so aus:
