Menueleiste Ansicht

    Firefox-Version
    96.0.2
    Betriebssystem
    Win11 (64bit)

    Moin,

    mittlerweile habe ich die Menus fast fertig angepasst.

    Hier erst einmal mein kompletter Code

    Allerdings stoße ich an einige, für mich (noch) unüberwindbare Hindernisse.

    Diese sind:

    Bei Symbolleisten - Menüleisten bekomme ich nur das Icon mit rot unterlegt. Was ich aber benötige, ich möchte gerne den Reiter "Menüleiste" bei hover komplett in rot unterlegt haben.

    Hier möchte ich gerne den Reiter "Immer anzeigen" bei hover komplett in rot unterlegt haben.

    Die beiden nachfolgenden Reiter benötige ich nicht, von daher hätte ich diese gerne deaktiviert.

    Hier möchte ich gerne den Reiter "Lesezeichen" bei hover komplett in rot unterlegt haben.

    Die Chronik kann hier gelöscht werden.

    Hier fehlt mir bei "Nur Text zoomen" ebenfalls bei hover der rot hinterlegte Background.

    Icon und Text habe ich mittlerweile nach links verschieben können.

    Da ich hier nur "Standard-Stil" nutze, möchte ich bitte "Kein Stil" deaktiviert und "Standard-Stil" rot unterlegt haben.

    Bei Vollbild, hier habe ich nicht extra ein Screen angefertigt, fehlt mir bei hover ebenfalls background red.

    Ich denke, wenn ich einmal weiss, wie ich: backgroung: red !important; einfügen muss, bekomme ich das bestimmt auch hin.

    Wenn nicht, kann ich fragen.

    Schon mal Danke für die Hilfe.

    Freundliche Grüße
    Barbara

    ____________

    Zitat von BarbaraZ-

    den Reiter "Menüleiste" bei hover komplett in rot unterlegt haben.

    CSS
    #toggle_toolbar-menubar:hover {
  background-color: red !important;
  color: white !important;
}

    CSS
    #menu_pageStylePersistentOnly {
  background-color: red !important;
  color: white !important;
}

    CSS
    #toggle_zoom:hover {
  background-color: red !important;
  color: white !important;
}

    CSS
    #toggle_PersonalToolbar > menupopup:nth-child(4) > menuitem:nth-child(1):hover {
  background-color: red !important;
  color: white !important;
}
    Zitat von BarbaraZ-

    Die beiden nachfolgenden Reiter benötige ich nicht, von daher hätte ich diese gerne deaktiviert.

    CSS
    #toggle_PersonalToolbar > menupopup:nth-child(4) > menuitem:nth-child(2),
#toggle_PersonalToolbar > menupopup:nth-child(4) > menuitem:nth-child(3) {
  display: none !important;
}
    Zitat von BarbaraZ-

    Die Chronik kann hier gelöscht werden.

    CSS
    #menu_historySidebar {
  display: none !important;
}

    Mit freundlichem Gruß
    Andreas
    Mein Laptop  Meine Add-ons

    5 Mal editiert, zuletzt von 2002Andreas (22. Januar 2022 um 11:40) aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

    Bin gerade dabei, die einzelnen "Abschnitte" einzufügen.

    Zum Teil setzen die sich dann gegenseitig außer Kraft. Muss also erst einmal in Ruhe probieren.

    Habe dabei in den Zeilen 58 und 159 noch jeweils einen Klammerfehler gefunden.

    Freundliche Grüße
    Barbara

    ____________

    Sieht schon gut aus. Bei Sidebar Lesezeichen (Bildchen 3) fehlt mir noch und die Ausblendung beim Webseitenstil "Kein Stil" (Bildchen 5).

    Ach ja, die Abschlußßklammer für die Zeilen 58 und 159 waren noch notwendig. Die hatten alles außer Kraft gesetzt.

    Freundliche Grüße
    Barbara

    ____________

    Zitat von 2002Andreas

    Am Ende die Klammer ) gehört da nicht hin.

    Das gleiche gilt für Zeile 106.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    So, den Fehler gefunden.

    Es hängt mit folgendem Eintrag zusammen:

    CSS
    #viewFullZoomMenu menuitem[label="Nur Text zoomen"]{ /*Zoom-Nur Text zoomen*/
    #viewFullZoomMenu menuitem[label="Nur Text zoomen"][type="checkbox"][checked="false"] > .menu-iconic-left 
    display: none !important;
    appearance: none !important;
    background: url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Zoom-Nur Text zoomen.png") no-repeat !important;
    margin-left: 5px !important;
    min-height: 24px !important;
    padding-left: 10px !important;
    background-position: 5px 5px !important;
    }

    Normalerweise ist am Ende der 2. Zeile eine offene Klammer.

    Wenn ich diese wieder setze, deaktiviert es alle folgenden Einträge, macht mir aber bei hover genau das, was in Beitrag #8 dargestellt wird.

    Mit dem dargestellten Code ist alles wieder aktiv, nur eben bei hover nicht das Feld "Nur Text zoomen" in rot unterlegt.

    Hier nochmal der komplette jetzige Code mit dem Schnipsel von oben:

    Freundliche Grüße
    Barbara

    ____________

    Zitat von BarbaraZ-

    Normalerweise ist am Ende der 2. Zeile eine offene Klammer.

    Du hast die bereits in Zeile 1 eingefügt, dann kann das auch nicht funktionieren ;)

    Teste bitte:

    CSS
    #viewFullZoomMenu menuitem[label="Nur Text zoomen"],      /*Zoom-Nur Text zoomen*/
