Milkmel anpassen!

    Hallo!

    Ich mach zur Übersicht einen neuen Thread auf!
    Ich bastel derzeit ein bisserl an meinem Milkmel rum, hab aber 2 Probs:

    1. Ich will für Edit Config Files und mein geliebtes Scrapbook caramelige Buttons! Hierzu hab ich die jeweiligen PNGs der Erweiterungen ausgetauscht, was aber nicht wirklich elegant ist! :? Da gibts doch bestimmt eine Möglichkeit über die UserChrome, oder?

    2. Bei der TabSidebar sind nicht alle Navigationsbuttons vorhanden:
    [Blockierte Grafik: http://img155.imageshack.us/img155/1203/tabsidebar5tl.png]
    Wie kann ich die anpassen?

    Ich hoffe, ihr könnt mir helfen! :wink:

    Grüße
    Dok.

    Hi Dr. Ä,

    Tja... Die Ikonen müssen erst mal gebastelt werden. Momentan habe ich überhaupt keine Zeit mich darum zu kümmern aber ich werde weiter hin ein Paar andere Erweiterungen unterstützen. Zuerst muss ich mal meine private Sache im Griff bekommen und noch das Flock Theme fertig machen (Malte: Ich habe Dich nicht vergessen!!)...

    Ich z.B. benutze immer noch ChromEdit nur wegen der Ikone:

    [Blockierte Grafik: http://img235.imageshack.us/img235/4417/ce9ot.png]

    :)

    Die wurde sogar im Charamel integriert... :wink:

    Tab Sidebar hatte ich bei der Version 1.0b2 gearbeitet aber hat sich sehr stark verändert.

    Ich muss auch sagen dass Erweiterung Unterstützung ist was sehr, sehr mühsam da viele Authoren überhaupt keine Rücksicht auf Themen haben (keine vernünftige Nutzung von classes, übertriebene und unnötige Nutzung von !important tags, u.s.w.).

    Aber wie gesagt, im Plan sind viele weitere Erweiterungen Unterstützung...

    Gruß

    Bird

    Hi bird!

    Das Chrome Edit Icon benutze ich derzeit! Mein Problem ist, dass ich nicht genau weiß, wie ich es einbauen soll! :oops: Im Moment hab ich wie gesagt die PNG der Erweiterung ausgetauscht!
    Zur TabSidebar: Wäre schön, wenn die aktuelle Version wieder funktionieren würde! :D

    Also was Code zum Button einbaue betrifft, kann ich ja etwas aushelfen...:)

    /* edit config files */
    #editconfigfiles-toolbar-button {
    list-style-image: url("ECFButton.png") !important;
    -moz-image-region: rect(0px 588px 25px 560px) !important;
    }
    #editconfigfiles-toolbar-button:active {
    -moz-image-region: rect(25px 588px 50px 560px) !important;
    }
    #editconfigfiles-toolbar-button[disabled="true"] {
    -moz-image-region: rect(0px 588px 25px 560px) !important;
    }

    toolbar[iconsize="small"] #editconfigfiles-toolbar-button {
    list-style-image: url("ECFButton-small.png") !important;
    -moz-image-region: rect(0px 588px 25px 560px) !important;
    }
    toolbar[iconsize="small"] #editconfigfiles-toolbar-button:active {
    -moz-image-region: rect(25px 588px 50px 560px) !important;
    }
    toolbar[iconsize="small"] #editconfigfiles-toolbar-button[disabled="true"] {
    -moz-image-region: rect(0px 588px 25px 560px) !important;
    }


    wobei die beiden Graphiken im Chrome Ordner des Profilordners liegen muss.


    /*SCRAPBOOK-BUTTON*/
    #scrapbook-button {
    list-style-image: url("SBBtton.png") !important;
    -moz-image-region: rect(0px 392px 25px 364px) !important;
    }
    #scrapbook-button:active {
    -moz-image-region: rect(25px 392px 50px 364px) !important;
    }
    #scrapbook-button [disabled="true"] {
    -moz-image-region: rect(50px 392px 75px 364px) !important;
    }


    toolbar[iconsize="small"] #scrapbook-button {
    list-style-image: url("SBButton-small.png") !important;
    -moz-image-region: rect(0px 392px 25px 364px) !important;
    }
    toolbar[iconsize="small"] #scrapbook-button:active {
    -moz-image-region: rect(25px 392px 50px 364px) !important;
    }
    toolbar[iconsize="small"] #scrapbook-button [disabled="true"] {
    -moz-image-region: rect(50px 392px 75px 364px) !important;
    }


    Tab Sidebar:
    Jo, das ist so ne Sache, die Versionsvielfalt war echt ermüdend...:wink:
    Aber die aktuelle Version ist ja als "Stable" bezeichnet.

    Was den Einbau in das Theme betrifft:
    Mein üblicher Einbau über ein Stylesheet, das über browser/browser.css eingebunden wird, funktioniert nicht für TabSideBar, aber über ein Stylesheet, dass über global/global.css eingebunden wird, geht es... ...nur so als Info.
    Aber für userChrome.css ist das egal.

    Um mal die Möglichkeiten zu umreißen, hier mal das SaFire Stylesheet für die TabSidebar:

    Um das Fomat zu schonen, etwas geschrumpft...


    /* unfortunatly tab-sidebar support only possible in global.css (imported there) or userChrome.css...
    I hope there won't be too much changes in TabSidebar in the future...
    */

    #tab-sidebar .tbs-icon {opacity: 0.3 !important;}
    #tab-sidebar .tbs-bottomstrip:hover {opacity: 1.0 !important;}
    #tab-sidebar .tbs-tabpreview:hover .tbs-icon/* ,
    #tab-sidebar .tbs-tabpreview[selected="true"] .tbs-canvas */ {
    opacity: 1 !important;
    }

    #tab-sidebar tabpreview image[anonid="loading"] {
    list-style-image: url("chrome://global/skin/icons/loading-front.gif") !important;
    }


    #tab-sidebar tabpreview toolbarbutton[anonid="close"] {
    list-style-image: url("chrome://global/skin/icons/tabclose-front.png") !important;
    -moz-appearance: none !important;
    -moz-image-region: rect(3px 14px 16px 2px) !important;
    border: none !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    min-height: 13px !important;
    min-width: 12px !important;
    }

    #tab-sidebar tabpreview toolbarbutton[anonid="close"]:hover {
    list-style-image: url("chrome://global/skin/icons/tabclose-front-hover.png") !important;
    -moz-image-region: rect(3px 14px 16px 2px) !important;
    }

    #tab-sidebar tabpreview toolbarbutton[anonid="close"]:hover:active {
    list-style-image: url("chrome://global/skin/icons/tabclose-front-pressed.png") !important;
    -moz-image-region: rect(3px 14px 16px 2px) !important;
    }

    #tab-sidebar tabpreview image[anonid="security"] {
    list-style-image: url("chrome://browser/skin/lock-secure.png") !important;
    }

    #tab-sidebar .tbs-tabpreview[security="high"] .tbs-security,
    #tab-sidebar .tbs-tabpreview[security="high"] .tbs-security:hover,
    #tab-sidebar .tbs-tabpreview[security="high"] .tbs-security:hover:active,
    #tab-sidebar .tbs-tabpreview[security="low"] .tbs-security,
    #tab-sidebar .tbs-tabpreview[security="low"] .tbs-security:hover,
    #tab-sidebar .tbs-tabpreview[security="low"] .tbs-security:hover:active,
    #tab-sidebar tabpreview[security="high"] image[anonid="security"],
    #tab-sidebar tabpreview[security="low"] image[anonid="security"] {
    list-style-image: url("chrome://browser/skin/lock-secure.png") !important;
    -moz-image-region: rect(0px 16px 13px 0px) !important;
    }
    #tab-sidebar .tbs-tabpreview[security="broken"] .tbs-security,
    #tab-sidebar .tbs-tabpreview[security="broken"] .tbs-security:hover,
    #tab-sidebar .tbs-tabpreview[security="broken"] .tbs-security:hover:active,
    #tab-sidebar tabpreview[security="broken"] image[anonid="security"] {
    list-style-image: url("chrome://browser/skin/lock-broken.png") !important;
    -moz-image-region: rect(0px 16px 13px 0px) !important;
    }

    /* Stop button */
    #tab-sidebar .tbs-stop {
    list-style-image: url("chrome://browser/skin/buttons-small.png") !important;
    -moz-image-region: rect(0px 420px 25px 392px) !important;
    }

    /* width only works this way, whyever... */
    /* #tab-sidebar .tbs-stop .toolbarbutton-icon {
    max-width: 17px !important;
    max-height: 16px !important;
    } */
    /* doesn't work for disabled states... ...so full button size */


    #tab-sidebar .tbs-stop:hover {
    -moz-image-region: rect(0px 420px 25px 392px) !important;
    }

    #tab-sidebar .tbs-stop:hover:active {
    -moz-image-region: rect(25px 420px 50px 392px) !important;
    }

    #tab-sidebar .tbs-stop[disabled="true"] {
    -moz-image-region: rect(50px 420px 75px 392px) !important;
    }

    /* Back button */
    #tab-sidebar .tbs-back,
    #tab-sidebar .tbs-back .toolbarbutton-menubutton-button {
    list-style-image: url("chrome://browser/skin/buttons-small.png") !important;
    -moz-image-region: rect(0px 447px 25px 420px);
    margin-right: 0px !important;
    margin-top: 4px !important;
    }
    /* width only works this way, whyever... */
    /* #tab-sidebar .tbs-back .toolbarbutton-icon {
    max-width: 17px !important;
    max-height: 16px !important;
    } */

    #tab-sidebar .tbs-back:hover,
    #tab-sidebar .tbs-back.toolbarbutton-menubutton-button :hover {
    -moz-image-region: rect(0px 447px 25px 420px) !important;
    }

    #tab-sidebar .tbs-back:hover:active:not([disabled="true"]) ,
    #tab-sidebar .tbs-back .toolbarbutton-menubutton-button:hover:active:not([disabled="true"]) {
    -moz-image-region: rect(25px 447px 50px 420px) !important;
    }

    #tab-sidebar .tbs-back[disabled="true"] ,
    #tab-sidebar .tbs-back .toolbarbutton-menubutton-button[disabled="true"] {
    -moz-image-region: rect(50px 447px 75px 420px) !important;
    }

    #tab-sidebar .tbs-back[chromedir="rtl"] ,
    #tab-sidebar .tbs-back.toolbarbutton-menubutton-button[chromedir="rtl"]{
    -moz-image-region: rect(0px 474px 25px 448px) !important;
    }

    #tab-sidebar .tbs-back[chromedir="rtl"]:hover,
    #tab-sidebar .tbs-back .toolbarbutton-menubutton-button[chromedir="rtl"]:hover {
    -moz-image-region: rect(0px 474px 25px 448px) !important;
    }

    #tab-sidebar .tbs-back[chromedir="rtl"]:hover:active:not([disabled="true"]),
    #tab-sidebar .tbs-back .toolbarbutton-menubutton-button[chromedir="rtl"]:hover:active:not([disabled="true"]) {
    -moz-image-region: rect(25px 474px 50px 448px) !important;
    }

    #tab-sidebar .tbs-back[chromedir="rtl"][disabled="true"] ,
    #tab-sidebar .tbs-back .toolbarbutton-menubutton-button[chromedir="rtl"][disabled="true"] {
    -moz-image-region: rect(50px 474px 75px 448px) !important;
    }

    /* Forward button */
    #tab-sidebar .tbs-forward,
    #tab-sidebar .tbs-forward .toolbarbutton-menubutton-button {
    list-style-image: url("chrome://browser/skin/buttons-small.png") !important;
    -moz-image-region: rect(0px 474px 25px 448px) !important;
    margin-left: 0px !important;
    margin-top: 4px !important;
    }
    /* width only works this way, whyever... */
    /* #tab-sidebar .tbs-forward .toolbarbutton-icon {
    max-width: 17px !important;
    max-height: 16px !important;
    } */

    #tab-sidebar .tbs-forward:hover,
    #tab-sidebar .tbs-forward .toolbarbutton-menubutton-button:hover {
    -moz-image-region: rect(0px 474px 25px 448px) !important;
    }

    #tab-sidebar .tbs-forward:hover:active:not([disabled="true"]),
    #tab-sidebar .tbs-forward .toolbarbutton-menubutton-button:hover:active:not([disabled="true"]) {
    -moz-image-region: rect(25px 474px 50px 448px) !important;
    }

    #tab-sidebar .tbs-forward[disabled="true"],
    #tab-sidebar .tbs-forward .toolbarbutton-menubutton-button[disabled="true"] {
    -moz-image-region: rect(50px 474px 75px 448px) !important;
    }

    #tab-sidebar .tbs-forward[chromedir="rtl"],
    #tab-sidebar .tbs-forward .toolbarbutton-menubutton-button[chromedir="rtl"] {
    -moz-image-region: rect(0px 447px 25px 420px) !important;
    }

    #tab-sidebar .tbs-forward[chromedir="rtl"]:hover,
    #tab-sidebar .tbs-forward .toolbarbutton-menubutton-button[chromedir="rtl"]:hover {
    -moz-image-region: rect(0px 447px 25px 420px) !important;
    }

    #tab-sidebar .tbs-forward[chromedir="rtl"]:hover:active:not([disabled="true"]),
    #tab-sidebar .tbs-forward .toolbarbutton-menubutton-button[chromedir="rtl"]:hover:active:not([disabled="true"]) {
    -moz-image-region: rect(25px 447px 50px 420px) !important;
    }

    #tab-sidebar .tbs-forward[chromedir="rtl"][disabled="true"],
    #tab-sidebar .tbs-forward .toolbarbutton-menubutton-button[chromedir="rtl"][disabled="true"] {
    -moz-image-region: rect(50px 447px 75px 420px) !important;
    }


    /*Dropmarker*/

    #tab-sidebar .tbs-back,
    #tab-sidebar .tbs-forward {
    -moz-box-orient: vertical !important;
    }

    #tab-sidebar .toolbarbutton-menubutton-dropmarker {
    margin-top: -4px !important;
    }

    #tab-sidebar .tbs-back .toolbarbutton-menubutton-dropmarker {
    margin-left: 7px !important;
    }

    #tab-sidebar .tbs-forward .toolbarbutton-menubutton-dropmarker {
    margin-left: 4px !important;
    }

    /* Reload button */
    #tab-sidebar .tbs-reload {
    list-style-image: url("chrome://browser/skin/buttons-small.png") !important;
    -moz-image-region: rect(0px 84px 25px 56px) !important;
    }
    /* width only works this way, whyever... */
    /* #tab-sidebar .tbs-reload .toolbarbutton-icon {
    max-width: 17px !important;
    max-height: 16px !important;
    } */

    #tab-sidebar .tbs-reload:hover {
    -moz-image-region: rect(0px 84px 25px 56px) !important;
    }

    #tab-sidebar .tbs-reload:hover:active {
    -moz-image-region: rect(25px 84px 50px 56px) !important;
    }

    #tab-sidebar .tbs-reload[disabled="true"] {
    -moz-image-region: rect(0px 84px 25px 56px) !important;
    }

    .tbs-back + spacer { max-width: 0px !important; }


    Graphiken und Abstände (margin) einfach entsprechend austauschen.

    Gruß,
    Bazon


    Edit:
    Mit Rot all das gekennzeichnet, was auf jeden Fall den persönlichen Anforderungen nach angepaßt werden muss.
    Die moz-image-region Zeilen können auch erstmal weggelassen werden, aber wenn es ohne sie nicht klappt, liegt es höchstwahrscheinlich daran, dass die Erweiteung einen anderen Bildausschnitt vorsieht.

    Die Markierung mit rot ist nicht vollständig, geht aber analog so weiter.

    Hallo Bazon! :shock:
    Cool, ich werd die Codes für die Buttons morgen ausprobieren, ich hab leider grad keine Zeit mehr! :? Zu den Codes: Sind die schon gebrauchsfertig, oder muss ich da noch was an mein System anpassen?

    Ne, Dr. Ä, ist noch icht gebrauchsfertig, ist eher ein "Gerüst", anhand dessen die persönlichen Wünsche besser umgesetzt werden können.

    Ich oben mal das rot gefärbt, was auf jeden Fall angepaßt werden muss.

    Du wolltest Code, da hast Du ihn :wink:
    Im wesentlichen mußt Du nur noch die richtigen Bilderpfade einsetzen und die richtigen Aussschnitte.

    Was die Vor-/ Zurück- / Neuladen- /Stoppbuttons betrifft:
    Guck einfach in Silvermel (jar=zip, entpacken) in browser/toolbarbuttons.css, da stehen alle richtigen Pfade und Ausschnitte.
    Ja, das ist etwas Arbeit :wink: (wenn auch nur copy and paste...)

    Gruß,
    Bazon

    Mein Lieber....

    Ich mache es super gerne, aber... Ich habe für Heute schon meine Pläne versaut mit dieser Bastlerei (ich liebe es einfach!!) :)

    Wenn ich jetzt noch den Code schreibe, wird es mir einfacher schon in den Theme einbauen und eine neue Version Dir schicken. Tut mir Leid aber ich bin z.Z. ziemlich im Stress!! Wenn Du etwas Geduld hast dauert es nicht zu lange dass ich die neue Version fertig habe, ok??

    Gruß

    Bird