Safarifox Themes für Firefox 1.0 - 1.5, SaFire Entwicklung

Hallo bird,

schön, dass Du Dich offensichtlich besser mit Chatzilla auskennst / bzw. es im Gegensatz zu mir überhaupt bedienen kannst....

Danke schön für den Code, das erspart mir dann die Einarbeitung in Chatzilla....

Wieso funktioniert das Tab-färben eigentlich im Default Theme und nicht bei SaFire? Meines Wissens enthält SaFire nämlich gar keine Definition der Tab-Textfarbe, deshalb wundert mich das, dass es nicht von der Erweiterung Chatzilla übernommen wurde.
Und eine ".view-button" Definition gibt es von sich aus weder im Default Theme, noch in SaFire...
Weißt Du das zufällig...?

Zitat von bird

@Bazon

Ich habe gerade die letzte Version (Safire0_21 ???) und bin neugierig was sollen die beide Ordner "Sage" und "Searchbutton"???

Das ist für die Erweiterungen Sage und Searchbutton.

Für Sage hatte sich "terpfen" auf der DeviantArt Seite interne Buttons gewünscht. Allerdings gelang es mir nicht, diese auf 'normalem' Weg in das Theme einzubauen (also wie andere Buttondefinitionen auch in browser\browser.css, zumindest mache ich das bei anderen Erweiteungen so...), da einige Button bereits in der Erweiterung mit !important versehen waren und ich das mein Theme !important nicht überschreiben konnte. Zumindest klappte das genau bei den Buttons nicht, die in Sage schon ein !important tag hatten.
Aber trepfen nannte ja ein Vorbild für die Sage Integration: GrApple. Das sind zwar nur Themes für den MAC, aber man kann ja trotzdem mal in die .jar reinschauen....:
(und naürlich auch ein bisschen daran rumpfuschen und sie dann eben doch installieren...:wink:)

Und dort war das nun mal so gelöst: Nahezu der gesamte Inhalt der .jar innerhalb der .xpi wurde in den Ordner 'Sage' im Theme eingebaut und per contents.rdf eingebunden.
Dann wurden auch die Buttons mit !important im Theme überschrieben.

Bei Searbutton versuchte ich dasselbe, klappte aber nicht so ganz: Ich wollte den per !important eingebundenen Text des Searchbuttons loswerden, klappte aber nicht.
Wundert mich, dass der Searchbutton Ordner überhaupt in einer Veröffentlichung landete, war wohl eher ein Versehen, weil es ja noch nicht fertig ist....

Gruß,

Bazon

Zitat von bird

Entferne die Linie

Code

<RDF:li resource="urn:mozilla:skin:safire:chatzilla"/>

und alles funktioniert.

Ups, wie nachlässig!! Dann hast Du vermutlich auch gesehen, woher ich mir die contents.rdf geklaut habe (das war eines der ersten Themes für 1.0+...) ich müßte sie eht mal besser entmissten... (...wird in Kürze erledigt)
(...zumal ich das echt hätte sehen müssen, als ich genau dort sage hinzugefügt habe, sowas...)

Danke und Gruß,

Bazon

So, da ich immer noch nicht mit Chatzilla zurechtkomme vertraue ich einfach mal auf birds Tipp, der klingt ja auch sehr plausibel. (Mit anderen Worten: Die contents.rdf ist jetzt ausgemistet...) (wobei ich mich frage, ob die Frage vorher nach dem Sage Ordner nicht ein Wink mit dem Zaunpfahl war, da ging es ja schließlich auch um contents.rdf Einträge....)
Chatzilla sollte also auch mit einer der folgenden Versionen vollständig funktionieren:
SaFire 0.22
SaFire Milk 0.22
SaFire Sunken Aqua 0.22
SaFire Full Button 0.22

Gruß,

Bazon

edit: Link korrigiert, danke Uli!

Hallo allerseits!

Dann mal der Reihe nach:

UliBär:
Ups, danke, habe ich falsch gesehen, wird gleich korrigiert!

Was Costas:
Ja, wirklich schade, weil ich nämlich immer noch nicht Chatzilla begreife, kann ich es auch nicht testen...:wink:
...trotzdem wünsche ich Dir schönen Urlaub!
[Wenn Du aber zu neugierig bist: Gehe in das Verzeichnis Profilordner\Extensions\X\Chrome mit X={a1f73302-cf50-4bc9-8347-82c00e5ad4e3} für SaFire Milk und
X={a98e826c-4dae-4c54-b8e9-01397a613675} für SaFire gehe dort in das Themearchiv (.jar = .zip, geht direkt mit winrar) und lösche in der contents.rdf die Zeile mit Chatzilla, von der bird berichtet hat...
...obwohl, guck lieber nicht, die contents.rdf war echt peinlich, die habe ich seit Version 0.01 praktisch nicht verändert und damals wiederrum von einem anderen Theme geklaut.... :wink: ]