#viewFullZoomMenu menuitem[label="Nur Text zoomen"][type="checkbox"][checked="false"] > .menu-iconic-left { 
    display: none !important;
    appearance: none !important;
    background: url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Zoom-Nur Text zoomen.png") no-repeat !important;
    margin-left: 5px !important;
    min-height: 24px !important;
    padding-left: 10px !important;
    background-position: 5px 5px !important;
    }

    Du hast dort zwei Selektoren, die öffnende KLammer ist hinter dem ersten Selektor, muss aber hinter den zweiten Selektor.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    Damit blendet er mir komplett den Eintrag: "Nur Text zoomen" incl. Icon aus.

    Ach ja, ursprünglich wurde das auch in Zeile so angesprochen.

    Sogar in beiden Zeile, siehe Zeile 157 und 158 in Beitrag #1.

    Freundliche Grüße
    Barbara

    ____________

    Das ist schon mal großartig. :thumbup:

    Jetzt weis ich, welche Auswirkungen das hat. Danke für den Hinweis

    Habe die Zeile entfernt. Nun ist der Text auch wieder zu lesen, allerdings nicht rot unterlegt bei hover, was er eigentlich sollte .

    Freundliche Grüße
    Barbara

    ____________

    Wenn ich das richtig sehe, ist dafür eigentlich der Code

    Zitat von BarbaraZ-

    #toggle_zoom:hover {

    background-color: red !important;

    color: white !important; }

    zuständig, denn

    Zitat von 2002Andreas

    #viewFullZoomMenu menuitem[label="Nur Text zoomen"]

    ist nur eine andere Schreibweise, nur ohne :hover. Das sieht im Inspektor in etwa so aus:

    CSS
    <menu id="viewFullZoomMenu" ... >
<menuitem id="toggle_zoom" label="Nur Text zoomen" ... >

    #viewFullZoomMenu ist also nur der übergeordnete Selektor. Man könnte auch

    CSS
    #viewFullZoomMenu #toggle_zoom

    schreiben.

    Schiebe mal den Code von Zeile 134 bis 137 vor Zeile 257 (menu[label="Webseiten-Stil"]). CSS arbeitet kaskadierend, also von oben nach unten.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    Einmal editiert, zuletzt von milupo (22. Januar 2022 um 15:53) aus folgendem Grund: Ein Beitrag von milupo mit diesem Beitrag zusammengefügt.

    So, ich habe jetzt die erste Zeile auskommentiert und den Code versetzt.

    So weit, so gut.

    Nun hat er mir aber mein Icon stibitzt.

    Hier der Codeschnipsel:

    CSS
     /*#viewFullZoomMenu menuitem[label="Nur Text zoomen"],*//*Zoom-Nur Text zoomen*/
    #viewFullZoomMenu menuitem[label="Nur Text zoomen"][type="checkbox"][checked="false"] > .menu-iconic-left { 
    appearance: none !important;
    background: url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Zoom-Nur Text zoomen.png") no-repeat !important;
    margin-left: 5px !important;
    min-height: 24px !important;
    padding-left: 10px !important;
    background-position: 5px 5px !important;
    }

    Freundliche Grüße
    Barbara

    ____________

    Zitat von BarbaraZ-

    ich habe jetzt die erste Zeile auskommentiert

    Nein, das solltest du nicht tun. Das muss bleiben, denn das ist ja der Eintrag ohne :hover. Ich wollte nur den Zusammenhang dieser Zeile mit der von #toggle-zoom erläutern. Du solltest nur den Code von oben nach unten verschieben, wegen der Abarbeitungsreihenfolge von nicht-hover und hover.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    So geschehen.

    Allerdings greift background-color: red nicht bei hover.

    Selbst wenn ich aus background-color nur background mache. klappt es nicht.

    Dachte über diesen Trick schaffe ich es.

    Freundliche Grüße
    Barbara

    ____________

    Zitat von BarbaraZ-

    Allerdings greift background-color: red nicht bei hover.

    Du hast auch auf die Klammern geachtet?

    Barbara, die Selektoren müssen offensichtlich in beiden Fällen einheitlich sein, also entweder

    #viewFullZoomMenu menuitem[label="Nur Text zoomen"] oder #toggle_zoom.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    Einmal editiert, zuletzt von milupo (22. Januar 2022 um 16:44) aus folgendem Grund: Ein Beitrag von milupo mit diesem Beitrag zusammengefügt.