Wie finde ich heraus, wann (und welche) Sonderformen benötigt werden?
wie = mit den Browser-Werkzeugen
wann = wenn background oder background-color nicht wie gewünscht funktionieren, gibt es eine andere Bezeichnung dafür, die du dann mit den Werkzeugen suchen musst.
Stehen diese Bezeichnungen im Inspektor immer recht weit unten unter "Geerbt von ELEMENT"?
Die innere Kachel im Feld "Standardbrowser" möchte ich in der Farbe #f8de3f einfärben. Definiere ich diese im Code, wird das Feld jedoch in #e6ce3c angezeigt.
Wenn Du das ↓ meinst, teste bitte das ** CSS-Schnipsel, ist sowohl für Standardbrowser, als auch für nicht Standardbrowser.
**
CSS#isDefaultPane { --promo-background-color: #006800 !important; --promo-message-text-color: #FFF !important; } #isNotDefaultPane { --promo-background-color: #f8de3f !important; --promo-message-text-color: #000 !important; }
Funktioniert. Warum muss ich
--promo-background-color: #006800 !important;
--promo-message-text-color: #FFF !important;verwenden und nicht einfach nur
background-color:
color:
? Und: Wie finde ich heraus, wann (und welche) Sonderformen benötigt werden? Möchte das nur für die Zukunft verstehen, damit ich nicht mehr so viel fragen muss.
Und: Wie kann ich hier den border-radius definieren?
oder
CSS:root { --border-color: none !important; }
Ist der bessere Code. Mit dem von Dharkness bleiben an anderen Stellen Rahmenfragmente übrig. Daher besser gleich alles weg.
Jetzt fehlt noch:
Die innere Kachel im Feld "Standardbrowser" möchte ich in der Farbe #f8de3f einfärben. Definiere ich diese im Code, wird das Feld jedoch in #e6ce3c angezeigt.
Hier würde mich auch die Ursache interessieren.
Die Rahmen sind leider immer noch da.
Sollte ich dich falsch verstanden haben, dann sorry.
So sieht das hier aus, erst ohne den Code...dann mit:
Den Rahmen habe ich selbst bereits entfernt bekommen. Mir geht es um den Rahmen im Feld darüber, welcher trotz Code stehen bleibt. Den habe ich bisher noch nicht wegbekommen.
um den dünnen Rahmen innerhalb der hellgelben Box
Auch bitte wieder testen:
CSS#scheduled-backups, #backup-toggle-restore-button, #backup-toggle-scheduled-button, #profilesSettings, #data-migration, #noFxaSignIn { border: none !important; }
Die Rahmen sind leider immer noch da.
folgende Probleme
Du kannst das ja mal testen wenn du magst. Die Farben musst du dir dann wieder anpassen:
CSS#mainPrefPane setting-pane section setting-group moz-card { border: none !important; box-shadow: none !important; background: none !important; } #isDefaultPane { --promo-background-color: #f8de3f !important; } #profilesSettings, #data-migration, #setting-control-syncNoFxaSignIn > moz-box-link, #setting-control-noFxaSignIn > moz-box-link { --box-button-background-color-hover: red !important; } #backup-toggle-scheduled-button:hover, #backup-toggle-restore-button:hover { background-color: red !important; }
Danke für die Ideen, zumindest mein obiger Punkt 3 ist dadurch gelöst.
Der Abschnitt
#mainPrefPane setting-pane section setting-group moz-card {
border: none !important;
box-shadow: none !important;
background: none !important;
}bewirkt bei mir gar nichts.
Und mit
#mainPrefPane setting-pane section setting-group moz-card {
border: none !important;
box-shadow: none !important;
background: none !important;
}wird zu viel entfernt.
Zum Rahmenproblem (Punkt 1):
Der Hintergrund der gesamten Seite ist dunkelgelb. Die einzelnen Menüpunkte sind mit einem hellen gelb abgesetzt und der darin liegende Button ist ohne :hover wieder gelb. Mir geht es bei den zwei genannten Menüpunkten um den dünnen Rahmen innerhalb der hellgelben Box. Diesen bekomme ich nicht entfernt.
Durch deinen obigen Code bleibt dieser bestehen und zusätzlich wird der gesamte hellgelb hinterlegte Bereich entfernt.
Dein Code in Beitrag #4 ist genau das, was ich für die Checkboxen gesucht hatte.
Durch das Re-Design von about:preferences muss ich meine dafür angelegte Anpassung einmal neu schreiben. Hierbei habe ich (bis jetzt) folgende Probleme:
Die innere Kachel im Feld "Standardbrowser" möchte ich in der Farbe #f8de3f einfärben. Definiere ich diese im Code, wird das Feld jedoch in #e6ce3c angezeigt.
Code hierfür:
setting-control#setting-control-isNotDefaultPane {
background-color: #f8de3f !important; /*warum wird Farbe #e6ce3c angezeigt?*/
}:root {
--page-nav-margin-block-start: 20px !important;
--page-space-block-start: 20px !important;
}
moz-page-nav-button {
background-color: #9c1818 !important;
color: #ffd700 !important;
border-top-right-radius: 15px !important;
border-bottom-right-radius: 15px !important;
border-bottom-left-radius: 5px !important;
border-top-left-radius: 5px !important;
}
moz-page-nav-button:hover {
background-color: #ffd700 !important; /* warum in #f1bc03 angezeigt */
color: #9c1818 !important;
border-top-right-radius: 15px !important;
border-bottom-right-radius: 15px !important;
border-bottom-left-radius: 5px !important;
border-top-left-radius: 5px !important;
}
button {
&[selected] {
background-color: #9c1818 !important;
color: #afbde1 !important;
border-top-right-radius: 15px !important;
border-bottom-right-radius: 15px !important;
border-bottom-left-radius: 5px !important;
border-top-left-radius: 5px !important;
}
}
button {
&[selected]:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-top-right-radius: 15px !important;
border-bottom-right-radius: 15px !important;
border-bottom-left-radius: 5px !important;
border-top-left-radius: 5px !important;
}
}
button {
&[selected] {
&::before {
background-color: #afbde1 !important;
max-height: 110% !important;
}
}
}Ist ganz offenbar der Punkt "moz-page-nav-button:hover " ohne Funktion. Ich muss die Rahmenbedingungen jedoch über "moz-page-nav-button" definieren, da sich der allgemeine "Button" auch auf andere Buttons auswirkt.
Edit: Wie kann ich bei den Checkboxen unter dem Punkt "Startseite" die Farbe bei leer und bei checked ändern?
Danke für eure Hilfe.
für die Menüs nicht mehr so
Der funktioniert auch in der ESR Version 140 nicht so wie du schreibst:
durch Klick auf Datei, Bearbeiten
Dafür musst du dann noch einen weiteren Code haben.
Das war tatsächlich die Lösung. Habe dort jetzt auch die geänderten Bezeichnungen angepasst und jetzt läuft alles wieder wie es soll.
Leider funktioniert mein Code für die Menüs nicht mehr so, wie er soll.
#textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
--panel-text-color: #fff !important;
--menu-disabled-color: lightgrey !important;
--panel-background-color: #000080 !important;
--panel-border-color: #000080 !important;
#textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
--panel-text-color: #fff !important;
--menu-disabled-color: lightgrey !important;
--panel-background-color: #000080 !important;
--panel-border-color: #000080 !important;
--panel-border-radius: 5px !important;
}
#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
color: #fff !important;
background-color: #2b2c86 !important;
}
}
#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
color: #fff !important;
background-color: #2b2c86 !important;
}Jetzt ist es so, dass der Code sich nicht mehr auf die Menüs auswirkt, die sich durch Klick auf Datei, Bearbeiten, Ansicht, usw. öffnen. Auch sollte der Hintergrund bei :hover einen - ich meine 15px - Radius aufweisen, was es auch nicht mehr tut...
Wenn du tatsächlich das gleiche Problem hast, sollte die Lösung ja funktionieren, die hier bereits steht …
--panel-background → --panel-background-color
--panel-text → --panel-text-color
Danke, hat schonmal geholfen. Bei mir funktionier es jedoch trotzdem nicht mehr in der ganz oberen Menüleiste (dort wo sich die Punkte Datei, Bearbeiten, Ansicht, Chronik, ... befinden). Hier findet der Code auf die dortigen Menüs der genannten Punkte keine Anwendung mehr.
Ich habe dasselbe Problem. Auch mein Code für die besagten Menüs funktioniert seit dem neuestem Update auf V.152.0 nicht mehr.
/* 3.1 Kontextmenü*/
#textbox-contextmenu,
moz-input-box.urlbar-input-box > menupopup,
#tabContextMenu,
#tabContextMenu [_moz-menuactive] > menupopup,
#placesContext,
#placesContext [_moz-menuactive] > menupopup,
#toolbar-context-menu,
#toolbar-context-menu [_moz-menuactive] > menupopup,
#contentAreaContextMenu,
#contentAreaContextMenu [_moz-menuactive] > menupopup {
--panel-color: #fff !important;
--menu-disabled-color: lightgrey !important;
--panel-background: #000080 !important;
--panel-border-color: #000080 !important;
--panel-border-radius: 5px !important;
}
#textbox-contextmenu [_moz-menuactive],
moz-input-box.urlbar-input-box > menupopup [_moz-menuactive],
#tabContextMenu [_moz-menuactive],
#placesContext [_moz-menuactive],
#toolbar-context-menu [_moz-menuactive],
#contentAreaContextMenu [_moz-menuactive],
#contentAreaContextMenu :is(menu,menuitem):hover {
color: #fff !important;
background-color: #2b2c86 !important;
}auf einem Tab
Lange Version:
CSS#tabContextMenu, #tabContextMenu [_moz-menuactive] > menupopup, #placesContext, #placesContext [_moz-menuactive] > menupopup, #toolbar-context-menu, #toolbar-context-menu [_moz-menuactive] > menupopup, #contentAreaContextMenu, #contentAreaContextMenu [_moz-menuactive] > menupopup { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } #tabContextMenu [_moz-menuactive], #placesContext [_moz-menuactive], #toolbar-context-menu [_moz-menuactive], #contentAreaContextMenu [_moz-menuactive], #contentAreaContextMenu :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }Kurze Version:
CSS#tabContextMenu, #placesContext, #toolbar-context-menu, #contentAreaContextMenu { &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; color: red !important; background-color: lightblue !important; } }Edit:
Wenn du das überall so haben möchtest, dann kannst du auch das mal testen:
CSSmenupopup { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }
Mir sind noch zwei Stellen aufgefallen:
- das Kontextmenü bei rechtsklich in die URL-Leiste sowie das im Suchfeld, welches man mit Strg + F öffnet.
Deinen Code für überall habe ich getestet, jedoch habe ich damit wieder das ursprüngliche Problem, dass sich das auch auf Menüs auf Webseiten auswirkt.
Wie findest du eig. die adressierung der Menüs an der genauen Stelle, um ausschl. diese anzusprechen? Mit den Browser-Werkzeugen finde ich überall nur das allgemeine "arrowscrollbox.menupopup-arrowscrollbox".
Die Langform alleine passt nun für alles
Freut mich
Ich habe gerade festgestellt, dass doch noch nicht alles passt:
Wenn ich das Kontextmenü öffne, wenn der Mauszeiger auf einem Tab (egal ob aktiv oder nicht) liegt, öffnet sich noch das normale Menü ohne Änderungen...
Dasselbe wenn ich auf Höhe
Teste bitte:
CSS#placesContext, #placesContext [_moz-menuactive] > menupopup, #toolbar-context-menu, #toolbar-context-menu [_moz-menuactive] > menupopup, #contentAreaContextMenu, #contentAreaContextMenu [_moz-menuactive] > menupopup { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } #placesContext [_moz-menuactive], #toolbar-context-menu [_moz-menuactive], #contentAreaContextMenu [_moz-menuactive], #contentAreaContextMenu :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }Edit:
Ich habe mal etwas gebastelt hier, diese Kurzform sollte auch ausreichen:
CSS#placesContext, #toolbar-context-menu, #contentAreaContextMenu { &, menupopup, & [_moz-menuactive], :is(menu, menuitem):hover { --panel-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; color: red !important; background-color: lightblue !important; } }
Die Langform alleine passt nun für alles 
Hast du meine Version aus #3 getestet? Da sollte das nicht auftreten...
Ja, die wirkt sich jedoch vollständig auch auf besagte Menüs auf Webseiten aus, was ich eig. nicht möchte.
mit einem rechtsklick
Teste bitte wieder:
CSS#contentAreaContextMenu { --menuitem-hover-background-color: #2B2C86 !important; --panel-color: #fff !important; --menu-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } #contentAreaContextMenu :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }
Danke, auch der Code funktioniert wie gewünscht. Nur:
wenn ich im Kontextmenü einen Punkt wähle, hinter welchem sich ein zweites Menü öffnet (Bsp. "Einen KI-Chatbot fragen" findet der Code auf dieses Menü keine Anwendung. Dasselbe wenn ich auf Höhe der Tableiste das Kontextmenü öffne, wird auch dieses "klassisch" ohne die o.g. Anpassungen angezeigt.
Dropdown menüs in Menüleiste
Meinst du das so, also nur in der Menüleiste?
Wenn ja, dann teste bitte, Farben wenn dann anpassen:
CSS/*3. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/ #toolbar-menubar menupopup { --menuitem-hover-background-color: #2B2C86 !important; --panel-color: #fff !important; --menu-color: #fff !important; --menu-disabled-color: lightgrey !important; --panel-background: #000080 !important; --panel-border-color: #000080 !important; --panel-border-radius: 5px !important; } #toolbar-menubar menupopup :is(menu,menuitem):hover { color: red !important; background-color: lightblue !important; }
Hier bleiben die unerwünschten Auswirkungen weg. Gibt es auch noch einen solchen Code für das Kontextmenü, welches sich mit einem rechtsklick im Browserfenster öffnet?
Hallo,
vielleicht zeigst du erst einmal deinen aktuellen Code und beschreibst anhand dessen und idealerweise sogar eines Screenshots, was für dich nicht passt. Mit der Beschreibung „sieht nur noch zum teil so aus, wie er soll” (sic!) kann man nichts anfangen.
Hier der Code:
@-moz-document url(about:addons){
/*Hintergrund gesamte Seite*/
body {
cursor: default;
background-color: #ffd700 !important;
}
.main-search {
background: #ffd700 !important;
display: flex;
justify-content: flex-end;
align-items: center;
padding-inline-start: 28px;
padding-top: 20px;
padding-bottom: 30px;
max-width: var(--section-width);
}
.main-heading {
background: #ffd700 !important;
display: flex;
margin-inline-start: var(--main-margin-start);
padding-bottom: 16px;
max-width: var(--section-width);
}
.sticky-container {
background: #ffd700 !important;
width: 100%;
position: sticky;
top: 0;
z-index: var(--z-index-sticky-container);
}
/*Suchfeld*/
#input {
&[type="search"] {
--input-background-icon: url(chrome://global/skin/icons/search-textbox.svg);
padding-inline-end: var(--space-xxsmall);
background-color: lightblue;
background-color: #00016e !important;
color: #afbde1 !important;
}
}
/* search-addons > search-textbox {
margin: 0;
width: 20em;
min-height: 32px;
background-color: #00016e !important;
color: #afbde1 !important;
}
*/
/*Block nach recht verschieben*/
.main-search {
margin-left: 650px !important;
}
/*Überschriften*/
h1 {
margin: 0 0 8px;
font-size: 1.46em;
font-weight: 300;
line-height: 1.3em;
color: red !important;
background-color: #00016e !important;
border-radius: 15px !important;
text-align: center !important;
font-weight: bold !important;
width: 350px !important;
}
/*Sidebar*/
.navigation {
overflow-x: hidden;
overflow-y: auto;
position: relative;
background-color: #ffd700 !important;
}
#categories > .category[selected], #categories > .category.selected { /* --> aktuelle Seite */
color: #afbde1 !important;
}
#categories > .category {
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}
.sidebar-footer-link {
background-color: #9c1818 !important;
color: #ffd700 !important;
border-color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}
#categories > .category:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}
.sidebar-footer-link:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
border-radius: 30px !important;
margin-bottom: 3px !important;
}
/*Buttons / Verlinkungen*/
.page-options-menu > .more-options-button {
background-image: url("chrome://global/skin/icons/settings.svg");
width: 32px;
height: 32px;
background-color: #9c1818 !important;
color: #ffd700 !important;
}
.page-options-menu > .more-options-button:hover {
background-image: url("chrome://global/skin/icons/settings.svg");
width: 32px;
height: 32px;
background-color: #ffd700 !important;
color: #9c1818 !important;
border-color: #9c1818 !important;
}
button {
font-weight: 600;
color: #ffd700 !important;
background-color: #9c1818 !important;
}
button:hover {
font-weight: 600;
color: #9c1818 !important;
background-color: #ffd700 !important;
border-color: #9c1818 !important;
}
/*Einzelne Erweiterungen*/
.addon.card {
box-shadow: var(--card-shadow);
background-color: #f0e68c !important;
color: #00016e !important;
}
.addon.card:hover {
box-shadow: #afbde1 !important;
background-color: #f0e68c !important;
}
/*aktiviert_deaktiviert Schalter*/
.toggle-button:hover {
background: #9c1818 !important;
border-color: transparent;
border: none !important;
}
.toggle-button {
background: #9c1818 !important;
border-color: transparent;
border: none !important;
}
/*Add-on Optionen Drop-down*/
panel-list {
font: menu;
background-color: #9c1818 !important;
color: #ffd700 !important;
}
addon-options > panel-list > panel-item:hover,
plugin-options > panel-list > panel-item:hover {
fill: #9c1818 !important;
--in-content-button-background-hover: #ffd700 !important;
--in-content-button-text-color-hover: #9c1818 !important;
}
/*Detailansicht*/
input[type="radio"]:checked, .radio-check[selected] {
-moz-context-properties: fill;
fill: #ffd700 !important;
color: var(--in-content-primary-button-text-color);
background-color: #9c1818 !important;
background-image: url("chrome://global/skin/icons/radio.svg");
border-color: var(--in-content-primary-button-border-color);
color-adjust: exact;
}
button.ghost-button:not(.semi-transparent):enabled {
background-color: #9c1818 !important;
color: #ffd700 !important;
border-radius: 30px !important;
border-color: #9c1818 !important;
}
button.ghost-button:not(.semi-transparent):enabled:hover {
background-color: #ffd700 !important;
color: #9c1818 !important;
border-radius: 30px !important;
border-color: #ffd700 !important;
}Dieses Symbol hinter dem Suchfeld sollte einen Radius von 5px haben und die Lupe im innern am besten in #ffd700 gehalten sein. Bei :hover sollte der Rahmen in #9c1818 sein.
Hallo,
irgendwas funktioniert bei mir nicht mehr richtig. Der Button neben dem Suchfeld (mit dem Lupen-Symbol) sieht nur noch zum teil so aus, wie er soll.
Hat jemand den Code parat, um Farbe des Symbols, Radius und Farbe des Buttons festzulegen?
Ich nutze aktuell folgenden Code:
/*3. Farbe Rechtsklickmenü + Dropdown menüs in Menüleiste*/
arrowscrollbox.menupopup-arrowscrollbox {
--menuitem-hover-background-color: #2B2C86 !important;
--panel-color: #fff !important;
--menu-color: #fff !important;
--menu-disabled-color: lightgrey !important;
--panel-background: #000080 !important;
--panel-border-color: #000080 !important;
--panel-border-radius: 5px !important;
}Mein Problem ist nun, dass sich dieser auch (teilweise) auf drop down Menüs auf Webseiten auswirkt, wenn diese auch als arrowscrollbox.menupopup-arrowscrollbox definiert sind. Kann der Code so angepasst werden, dass sich dieser nur noch auf die gewünschten Menüs auswirkt?