1. Nachrichten
  2. Forum
    1. Unerledigte Themen
    2. Forenregeln
  3. Spenden
  • Anmelden
  • Registrieren
  • Suche
Alles
  • Alles
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
  1. camp-firefox.de
  2. Mira_Belle

Beiträge von Mira_Belle

  • Symbole in Menüs

    • Mira_Belle
    • 4. Juli 2022 um 22:48

    So, dieser Teil ist von meiner Warte abgeschlossen!

    Ganz <3 lich möchte ich mich bei allen Beteiligten für Ihre Hilfen, Ihre Ideen, Anregungen und Unterstützungen bedanken.

    Jetzt geht es an die anderen Pop-ups.

    Sechs Stück an der Zahl habe ich gezählt.

    Dafür werde ich dann aber einen neuen Thread aufmachen.

    Symbole in den Pop-ups

    Gruß

    Mira

  • Symbole in Menüs

    • Mira_Belle
    • 4. Juli 2022 um 19:04

    So hier der Code

    CSS
    @-moz-document url(chrome://browser/content/browser.xhtml) {
    
        .foo {    /* nur wegen der Klammern */
        }
        /*--------------------------------------------------------------------------*/    
        /*--------- Texte im Hamburgermenü und in den Submenüs eingerückt ----------*/
        /*-------------- und in dem Anmeldenbutton das Icon eingefügt --------------*/
        /*--------------------------------------------------------------------------*/
    
        .subviewbutton:not(.subviewbutton-iconic, [checked="true"], [targetURI]) > .toolbarbutton-icon {
            width: 16px;
            height: 16px;
            margin-inline-end: 8px !important;
            -moz-context-properties: fill, fill-opacity;
            fill: currentColor;
        }
    
        #appMenu-fxa-label2::before,
        #fxa-manage-account-button::after {
            content: "";
            display: -moz-box;
            border-radius: 50%;
            background: var(--avatar-image-url) no-repeat center/contain;
            -moz-context-properties: fill;
            fill: currentColor;
        }
    
        #appMenu-fxa-label2::before {
            width: 16px;
            height: 16px;
            margin-inline-end: 8px;
        }
    
        /* Neuer Tab */
    
        #appMenu-new-tab-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/new-tab.svg");
        }
    
      /* Neues Fenster */
    
        #appMenu-new-window-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/window.svg");
        }
      
      /* Neues privates Fenster */
    
        #appMenu-new-private-window-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/privateBrowsing.svg");
        }
    
      /* Lesezeichen */
    
        #appMenu-bookmarks-button {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmark.svg");
        }
    
        /* Neues privates Fenster */
    
        #appMenu-new-private-window-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/privateBrowsing.svg");
        }
    
        /* Lesezeichen */
    
        #appMenu-bookmarks-button {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmark.svg");
        }
    
        /* Chronik */
    
        #appMenu-history-button {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/history.svg");
        }
    
        /* Download */
    
        #appMenu-downloads-button {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/downloads.svg");
        }
    
        /* Passwörter */
    
        #appMenu-passwords-button {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/login.svg");
        }
    
      /* Add-ons und Themes */
    
        #appMenu-extensions-themes-button {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/extension.svg");
        }
    
        /* Drucken */
    
        #appMenu-print-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/print.svg");
        }
    
        /* Seite speichern unter */
    
        #appMenu-save-file-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/save.svg");
        }
    
        /* In Seite suchen */
    
        #appMenu-find-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/search-glass.svg");
        }
    
        /* Zoom */
    
        #appMenu-zoom-controls2::before {
            margin-top: 3px !important;
            margin-right: 10px !important; 
            margin-left: -1px !important;
            content: '' !important;
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            mask-image:  url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/screenshot.svg") !important;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: #e1e1e1 !important;
        }
    
        /*Einstellungen */
    
        #appMenu-settings-button {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/settings.svg");
        }
    
        /*Weitere Werkzeuge */
    
        #appMenu-more-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/ion.svg");
        }
    
        /* Hilfe */
    
        #appMenu-help-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/help.svg");
        }
    
        /* Beenden */
    
        #appMenu-quit-button2 {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/quit.svg");
        }
    
        /*= Panel - Bookmark =========================================================*/
      
        /* Aktuellen Tab als Lesezeichen ... */
    /*
        [data-l10n-id="bookmarks-bookmark-edit-panel"] {
            list-style-image: url("chrome://browser/skin/window.svg");
        }
    */
        /* Lesezeichen bearbeiten */
    /*
        [data-l10n-id="bookmarks-current-tab"] {
            list-style-image: url("chrome://browser/skin/new-tab.svg");
        }
    */
    
        /* Lesezeichen bearbeiten */
        
        [data-l10n-id="bookmarks-bookmark-edit-panel"]::before {
            margin-top: 3px !important;    
            margin-right: -15px !important;
            margin-left: -1px !important;
            content: '' !important;
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            mask-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/window.svg") !important;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: #e1e1e1 !important;
        }
    
        /* Aktuellen Tab als Lesezeichen ... */
    
        [data-l10n-id="bookmarks-current-tab"]::before {
            margin-top: 3px !important;    
            margin-right: -15px !important;
            margin-left: -1px !important;
            content: '' !important;
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            mask-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/new-tab.svg") !important;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: #e1e1e1 !important;
        }
    
    
        /* Lesezeichen durchsuchen */
      
        #panelMenu_searchBookmarks {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/search-glass.svg");
        }
    
        /* Lesezeichen-Symbolleiste ausblenden */
        #panelMenu_viewBookmarksToolbar {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmarks-toolbar.svg");
        }
    
        /* Lesezeichen verwalten */
        #panelMenu_showAllBookmarks {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bookmark-star-on-tray.svg");
        } 
    
        /*= Panel - Chonik ===========================================================*/
        /*= Panel - History ==========================================================*/
      
        /* Kürzlich geschlossene Tabs */
        #appMenuRecentlyClosedTabs {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/tab.svg");
        }
    
        /* Kürzlich geschlossene Fenster */
        #appMenuRecentlyClosedWindows {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/window.svg");
        }
    
        /* Vorherige Sitzung wiederherstellen */
        #appMenu-restoreSession{
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/restore-session.svg");
        }
    
        /* Neueste Chronik löschen ... */
        #appMenuClearRecentHistory {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/forget.svg");
        }
    
        /* Chronik verwalten */
        #PanelUI-historyMore {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/history.svg");
        }
    
        /* Alle Tabs wieder öffnen */
        #appMenu-library-recentlyClosedTabs {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/movetowindow-16.svg");
        }
    
        /* Alle Fenster wieder öffnen */
        #appMenu-library-recentlyClosedWindows {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/restore-session.svg");
        }
    
        /*= Panel - More tools =======================================================*/
      
        /* Symbolleiste anpassen ... */
      
        #appmenu-moreTools-button {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/customize.svg");
        }
    
        /* Werkzeuge für Web-... */
        #appmenu-developer-tools-view .subviewbutton:nth-child(1) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/developer.svg");
        }
    
        /* Task Manager */
        #appmenu-developer-tools-view .subviewbutton:nth-child(2) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/performance.svg");
        }
    
        /* Externes Debugging - Edge bug.svg */
        #appmenu-developer-tools-view .subviewbutton:nth-child(3) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/bug.svg");
        }
    
        /* Browser-Werkzeuge - Edge webdeveloper.svg */
        #appmenu-developer-tools-view .subviewbutton:nth-child(4) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/window-dev-tools.svg");
        }
    
        /* Browser-Inhaltswerkzeuge */
        #appmenu-developer-tools-view .subviewbutton:nth-child(5) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/command-frames.svg");
        }
    
        /* Browser-Konsole */
        #appmenu-developer-tools-view .subviewbutton:nth-last-child(5) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/command-console.svg");
        }
    
        /* Bildschirmgrößen testen */
        #appmenu-developer-tools-view .subviewbutton:nth-last-child(4) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/command-responsivemode.svg");
        }
    
        /* Farbpipette */
        #appmenu-developer-tools-view .subviewbutton:nth-last-child(3) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/command-eyedropper.svg");
        }
    
        /* Seitenquelltext anzeigen - Edge file-search.svg */
        #appmenu-developer-tools-view .subviewbutton:nth-last-child(2) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/document-search.svg");
        }
    
        /* Erweiterungen für Entwickler */
        #appmenu-developer-tools-view .subviewbutton:nth-last-child(1) {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/debugging-addons.svg");
        }
      
        /*= Panel - Help =============================================================*/
      
        /* Hilfe erhalten */  
        #appMenu_menu_openHelp {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/help.svg");
        }
    
        /* Ideen und Feedback teilen ... */
        #appMenu_feedbackPage {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/send.svg");
        }
    
        /* Fehlerbehebungsmodus ... */
        #appMenu_helpSafeMode {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/debugging-workers.svg");
        }
    
        /* Weitere Informationen zur ... */
        #appMenu_troubleShooting {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/more.svg");
        }
    
        /* ?? Eine Glühbirne ?? */
        #appMenu_help_reportSiteIssue {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/lightbulb.svg");
        }
    
        /* Betrügerische Website melden ... */
        #appMenu_menu_HelpPopup_reportPhishingtoolmenu {
        list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/warning.svg");
      }
    
        /* Über Firefox */
        #appMenu_aboutName {
            list-style-image: url("file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/default-release/chrome/icons/info.svg");
        }
    }
    Alles anzeigen

    Icons kommen noch!

    Nachtrag!

    Wie versprochen hier die Icons. => icons.zip

    Und wer sich nicht an dem "leicht" anderen Design stört,

    kann ja jetzt das Projekt nachbauen.

    Wer ganz andere Icons einsetzen möchte, kann das natürlich auch tun. ;)

    Gruß

    Mira

  • Symbole in Menüs

    • Mira_Belle
    • 4. Juli 2022 um 18:02
    Zitat von Sören Hentzschel

    Es sticht leider sofort ins Auge, dass hier Icons mit unterschiedlichen Stilen respektive Strichstärken verwendet werden. Ich würde nur Icons verwenden, die zusammen entsprechend harmonieren. ;)

    Du bist böse. ||

    Mir falle da nur drei Symbole auf.

    1. Drucken...

    2. Seite speichern unter ...

    und

    3. Weitere Werkzeuge

    Bedauerlicherweise habe ich keine Alternativen gefunden.

    Und die Icons sind so in Firefox!


    Zitat von 2002Andreas

    Teste bitte mal:

    CSS
    [data-l10n-id="bookmarks-bookmark-edit-panel"] {
    list-style-image: url("chrome://browser/skin/window.svg");
    }
    
    [data-l10n-id="bookmarks-current-tab"] {
    list-style-image: url("chrome://browser/skin/new-tab.svg");
    }

    Der tuts!

    Danke.

    CSS
     [data-l10n-id="bookmarks-bookmark-edit-panel"]::before {
            margin-top: 3px !important;    
            margin-right: -15px !important;
            margin-left: -1px !important;
            content: '' !important;
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            mask-image: url("chrome://browser/skin/window.svg") !important;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: #e1e1e1 !important;
        }
    
        /* Aktuellen Tab als Lesezeichen ... */
    
        [data-l10n-id="bookmarks-current-tab"]::before {
            margin-top: 3px !important;    
            margin-right: -15px !important;
            margin-left: -1px !important;
            content: '' !important;
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            mask-image: url("chrome://browser/skin/new-tab.svg") !important;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: #e1e1e1 !important;
        }
    Alles anzeigen

    Gefällt mir besser. ;)

    Danke dafür.

    Gruß

    Mira

  • Symbole in Menüs

    • Mira_Belle
    • 4. Juli 2022 um 16:45

    Darf ich meine bisherige Arbeit vorstellen?

    Tada!

    Ich habe nur ein klitzekleines Problem,

    wo ich einfach nicht weiter komme!

    Das Submenü von Lesezeichen!

    Bilder sagen ja mehr als tausend Worte!

    Speed Dial geöffnet

    Beliebige andere Page

    Es fehlen die Icons und ich bekomme sie einfach nicht angezeigt.

    Das hat bestimmt was mit dem ::after zu tun, aber ich weiß mir gerade keinen Rat.

    Kann mir jemand dafür den Code liefern? Bitte.

    Gruß

    Mira

    PS:

    Wenn ich mit diesem "Projekt" fertig bin,

    liefere ich den kompletten Code und die dazugehörigen Icons.

  • Symbole in Menüs

    • Mira_Belle
    • 4. Juli 2022 um 00:38
    Zitat von Dharkness

    Hast Du es mal mit einer vollständigen Pfadangabe probiert?

    Beispiel: list-style-image: url("file:///H:/Profile/Firefox/Fx-Profil-Test/chrome/icons/folder-4.png") !important;

    Cool, das klappt!

    Danke.

    Nun kann ich ja, wenn ich denn alle habe, alle Symbole (Icon) auf diese Weise einbinden.

    Gruß

    Mira

    So bleibt nur noch das Zoom-Problem!

    Nachtrag!

    Bin gerade meine Beiträge durchgegangen.

    Vor lauter Bäume den Wald nicht gesehen!

    Am Ende von Beitrag 41!

  • Symbole in Menüs

    • Mira_Belle
    • 3. Juli 2022 um 22:10
    CSS
    /* Task-Manager */
    
    #appmenu-developer-tools-view .subviewbutton:nth-child(2) {
      list-style-image: url("../icons/performance.svg");
    }

    Da bekomme ich eine Fehlermeldung!
    No chrome package registered for chrome://browser/icons/performance.svg

    Warum will FF da auf chrome://browser/... zugreifen?
    Die Pfadangabe sagt doch was anderes!

    Und bei ...

    CSS
    /* Beenden */
    
    #appMenu-quit-button2 {
      list-style-image: url("../chrome/icons/quit.svg");
    }

    ... funktioniert es einwandfrei!

    Habe zum Test, in einem frischen Profil, in das Chrome-Verzeichnis mal direkt die Symbole kopiert.
    Den Code zu  list-style-image: url("../performance.svg"); abgeändert.
    Bekomme da keine Fehlermeldung, aber das Symbol wird auch nicht angezeigt.

    Komme hier an diesem Punkt einfach nicht weiter.

    Bitte, bitte, gibt es denn jemanden mit der rettenden Idee?

    Gruß

    Mira


    Zitat von Gabbo

    Dann kann ja fast nur noch die Verzeichnis-ebene in Frage kommen:

    Icons liegen hier:

    C:\Users\Benutzer\AppData\Roaming\Mozilla\Firefox\Profiles\default-release\chrome\Icons

    ./ => gleiche Verzeichnisebene

    könnte das sein?

    Das verstehe ich jetzt nicht.

    Die CSS-Dateien liegen direkt in chrome und die Symbole eine Ebene darunter in chrome\icons

  • Symbole in Menüs

    • Mira_Belle
    • 3. Juli 2022 um 20:18
    Zitat von Dharkness

    Wieso tust Du nicht das naheliegendste und versuchst es mit der Adresse/dem Pfad → chrome://global/skin/icons/ in der Adressleiste?

    Das habe ich schon getan!

    So habe ich auch einige Icons gefunden.

    Viel lieber würde ich aber die Icons "extern" einbinden!

    Jedoch habe ich da, wie schon weiter oben erwähnt, irgendwie ein Problem!

    Gruß

    Mira


    Zitat von Gabbo
    ...

    Ich habe mal eine Sammlung von Original-Icons aus dem chrome-Ordner angehängt (ist schon älter, kein Anspruch auf Vollständigkeit); vielleicht kannst Du ja damit etwas anfangen, sollte noch das ein oder andere Icon fehlen.

    FF_original_icons.zip

    Danke Dafür!

  • Symbole in Menüs

    • Mira_Belle
    • 3. Juli 2022 um 18:08
    Zitat von Gabbo

    im Browser liegt es hier:

    chrome://global/skin/icons/developer.svg

    Danke!

    Nur wie kann ich überprüfen, ob auch andere Icons direkt im Browser sind?

    Und wo?

    CSS
      list-style-image: url("../icons/performance.svg");
      list-style-image: url("../icons/bug.svg");
      list-style-image: url("../icons/window-dev-tools.svg");
      list-style-image: url("../icons/command-frames.svg");
      list-style-image: url("../icons/command-responsivemode.svg");
      list-style-image: url("../icons/document-search.svg");

    und für das Hilfe-Submenü fehlt mir

    CSS
      list-style-image: url("../icons/send.svg");

    Gruß

    Mira

  • Symbole in Menüs

    • Mira_Belle
    • 3. Juli 2022 um 17:34
    Zitat von Sören Hentzschel

    Unter dem angegebenen Pfad existiert keine Datei. Gib den Pfad doch einfach mal in die Adressleiste ein.

    Also im Explorer lautet er in etwa so:

    C:\Users\Mira\AppData\Roaming\Mozilla\Firefox\Profiles\default-release\chrome\icons\

    Du meinst also, ich soll

    default-release\chrome\icons\developer.svg

    in die Adressleiste eingeben?

    Es öffnet sich Google

    und bei

    default-release/chrome/icons/developer.svg

    ebenfalls.

    Gruß

    Mira

    Nur wenn ich den kompletten Pfad angebe, wird mir das Symbol angezeigt!

    file:///C:/Users/Mira/AppData/Roaming/Mozilla/Firefox/Profiles/.default-release/chrome/icons/developer.svg

    Gruß

    Mira

  • Symbole in Menüs

    • Mira_Belle
    • 3. Juli 2022 um 17:01
    Zitat von Dharkness

    Versuche es mal mit "..//chrome/icons/developer.svg", ist bei mir merkwürdigerweise auch so nötig.

    Leider nicht von Erfolg gekrönt.

    Gruß

    Mira

    Nachtrag.

    Also mit list-style-image: url("..//chrome/icons/developer.svg"); oder list-style-image: url("..//icons/developer.svg");

    wird gar nichts gezeigt!

    Bei list-style-image: url("../chrome/icons/developer.svg"); oder auch  list-style-image: url("..//icons/developer.svg");.

    Bekomme ich wenigstes eine Fehlermeldung!

    No chrome package registered for chrome://chrome/browser/icons/developer.svg

    bzw. No chrome package registered for chrome://browser/icons/developer.svg

    Kann damit jemand was anfangen?

  • Symbole in Menüs

    • Mira_Belle
    • 3. Juli 2022 um 16:40
    Zitat von milupo

    Wenn der Ordner icons direkt unter chrome liegt: Verwende dann den Pfad ../icons/screenshot.svg

    Tut er!

    Z.B. Aus der "Weitere Werkzeuge-CSS"

    CSS
    #appmenu-developer-tools-view .subviewbutton:nth-child(1) {
      list-style-image: url("../icons/developer.svg");
    }

    Wird das Icon nicht angezeigt.

    Was ich aber mittlerweile gelöst bekommen habe ist,

    dass in diesem Submenü die Icons, welche angezeigt werden,

    nicht mehr dunkel sind und nicht mehr am Text kleben!

    Hier der Code dafür:

    CSS
    #appmenu-moreTools > .panel-subview-body > toolbarbutton > image{
      fill: currentColor;
      -moz-context-properties: fill;
      margin-inline: 0 8px !important;
    }

    Für das erste Symbol!

    Und für alle anderen =>

    CSS
    #appmenu-developer-tools-view > .subviewbutton  > image{
      fill: currentColor;
      -moz-context-properties: fill;
      margin-inline: 0 8px !important;
    }

    Nur für das verdammte Hilfemenü bekomme ich es einfach nicht hin!

    Fazit:

    Nur noch drei Probleme!

    1. Das Submenü "Hilfe",

    2. das mit den Pfaden

    und

    3. immer noch das "Zoom-Icon"

    Gruß

    Mira

    NACHTRAG!

    Hatte einen Geistesblitz!!

    Problem im Submenü "Hilfe" ist jetzt auch gelöst,

    für die Icons, die angezeigt werden. ;)

    Der Code:

    CSS
    #PanelUI-helpItems> toolbarbutton > image{
      fill: currentColor;
      -moz-context-properties: fill;
      margin-inline: 0 8px !important;
    }
  • Symbole in Menüs

    • Mira_Belle
    • 3. Juli 2022 um 02:04

    So habe noch etwas rumgespielt.

    Wenn ich in Andreas Code für das Zoom-Icon

    so abändere

    CSS
    #appMenu-zoom-controls2::before {
      margin-top: 3px !important;
      margin-right: 10px !important; 
      margin-left: -1px !important;
      content: '' !important;
      display: block !important;
      width: 16px !important;
      height: 16px !important;
      mask-image: url ("../chrome/icons/screenshot.svg") !important;
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: #e1e1e1 !important;
    }
    Alles anzeigen

    bekomme ich nur ein graues Kästchen zusehen! Irgendwie scheint was mit dem Pfad nicht zustimmen.

    Habe under dem Pofil einen Chrome-Ordner in dem ich einen weiteren Icons-Ordner habe.

    C:\Users\Benutzer\AppData\Roaming\Mozilla\Firefox\Profiles\default-release\chrome\Icons


    Wie binde ich diese SVG-Dateien richtig ein?

    Denn das Problem habe ich auch bei den Submenüs.

    1. Weitere Werkzeuge

    CSS
    /*-----------------------*/
    /* Weitere Werkzeuge */
    /*-----------------------*/
    
    /* Symbolleiste anpassen ... */
    
    #appmenu-moreTools-button {
      list-style-image: url("chrome://browser/skin/customize.svg");
    }
    
    /* Werkzeuge für Web-... */
    
    #appmenu-developer-tools-view .subviewbutton:nth-child(1) {
      list-style-image: url("../icons/developer.svg");
    }
    
    /* Task-Manager */
    
    #appmenu-developer-tools-view .subviewbutton:nth-child(2) {
      list-style-image: url("../icons/performance.svg");
    }
    
    /* Externes Debugging */
    
    #appmenu-developer-tools-view .subviewbutton:nth-child(3) {
      list-style-image: url("../icons/bug.svg");
    }
    
    /* Browser-Werkzeuge */
    
    #appmenu-developer-tools-view .subviewbutton:nth-child(4) {
      list-style-image: url("../icons/window-dev-tools.svg");
    }
    
    /* Browser-Inhaltswerkzeuge */
    
    #appmenu-developer-tools-view .subviewbutton:nth-child(5) {
      list-style-image: url("../icons/command-frames.svg");
    }
    
    /* Browser-Konsole */
    
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(5) {
      list-style-image: url("chrome://devtools/skin/images/command-console.svg");
    }
    
    /* Bildschirmgrößen testen */
    
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(4) {
      list-style-image: url("../icons/command-responsivemode.svg");
    }
    
    /* Farbpipette */
    
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(3) {
      list-style-image: url("chrome://devtools/skin/images/command-eyedropper.svg");
    }
    
    /* Seitenquelltext anzeigen */
    
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(2) {
      list-style-image: url("../icons/document-search.svg");
    }
    
    /* Erweiterungen für Entwickler */
    
    #appmenu-developer-tools-view .subviewbutton:nth-last-child(1) {
      list-style-image: url("chrome://devtools/skin/images/debugging-addons.svg");
    }
    Alles anzeigen

    und 2. Firefox-Hilfe

    CSS
    /*---------------*/
    /* Firefox-Hilfe */
    /*---------------*/
    
    /* Hilfe erhalten */
    
    #appMenu_menu_openHelp {
      list-style-image: url("chrome://global/skin/icons/help.svg");
    }
    
    /* Ideen und Feedback teilen ... */
    
    #appMenu_feedbackPage {
      list-style-image: url("../icons/send.svg");
    }
    
    /* Fehlerbehebungsmodus ... */
    
    #appMenu_helpSafeMode {
      list-style-image: url("chrome://devtools/skin/images/debugging-workers.svg");
    }
    
    /* Weitere Informationen zur ... */
    
    #appMenu_troubleShooting {
      list-style-image: url("chrome://global/skin/icons/more.svg");
    }
    
    /* Betrügerische Website melden ... */
    
    #appMenu_menu_HelpPopup_reportPhishingtoolmenu {
      list-style-image: url("chrome://global/skin/icons/warning.svg");
    }
    
    /* Über Firefox */
    
    #appMenu_aboutName {
      list-style-image: url("chrome://global/skin/icons/info.svg");
    }
    Alles anzeigen

    Bei den Subs keben auch die Icons und der Text wider aneinander

    und

    sie sind dunkel.

    :/

    Gruß

    Mira

  • Symbole in Menüs

    • Mira_Belle
    • 2. Juli 2022 um 18:29

    Ich bin jetzt so weit!

    CSS
    @-moz-document url(chrome://browser/content/browser.xhtml)
    {
        .foo {    /* nur wegen der Klammern */
        }
    
    #appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
    #appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
        fill: currentColor;
        -moz-context-properties: fill;
        margin-inline: 0 8px !important;
    }
        
    /*Sync*/
    #appMenu-fxa-status2::before {
      margin-top: 3px !important;
      margin-right: 10px !important; 
      margin-left: -1px !important;
      content: '' !important;
      display: block !important;
      width: 16px !important;
      height: 16px !important;
      mask-image: url("chrome://browser/skin/fxa/avatar-empty.svg") !important;
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: #e1e1e1 !important;
    }
    
        
    /* Neuer Tab */
    
        #appMenu-new-tab-button2 {
            list-style-image: url("chrome://browser/skin/new-tab.svg");
        }
    
    /* Neues Fenster */
    
        #appMenu-new-window-button2 {
            list-style-image: url("chrome://browser/skin/window.svg");
        }
    
    /* Neues privates Fenster */
    
        #appMenu-new-private-window-button2 {
            list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
        }
    
    /* Lesezeichen */
    
        #appMenu-bookmarks-button {
            list-style-image: url("chrome://browser/skin/bookmark.svg");
        }
    
    /* Chronik */
    
        #appMenu-history-button {
            list-style-image: url("chrome://browser/skin/history.svg");
        }
    
    /* Download */
    
        #appMenu-downloads-button {
            list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
        }
    
    /* Passwörter */
    
        #appMenu-passwords-button {
            list-style-image: url("chrome://browser/skin/login.svg");
        }
    
    /* Add-ons und Themes */
    
        #appMenu-extensions-themes-button {
            list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
        }
    
    /* Drucken */
    
        #appMenu-print-button2 {
            list-style-image: url("chrome://global/skin/icons/print.svg");
        }
    
    /* Seite speichern unter */
    
        #appMenu-save-file-button2 {
            list-style-image: url("chrome://browser/skin/save.svg");
        }
    
    /* In Seite suchen */
    
        #appMenu-find-button2 {
            list-style-image: url("chrome://global/skin/icons/search-glass.svg");
        }
    
    /* Zoom */
    
    
    
    /*Einstellungen */
    
        #appMenu-settings-button {
            list-style-image: url("chrome://global/skin/icons/settings.svg");
        }
    
    /*Weitere Werkzeuge */
    
        #appMenu-more-button2 { 
            list-style-image: url("chrome://global/skin/icons/developer.svg") 
        }
    
    /* Hilfe */
    
        #appMenu-help-button2 {
            list-style-image: url("chrome://global/skin/icons/help.svg");
        }
    
    /* Beenden */
    
        #appMenu-quit-button2 {
            list-style-image: url("../chrome/icons/quit.svg");
        }
    
    
    
    #appmenu-moreTools-button {
      list-style-image: url("chrome://browser/skin/customize.svg");
    }
    
    }
    Alles anzeigen

    Und die Icons für das Untermenü "Weitere Werkzeuge" habe ich auch gefunden.

    CSS
    /* Zoom */
    #appMenu-zoom-controls2::before {
    margin-right: 6px !important; 
    margin-left: -5px !important;
    content: '' !important;
    display: block !important;
    width: 19px !important;
    height: 15px !important;
    background-image: url("chrome://browser/skin/fullscreen.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 0px 0px !important;
    background-size: 15px 15px !important;
    }
    Alles anzeigen

    Blendet zwar ein Icon ein, aber halt nicht das aus "LEPTON".

    Für Heute mach ich Schluß.

    Danke für Eure Hilfe.

    Gruß

    Mira

  • Symbole in Menüs

    • Mira_Belle
    • 2. Juli 2022 um 17:02

    Ein leichter Schubser, danke!

    @Gabbo

    So schaut nun "mein" Code aus:

    CSS
    #appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
    #appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
        fill: currentColor;
        -moz-context-properties: fill;
        margin-inline: 0 8px !important;
    }    
    
    /* Neuer Tab */
    
        #appMenu-new-tab-button2 {
            list-style-image: url("chrome://browser/skin/new-tab.svg");
        }
    
    /* Neues Fenster */
    
        #appMenu-new-window-button2 {
            list-style-image: url("chrome://browser/skin/window.svg");
        }
    
    /* Neues privates Fenster */
    
        #appMenu-new-private-window-button2 {
            list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
        }
    
    /* Lesezeichen */
    
        #appMenu-bookmarks-button {
            list-style-image: url("chrome://browser/skin/bookmark.svg");
        }
    
    /* Chronik */
    
        #appMenu-history-button {
            list-style-image: url("chrome://browser/skin/history.svg");
        }
    
    /* Download */
    
        #appMenu-downloads-button {
            list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
        }
    
    /* Passwörter */
    
        #appMenu-passwords-button {
            list-style-image: url("chrome://browser/skin/login.svg");
        }
    
    /* Add-ons und Themes */
    
        #appMenu-extensions-themes-button {
            list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
        }
    
    /* Drucken */
    
        #appMenu-print-button2 {
            list-style-image: url("chrome://global/skin/icons/print.svg");
        }
    
    /* Seite speichern unter */
    
        #appMenu-save-file-button2 {
            list-style-image: url("chrome://browser/skin/save.svg");
        }
    
    /* In Seite suchen */
    
        #appMenu-find-button2 {
            list-style-image: url("chrome://global/skin/icons/search-glass.svg");
        }
    
    /* Zoom */
    
    
    
    /*Einstellungen */
    
        #appMenu-settings-button {
            list-style-image: url("chrome://global/skin/icons/settings.svg");
        }
    
    /*Weitere Werkzeuge */
    
        #appMenu-more-button2 { 
            list-style-image: url("chrome://global/skin/icons/developer.svg") 
        }
    
    /* Hilfe */
    
        #appMenu-help-button2 {
            list-style-image: url("chrome://global/skin/icons/help.svg");
        }
    
    /* Beenden */
    
        #appMenu-quit-button2 {
            list-style-image: url("../chrome/icons/quit.svg");
        }
    Alles anzeigen

    So weit war ich fast schon mal!

    Nur fehlten mir die ersten sechs Zeilen.

    OK, danke dafür.

    Nun sind fast alle meine Probleme gelöst, fast, da ja immer noch das Ding mit dem Zoom offen ist

    und

    mir immer noch das Icon für Daten synchronisieren und speichern fehlt.

    Gruß

    Mira

    PS: Das Menü schaut jetzt so aus.

  • Symbole in Menüs

    • Mira_Belle
    • 2. Juli 2022 um 15:53
    Zitat von 2002Andreas
    Zitat von Mira_Belle

    Nur mit weniger Zeilenhöhe.

    Siehe Beitrag Nr. 13 +16.

    Das ist doch nur eine geänderte Einstellung im Fx.

    Das hatte ich aber, ich glaube mit Deiner Hilfe,

    so fest eingestellt.

    CSS
        :root {
            --arrowpanel-menuitem-padding: 0px 8px !important;                    /* Zeilenabstand */
        }
  • Symbole in Menüs

    • Mira_Belle
    • 2. Juli 2022 um 15:46

    War gerade etwas Künstlerisch!

    Habe einen Entwurf gemacht.

    Wie bis Download, so hätte ich gerne das Menü.

    Probleme, welche ich bisher habe:

    * Mir fehlen zwei Icons Datei synchronisieren und speichern, Weitere Werkzeuge und Zoom

    * Icon bekomme ich nicht alle HELL

    * Zeilenhöhe !

    Gruß

    Mira

  • Symbole in Menüs

    • Mira_Belle
    • 2. Juli 2022 um 15:25
    CSS
    #appMenu-new-tab-button2 image {
      width: 16px;
      height: 16px;
      mask-image: url('chrome://browser/skin/new-tab.svg');
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: #e1e1e1 !important;
    }
    #appMenu-new-tab-button2 label {
      padding: 10px !important;
    }
    
    #appMenu-new-window-button2 image {
      width: 16px;
      height: 16px;
      mask-image: url("chrome://browser/skin/window.svg");
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: #e1e1e1 !important;
    }
    #appMenu-new-window-button2 label {
      padding: 10px !important;
    }
    #appMenu-new-private-window-button2 image {
      width: 16px;
      height: 16px;
      mask-image: url("chrome://browser/skin/privateBrowsing.svg");
      mask-repeat: no-repeat;
      mask-position: center;
      background-color: #e1e1e1 !important;
    }
    #appMenu-new-private-window-button2 label {
      padding: 10px !important;
    }
    Alles anzeigen

    Führt leider nicht zum erwünschten Erfolg.

    Rot markiert stimmt es!

    Icon ist "hell" der Abstand zum Text ist auch i.O.

    ABER die Zeilenhöhe wurde verändert!

    Siehe Zeilenabstäne ab "Lesezeichen".

    Die Icons, gelb unterstichen, wollen aber nicht hell werden.

    Zitat von 2002Andreas

    Meinst du das alles so?

    Ja, genau so!

    Nur mit weniger Zeilenhöhe.

    Also, eigentlich genau so =>

    Gruß

    Mira


    PS: Das Icon für Daten synchronisieren und speichern habe ich auch noch nicht gefunden).

  • Symbole in Menüs

    • Mira_Belle
    • 2. Juli 2022 um 10:12

    So, habe einige "Sybole" (Icons) gefunden und genau so in die Stilbearbeitung mal eingetragen.

    Siehe da, die Anordnung stimmt schon mal.

    CSS
    /* Neuer Tab */
    #appMenu-new-tab-button2 {
    list-style-image: url("chrome://browser/skin/new-tab.svg");
    }
    /* Neues Fenster */
    #appMenu-new-window-button2 {
    list-style-image: url("chrome://browser/skin/window.svg");
    }
    /* Neues privates Fenster */
    #appMenu-new-private-window-button2 {
    list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
    }
    /* Lesezeichen */
    #appMenu-bookmarks-button {
    list-style-image: url("chrome://browser/skin/bookmark.svg");
    }
    /* CHronik */
    #appMenu-history-button {
    list-style-image: url("chrome://browser/skin/history.svg");
    }
    /* Download */
    #appMenu-downloads-button {
    list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
    }
    /* Passwörter */
    #appMenu-passwords-button {
    list-style-image: url("chrome://browser/skin/login.svg");
    }
    /* Add-ons und Themes */
    #appMenu-extensions-themes-button {
    list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
    }
    /* Drucken */
    #appMenu-print-button2 {
    list-style-image: url("chrome://global/skin/icons/print.svg");
    }
    /* Seite speichern unter */
    #appMenu-save-file-button2 {
    list-style-image: url("chrome://browser/skin/save.svg");
    }
    /* In Seite suchen */
    #appMenu-find-button2 {
    list-style-image: url("chrome://global/skin/icons/search-glass.svg");
    }
    /* Zoom */
    
    
    
    /*Einstellungen */
    #appMenu-settings-button {
    list-style-image: url("chrome://global/skin/icons/settings.svg");
    }
    /*Weitere Werkzeuge */
    
    
    /* Hilfe */
    #appMenu-help-button2 {
    list-style-image: url("chrome://global/skin/icons/help.svg");
    }
    /* Beenden */
    Alles anzeigen

    Jedoch, so'n Käse, sind alle Symbole dunkel (schwarz)

    und mit fill: white  !important; oder color: white  !important; tut sich auch nichts.

    Schade.

    Auch klebt die Beschriftung direkt an den "Sybolen" (Icons),

    auch nicht wirklich schön!

    Tja, und was ich bisher so gar nicht herausgefunden habe,

    die "Sybole" (Icons) für:

    Zoom, Weitere Werkzeuge und Beenden.

    Gruß

    Mira

    PS:

    Normalerweise sollten diese Eintrage die fehlenden "Sybole" (Icons) sein.

    CSS
    #appMenu-zoom-controls2::before {
    content: url("../icons/screenshot.svg");
    }
    
    #appMenu-more-button2 {
    list-style-image: url("chrome://browser/skin/ion.svg");
    }
    
    #appMenu-quit-button2 {
    list-style-image: url("../icons/quit.svg");
    }
    Alles anzeigen

    Jedoch werden die so nicht angesprochen und erscheinen dan ja nicht.

    Wie bekomme ich das noch hin?

    HA!

    "screenshot.svg" & "quit.svg" sind im Unterverzeichnis!

  • Rahmen um Hamburger Menü und Lesezeichen

    • Mira_Belle
    • 2. Juli 2022 um 09:28

    Wenn Du magst, kannst Du ja nochmal folgendes ausprobieren!

    CSS
    #appMenu-popup panelview {
      border: 3px solid red !important;
    }
    
    #appMenu-popup {
        --panel-border-color: none !important;
    }

    Hätte den Vorteil, dass Du die Strichbreite des Rahmens bestimmen kannst.

    Warum Andreas Code bei Dir's nicht tut, weiß ich leider auch nicht.

    Gruß

    Mira

  • Rahmen um Hamburger Menü und Lesezeichen

    • Mira_Belle
    • 1. Juli 2022 um 23:45
    Zitat von Vlex

    Hi Mira,

    ...

    Immer noch weißer Rahmen drum

    Nutzt Du noch weiteren Code zur Anpassung?

    Vermutlich schon, oder?

    Stell Deinen Code doch bitte mal komplett hier rein

    und teile uns mit, welches Theme Du nutzt.

    Gute Nacht

    wünscht

    Mira

Unterstütze uns!

Jährlich (2025)

105,8 %

105,8% (687,41 von 650 EUR)

Jetzt spenden
  1. Kontakt
  2. Datenschutz
  3. Impressum
Community-Software: WoltLab Suite™
Mastodon