ichbins:
Oh super, ein Translate Button!!!
Hast Du gut hingekriegt!

Also, warum ist der zu hoch?
Ich denke, weil Du Deinem Button die Höhe 26px gegeben hast (moz-image-reigion geht in der Reihenfolge (oben (=0 bei Dir), rechts, unten(=26 bei Dir), links)), alle anderen Buttons in SaFire haben nur die Höhe 25px, zumindest seit Version 0.11 (da ist wohl unten also noch eine transparente Pixelreihe dabei).
Ich nehme an, Du hast den Button aus der Buttonmap gebastelt, die ich mal hier abgelegt hatte. Diese (3 Zustände, für Translate eigentlich nicht nötig, aber egal...) ist dem Stop-Button entnommen. Der Stop-Button hat in SaFire folgenden Code:

#stop-button {
  margin-right: -2px;
  margin-left: 8px;
  list-style-image: url("chrome://browser/skin/stop-large.png");
  -moz-image-region: rect(0px 28px 25px 0px)
}
#stop-button:active {
  -moz-image-region: rect(0px 151px 25px 123px);
}
#stop-button[disabled="true"] {
  -moz-image-region: rect(0px 110px 25px 82px);
}

vielleicht kannst Du den in angepaßter Form (translate-pg, zusätzlich !important) für den Translate Button verwenden?! Sollte klappen denke ich.

Wenn nicht:
Normalerweise schiebt man Buttons und Co. nach unten, indem man ihnen einen größeren Außenrand oben zuweist (oder einen kleineren unten):
Die Anweisung lautet dann

margin-top: 1px !important;

oder

margin-bottom: -1px !important;

(1px ggf. anpassen und ansonsten in die geschweifte Klammer bei der Button-Anweisung reinschreiben).

[und ansonsten: hast Du eine Ahnung, was mit Deinem Go-Button passiert ist? Habe ich noch nie so gesehen....]

Viel Erfolg & Grüße,

Bazon

Moin moin!

ichbins:
Danke für die vielen Buttons, werde sie bei nächster Gelegenheit einbauen!
Da hast recht, mit dem (0px 34px 34px 0px) Code ist das Icon in der Mitte, aber:
Das Icon ist 9 Pixel zu hoch --> Die Toolbarleiste wird höher.
Dein neues Icon sitzt "richtig" und die Höhe der Leiste wird auch nicht verändert mit

#translate-pg, translate-pg:hover, translate-pg[buttonover="true"], translate-pg[disabled="true"] {
  list-style-image:  url("translate-pg.png") !important;
 -moz-image-region: rect(4px 30px 29px 2px) !important;
  margin-left: 8px !important; 
  margin-right: -2px !important;
}

(Ich habe das Bild in den Chrome Orner neben die userChrome.css glegt, da kann man sich die Pfadangabe sparen.... [wußte ich damals noch nicht :wink:])
Solltest Du Zeit und Lust dazu haben: Wie wär's mit diesn Buttons auch in brushed und gedrückt Zuständen?
Eine Buttonmap dazu ist [Blockierte Grafik: http://img137.imageshack.us/img137/4858/buttonmapempty1ze.png],

Aber nur, wenn Du Zeit und Lust hast!
Sonst kannst Du mir auch erkären, wie Du das so gut hinbekommen hast (bei dem einzigen Button, den ich gemacht habe, habe ich mich reichlich schwer getan und er (Sage-Button) sieht auch nicht sooo toll aus....)

Zur Verwendung der aus dieser Buttonmap entstandenen Buttons:
der entsprechende Code leitet sich z.B. vom Home Button ab:

#home-button {
  margin-right: -2px !important;
  margin-left: 8px !important;
  list-style-image: url("chrome://browser/skin/home.png") !important;
  -moz-image-region: rect(0px 28px 25px 0px) !important;
}
#home-button:active {
  -moz-image-region: rect(0px 82px 25px 54px) !important;
}
#home-button[disabled="true"] {
  -moz-image-region: rect(0px 28px 25px 0px) !important;
}

für brushed/groß und

toolbar[iconsize="small"] #home-button {
  margin-right: -2px !important;
  margin-left: 8px !important;
  list-style-image: url("chrome://browser/skin/home.png") !important;
  -moz-image-region: rect(26px 28px 51px 0px) !important;
}
toolbar[iconsize="small"] #home-button:active {
  -moz-image-region: rect(26px 82px 51px 54px) !important;
}
toolbar[iconsize="small"] #home-button[disabled="true"] {
  -moz-image-region: rect(26px 28px 51px 0px) !important;
}

für Aqua/klein.
Dabei natürlich #home-button und den Pfad/das Bild durch den entsprechenden Fall anpassen (die !important habe ich schon reingesetzt.)

S.i.T.:

Zitat von S.i.T.

