Sieht hier so aus im Nightly.
Weder im Nightly noch in den anderen Versionen, Suchfeld ist noch da. Code in die userContent, oder?
Sieht hier so aus im Nightly.
Weder im Nightly noch in den anderen Versionen, Suchfeld ist noch da. Code in die userContent, oder?
Also alles weg oben!?
Nein, Andreas, der macht es nicht.
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
Aber wenn man den RAM-Verbrauch niedrig und die Performance hoch halten möchte
Aber nur dann !!
Oder ist nach deiner Meinung dieses alles nicht mehr wahr? (es gibt viele andere Kommentare dazu / Heise,usw.).
https://www.kuketz-blog.de/browser-addon-…ritt-und-tritt/
Deine Meinung würde mich brennend interessieren.
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 */
}
Alles anzeigen
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
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
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
ich hab noch so ne dünne Linie über den aktiven tab mit deinem Code
Nun waren wir ja erst einmal bei dem Code von @BrokenHeart, dafür waren jetzt die Code_Schnipsel gedacht. Wenn du die jetzt in den Code von BrokenHeart einfügst, dann ist alles bestens. Habe ich jetz probiert.
Nimmst du jetzt meinen Code, dann darfst du nichts weiter verwenden, außerdem musst du ein Theme von Mozilla installieren (ich habe Clouds), sonst werden die Farben nicht richtig dargestellt. Frage nicht warum, das Thema hatten wir schon mal.
Dann versuche mal diesen Code, läuft bei mir bis zur aktuellen Nightly. Farben sind alle anpassbar. Ich nutze Tabs nur oben abgerundet, wenn du unten dazu haben willst, kein Problem.
/**********************************************************************************************************/
/************************ Anpassen der TAB-Leiste *********************************************************/
/**********************************************************************************************************/
/*** inaktiver Tab Rand Stärke und Farbe ****************/
.tab-background[selected="true"],
.tabbrowser-tab:not([selected="true"]) {
border-radius: 10px 10px 0 0 !important;
border: 1px solid #4682B4 !important;
}
/****** entfernt störende Teile des Tab-Hintergrundes ********/
.tabbrowser-tab::after, .tabbrowser-tab::before {
margin-inline-start: 0px!important;
border-left: 0px solid!important;
border-image: none !important;
border-image-slice: 0 !important;
width: 0px !important;
box-sizing: border-box;
opacity: 0 !important;
}
/************* Tabschliessen-Button ****************/
.tab-close-button.close-icon{
display: -moz-box !important;
width: 20px; height: 20px !important;
border: none !important;
border-radius: 5px !important;
background-color: none !important;
}
.tab-close-button {
color: red !important; /* Farbe des Kreuzes */
}
/**** blendet den Hintergrund aller Tabs aus *******/
.tab-background {
background: none !important;
}
/*** nicht aktiver Tab ändert Farbe nach Überfahren mit der Maus ******/
.tabbrowser-tab:hover {
background-image: linear-gradient(to top, gold 30%, yellow 60%)!important;/*background: yellow !important;*/
color: black !important;
}
/************* Hintergrund aktiver Tab ****************/
.tab-background[selected] {
background-image: linear-gradient(to top, orange 15%, yellow 90%)!important;/*background: gold !important;*/
border-radius: 10px 10px 0 0 !important;
border: 1px solid black !important;
}
/************* Schrift aktiver Tab ****************/
.tabbrowser-tab[selected] {
background: none !important;
font-weight: bold !important; /* fette Schrift */
}
/************* Schrift im Zentrum des Tabs ****************/
.tab-label {
-moz-box-flex: 1 !important;
text-align: center !important;
}
/*********** Abstand zwischen den Tabs ******************/
.tabbrowser-tab {
margin-left: 1px !important;
}
/********** obere sichtbare Tablinie entfernt ****************/
.tab-line {
display:none!important
}
/*** doppelte graue Linie unter der Tabs-Toolbar entfernt ***/
#nav-bar{
box-shadow: none !important;
}
/******* Höhe und Breite der Tabs einstellen ********/
.tabbrowser-tab{
max-height: 24px!important;
-moz-box-flex: 0!important;
width: 180px!important; /** Breite der Tabs **/
}
/******** Icon im Tab versetzt ********************************/
#TabsToolbar .tab-icon-image {
height: 15px !important;
width: 15px !important;
margin-left: -4px !important;
margin-bottom: 2px !important;
}
/****************/
Alles anzeigen
Wenn die 4 Untermenüs auch aufgehellt aufpoppen, brauch ich mir ja nur das passende Weiß auszusuchen....
Nu isses weiß:
Wenn ich meine Menüs aufklappe, ist alles so öde in Grau.
Wenn dir das zusagt, dann gib Bescheid, ich stelle dann den Code hier rein.
Grüße
FuchsFan
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;
}
Alles anzeigen
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.
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;
}
Alles anzeigen
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