new tab button - wie anderes Bild

  • Hallo

    Ich würde gerne den Butten „neuer Tab“ durch ein anderes Bild austauschen.

    Dafür habe Ich die Bilddatei „Toolbar-small“ aus dem original Themes auf Laufwerk C kopiert.

    Wie müsste jetzt der Stylish Code aussehen, damit das jetzige Bild durch ein Bild dieser Bilddatei ersetzt wird?

    Das eigentliche Bild wird ja in den Themes in der Datei „browser“ durch Zuordnung eines Bereiches der Bilddatei „Toolbar-small“ generiert.

    Hier mal als Beispiel das Originalthemes:
    (Die Zuweisung welches Bild genommen wird erfolgt an anderer Stelle)

    /* toolbar new tab button */

    toolbar:not([iconsize="small"]) #new-tab-button > .toolbarbutton-icon {
    padding-left: 1px;
    }
    #new-tab-button {
    -moz-image-region: rect(0px 240px 24px 216px);
    }
    #new-tab-button:not([disabled="true"]):hover {
    -moz-image-region: rect(24px 240px 48px 216px);
    }
    #new-tab-button[disabled="true"] {
    -moz-image-region: rect(48px 240px 72px 216px);
    }
    #new-tab-button:not([disabled="true"]):hover:active {
    -moz-image-region: rect(96px 240px 120px 216px);
    }


    Grüße

  • Hallo

    Meine Frage bezog sich nicht auf das Aussehen eines Tabs.

    Wenn man im Menü wählt „Ansicht“ – „Symbolleisten“ - „Anpassen“, dann kann man doch diesen Butten „neuer Tab“ greifen und in eine Symbolleiste einfügen.

    Beim späteren draufklicken wird dann ein neuer Tab generiert.

    Ich möchte das Aussehen dieses Butten ändern.

    In den Themes ist das immer so geregelt, das es eine Bilddatei gibt, hier „Toolbar-small“

    wo diverse Bilder drauf sind ( Vor und Zurückbutte etc. ) .

    Der Formelcode aus dem Anfangspost sagt dann genau welche Koordinaten für eine bestimmte Aktion gelten sollen.

    Also man könnte auch den Zurückbutten als neuer Tab Butten formulieren.

    Ich hab schon versucht dieses direkt in einem Themes zu ändern.

    Also die Bilddatei „Toolbar-small“ zusätzlich implementiert, so das alle anderen Butten auf die Themes Bilddatei zugreifen, und der neue Tab Butten aus dem anderen Bild generiert wird.

    Das hat auch prinzipiell geklappt, ........ aber mit Problemen, die Ich noch nicht gesucht habe, weil es müsste doch auch einfacher gehen.

    Kann man nicht einfach per STYLISH sagen nehme die Datei X auf Laufwerk C und nehme den Bildausschnitt mit folgenden Koordinaten.

    Das obere Beispiel waren die Koordinaten dieses Butten im Original FF Themes, wo dann dieser weiße Umschlag mit grünem Kreutz als „neuer Tab Butten“ bestimmt wurde.

    Oder wenn das nicht geht, könnte jemand den Ausschnitt dieses Bildes in so eine Buchstaben/Zahlenkolonne umwandeln, und so einen neuen Butten generieren.

    Also wie ein Hintergrundbild in Menüs.

    Grüße, MarketMaker

  • Zitat von MarketMaker

    Dafür habe Ich die Bilddatei „Toolbar-small“ aus dem original Themes auf Laufwerk C kopiert.

    Dann kannst du doch die Datei nach der Änderung dem Theme wieder unter jubeln.

  • Hallo Ulli und der Rest der Schraubergemeinde

    „Dann kannst du doch die Datei nach der Änderung dem Theme wieder unter jubeln.“

    Genau das funktionierte aber nicht, keine Ahnung warum.
    Hab jetzt eine andere Lösung gefunden, möchte aber mal das Problem darstellen.

    Habe in einem fremden Themes zwei Bilddateien, welche die von FF benutzten Symbole enthalten.

    Einmal: Toolbar-small.png die eigendliche Themes Datei
    Zweitens : Toolbar-smallA.png die Bilddatei aus dem original FF Themes.


    Jetzt hatte Ich einfach gedacht, um das New Tab Symbol zu ändern einfach auf eine andere Bilddatei verweisen, und um dann das richtige Symbol zu erwischen die gleichen Koordinaten verwenden wie im Originalthemes.

    Das hatte Ich dann wie in nachfolgender Formel (verkürzt dargestellt) gelöst.

    Der Witz war jetzt, das alle Symbole die auf Toolbar-small.png verwiesen nicht so dargestellt wurden, und stattdessen alle Symbole aus der Datei Toolbar-smallA.png generiert wurden.

    Diese wurden dann aber auch nicht richtig dargestellt, alle irgendwie so halb abgeschnitten.

    Hab dann mal versucht die Bilddatei direkt in die Formulierung des Symbols einzufügen.

    #new-tab-button {
    list-style-image: url("chrome://browser/skin/ Toolbar-smallA.png ");
    -moz-image-region: rect(0px 240px 24px 216px);
    }

    Hatte den Effekt, dass alle andern Symbole wieder wie gewünscht funktionierten.

    Nur der New Tab Butten wurde wieder falsch dargestellt, aber immerhin.

    Hab dann einige Versuche gestartet um mit einer Änderung der Koordinaten rect(0px 240px 24px 216px); das Bild durch Annähehrungsversuche zu finden. Macht aber keinen Spaß, wenn man für jeden Versuch erst das Themes packen und installieren muss.

    Bei einem Versuch wurde dann plötzlich die komplette Bilddatei als New Tabs Symbol angezeigt.

    So werde Ich es erst mal lassen, so kann Ich entweder ein eigenes Bild anfertigen, oder ein anderes „Einzellbild“ in 16 * 16 für den Butten benutzen. Die Zuweisung rect.......... dürfte dann überflüssig sein.
    Eines würde mich noch interessieren.

    Wenn Themes oder Erweiterungen nur in „Einer“ xpi oder jar Datei gepackt sind, kann man diese leicht durch Entpacken – umändern – neu Packen wieder benutzen.


    Befinden sich aber nach dem ersten Entpacken weitere dieser Dateien in Ordnern, die dann auch erst wieder entpackt werden müssen, bekomme Ich sie nicht wieder so gepackt, das FF sie beim installieren akzeptiert, auch wenn Ich die Dateien eigentlich in richtiger Reihenfolge Packe.

    Wie müsste Ich den solche Pakete Packen, wo mehrere verschachtelte xpi oder jar Dateien enthalten sind?

    Grüße, MarketMaker


    /* ::::: 24px primary toolbar buttons ::::: */

    toolbar[iconsize="small"] .toolbarbutton-1 {
    -moz-box-orient: vertical;
    min-width: 0px;
    list-style-image: url("chrome://browser/skin/Toolbar-small.png");
    }

    toolbar[iconsize="small"] .toolbarbutton-menubutton-stack,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-button,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-stack:hover,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-button:hover,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-stack:hover:active,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-button:hover:active {
    margin: 0px !important;
    padding: 0px !important;
    display: -moz-box;
    }

    /* back button-- */………………………………}
    /* forward button */……….}
    /* stop button */………..}
    /* reload button */………………}
    /* home button */………………….}
    /* history sidebar button */……………………….}
    /* bookmark sidebar button */……………..}
    /* print button */………………}
    /* download manager button */…………..}
    /* new window button */……….}
    /* cut button */………………….}
    /* copy button */……}
    /* paste button */……………..}
    /* mail button */…………………}
    /* sage button */……………..}


    /* ::::: 24px primary toolbar buttons ::::: */

    toolbar[iconsize="small"] .toolbarbutton-1 {
    -moz-box-orient: vertical;
    min-width: 0px;
    list-style-image: url("chrome://browser/skin/Toolbar-smallA.png");
    }

    toolbar[iconsize="small"] .toolbarbutton-menubutton-stack,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-button,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-stack:hover,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-button:hover,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-stack:hover:active,
    toolbar[iconsize="small"] .toolbarbutton-menubutton-button:hover:active {
    margin: 0px !important;
    padding: 0px !important;
    display: -moz-box;
    }

    /* toolbar new tab button */

    toolbar:not([iconsize="small"]) #new-tab-button > .toolbarbutton-icon {
    padding-left: 1px;
    }
    #new-tab-button {
    -moz-image-region: rect(0px 240px 24px 216px);
    }
    #new-tab-button:not([disabled="true"]):hover {
    -moz-image-region: rect(24px 240px 48px 216px);
    }
    #new-tab-button[disabled="true"] {
    -moz-image-region: rect(48px 240px 72px 216px);
    }
    #new-tab-button:not([disabled="true"]):hover:active {
    -moz-image-region: rect(96px 240px 120px 216px);
    }

  • Zitat von MarketMaker


    Wenn man im Menü wählt „Ansicht“ – „Symbolleisten“ - „Anpassen“, dann kann man doch diesen Butten „neuer Tab“ greifen und in eine Symbolleiste einfügen.
    Beim späteren draufklicken wird dann ein neuer Tab generiert.
    Ich möchte das Aussehen dieses Butten ändern.

    Ich habe einfach mal ein beliebiges Icon benutzt und dafür eingesetzt, meinst Du sowas in der Art ?

    CSS
    #new-tab-button {
    -moz-appearance: none!important;
    background-image: url("data:image/x-icon;base64,AAABAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAwMDAAICAgAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8A///////wAAAAD///////////////8L+/vwD///////////////D7+/sLD//////////////wv7+/C7D/////////////8Pv7+wuwj/////////////AAAAALsIj/////////////C7u7sLCI////////////8AAAAAsAiP////////////D7+/sAsIj////////////wv7+/Cw/4////////////8Pv7+wuwj/////////////C/v7+wsIj////////////w+/v78LCI/////////////w+/v78AiP////////////8L+/v78IiP////////////8L+/v78IiP//////AAAAD/8L+/v7AIiP/////w+/vw//8L+/v7AIiP////8L+/sP//8L+/vwsIj/////D7+/D///D7+/sLCI/////wv7+w///wv7+/C7CI////8Pv7+w//C/v7+wuwiP////C/v7+wAL+/v78LsIj/////C/v7+/v7+/vwu7CI/////w+/v7+/v7+/sLuwiP/////w+/v7+/v7+wu7sIj//////w+/v7+/v7C7uwiP///////wC/v7+/ALu7sIj////////wAAAAALu7uwiP/////////wu7u7u7u7CI///////////wC7u7u7AIj/////////////AAAAAIj/////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") !important;
    background-repeat:no-repeat !important;
    -moz-image-region: rect(-10px 0px 0px 0px) !important;
    padding-left:25px!important}
  • Besten Dank, das funktioniert wenn Ich noch Marginwerte einfüge.
    Erspart mir den Umweg übers Themes.


    Hast Du hierzu noch eine Idee

    „Eines würde mich noch interessieren.

    Wenn Themes oder Erweiterungen nur in „Einer“ xpi oder jar Datei gepackt sind, kann man diese leicht durch Entpacken – umändern – neu Packen wieder benutzen.


    Befinden sich aber nach dem ersten Entpacken weitere dieser Dateien in Ordnern, die dann auch erst wieder entpackt werden müssen, bekomme Ich sie nicht wieder so gepackt, das FF sie beim installieren akzeptiert, auch wenn Ich die Dateien eigentlich in richtiger Reihenfolge Packe.

    Wie müsste Ich den solche Pakete Packen, wo mehrere verschachtelte xpi oder jar Dateien enthalten sind?“

    Grüße, MarketMaker

  • Zitat von MarketMaker

    Besten Dank, das funktioniert wenn Ich noch Marginwerte einfüge.
    Erspart mir den Umweg übers Themes.

    freut mich dann...


    Zitat von MarketMaker


    Wie müsste Ich den solche Pakete Packen, wo mehrere verschachtelte xpi oder jar Dateien enthalten sind?“


    sorry, da muß ich passen weil ich sowas auch noch nie gemacht haben.