Schau mal:

Du läßt den Go-Button doch anzeigen? Ich dachte, der sei unnötig... :lol: :wink:
Ja ja, das mit den abgerundeten Ecken ist so 'ne Sache, siehe den entsprechenden Thread.... :wink:
Das ist allerdings eine typische Erweiterung, die entweder nur bei sehr einfachen Themes funktioniert oder bei Themes, die sie explizit unterstützen. (Weitere Beispiele sind: Fusion, Stop/Reload-Button)
Zugegeben, dieses Theme ist mit seiner 3teiligen URL Leiste ohne abgerundete Ecken eine Ausnahme, aber es ist nun mal so. (Wozu eigentlich die dreiteilge URL-Leiste? Für den Rahmen außerhalb der Leiste bei den Focus-Zuständen....)
Ich werde jedenfall auch keine Unterstützung für diese Erweiterung in das Theme einbauen, ich weiß gar nicht mal, ob das gehen kann...:wink:
(werden bie sicheren Seiten die Ränder richtig eingefärbt?)

Gruß,

Bazon

Hallo allerseits!

S.i.T.:

Zitat von S.i.T.

War nur mal neugierig und weil du doch woanders hervorgehoben hast, daß Safire ja zu den Erweiterungen recht kompatibel sein soll...

Hast ja prinzipiell recht, Ziel ist nachwievor höchstmögliche Kompatibilität. Aber eben nicht unbedingt zu Erweiterungen, die pauschal am Theme rumfuschen. :wink: "Well rounded" ist eben nur zu manchen Themes kompatibel und das wird immer so sein, ich denke, es ist unmöglich, eine passende Anpassung für alle Themes zu machen. Ich werd's mir mal gelegentlich angucken, halte es aber bereits jetzt für problematisch.

Was allerdings eine Überlegung wert wäre, wäre in das Theme noch eine kleines Extra-Stylesheet einzubauen, das man extra per userChrome.css einbinden muss (z.B. @import url("chrome://global/skin/subskin/rounded.css"); so ähnlich wie in den Themes von Aaron Spuler), das wäre kein Problem, und diejenigen, die lieber eine abgerundete URL-Leiste wollen, können sich so einfach eine erzeugen.

ichbins:
Wow, noch neue Buttons! Suuper! Sehe ich das richtig, dass das beides Mail Buttons sind? Oder ist der eine für eine Erweiterung, die ich noch nicht kenne?

Zitat von ichbins

Ich Arbeite hier mit Adobe

Photoshop?
Auf jeden Fall schon mal Danke für Deine Tipps, das mit dem Gitter habe ich bisher nicht so gemacht, werde ich gut gebrauchen können
Wozu ich allerdings noch Tipps gebrauchen könnte, wäre folgendes Problem:
Bei der Gestaltung eines Buttons soll ja meist das Symbol von einem vorhandenem Button übernommen werden, nicht aber dessen Hintergrund. Daraus ergibt sich das Problem: Wie trenne ich sauber Graphik und Hintergrund? Das bereitete mir nämlich noch große Probleme... (bisher machte ich das über Farbbereichsauswahl, klappte aber immer nur eingeschränkt.)

Zitat von ichbins

Wenn Du noch mehr brauchst, sag mir welche ich bauen soll, werde mir mühe geben!

Ich sehe jedenfalls schon, Du kannst das echt gut!
Ja, was heißt "ich", was heißt "brauchen"? Also ich denke, ganz allgemein gesprochen die Nutzer des Themes werden einige neue Buttons schon gutheißen :wink:
Ganz oben auf der Prioritätsliste stehen dabei die Standardbuttons, die dem Theme (also nicht in der Full-Button Version mit gekl.. geliehener Buttonmap) bisher fehlen:
Kopieren, Ausschneiden, Einfügen (Achtung, 3 Zustände! also diese bzw. diese Buttonmap) Drucken und vielleicht noch ein paar Buttons für die am häufigsten verwendeten Erweiterungen wie AdBlock oder so.
Du siehst: Noch genug Platz zum Austoben...:D (und in der Contributor Liste auch...:wink:)

Dr. Evil:
Bei welcher Version denn? Das war kurzzeitig mal ein Problem (irgendwo im 0.11er Bereich, nach Umgestaltung der URL-Leiste für Fusion), sollte aber mittlerweile behoben sein. Bei mir siehts jedenfalls so aus:
[Blockierte Grafik: http://img128.imageshack.us/img128/4336/strgf6ka.png]

@all:
Ich bin am überlegen, ob ich die schwarzen Grenzen zwischen den inaktiven Tabs weglassen soll. Jedenfalls verwende ich das so bei einer Version bei mir zuhause und ich finde, das sieht ganz gut aus. Was haltet Ihr davon? (und wie sieht das eigentlich bei Safari aus?)

Gruß,

Bazon