Firefox Skinning

Wie fast alle wissen, müssen es bei mir die Gant Icons sein und zwar überall. Dabei kann jetzt folgendes Problem auftauchen: Ich installiere eine Erweiterung, die einen Button für die Toolbar zur Verfügung stellt und dieser Button hat ein nicht passendes Icon. Wie krieg ich da jetzt ein [[Gant]9 (oder x-beliebig anderes) Icon hin?

Vorsichtsmaßnahme: Sichern des Profilordners, nur für alle Fälle!!

A: EINFACH am Beispiel der ChromEdit Erweiterung

• Schritt 0:

Firefox beenden

• Schritt 1:

Ich suche die *.jar Datei der grade installierten Erweiterung, und zwar im Profilordner im Underordner "Extensions".

• Schritt 2:

Ich kopiere sie woanders an, zum Bearbeiten und aus Backup Gründen.

• Schritt 3:

Die kopierte JAR Datei entpacke ich mit Winzip. Jetzt haben wir einen Ordner, der "chromedit" heißt. Im Unterordner skinclassicimages befinden sich 3 PNG Dateien: ce.x16,cex20 und ce.x32. Diese PNG Dateien ersetze ich jetzt durch gleichnamige Dateien, die zu meinem Theme passen.

• Schritt 4:

Den Ordner "chromedit" kann ich jetzt wieder zippen. Damit erhalte ich chromedit.zip.

• Schritt 5:

Im Profilordner Extensions benenne ich die chromedit.jar um in chromedit.jar.orig (oder anders, ist egal). Danach bewege ich die chromedit.zip in den Extensions Ordner und benenne sie um in chromedit.jar

• Schritt 6:

Firefox starten und freuen! Sollte jetzt irgendwas nicht geklappt haben, kann ich die chromedit.jar löschen, benenne die chromedit.jar.orig wieder um in -.jar und nix ist passiert.

B: SCHON SCHWIERIGER

Bei manchen Erweiterungen oder Themebuttons habt Ihr kein einfaches PNG, sondern ein PNG, in dem 3 Zustände des Buttons stecken: normal, hover,disabled. Beispiel: back.png 32x96px groß

Bild

Um das zu ersetzen, kommt man nicht umhin, sich mit PS oder ähnlichem erstmal so ein DreierPNG zu basteln. Alles weitere geht dann wie oben beschrieben.

C: TRICKSEN

Das mußte ich, weil ich das gar nicht kann, mir so DreierPNGs zu basteln, da ich mit der Transparenz auf Kriegsfuß stehe und auch kein PS Kenner bin. Dabei hab ich mir folgendes überlegt: Da PCs ja dumm sind, muß irgendwo stehen, daß so ein 3erPNG benutzt werden soll und es muß auch dabeistehen, welches "Drittel" bei welchem Zustand zu benutzen ist. Nach einiger Suche fand ich in der browser.css meines Themes folgende Zeilen:

#back-button { 
-moz-binding: url("chrome://browser/skin/browser.xml#toolbar-menu-button"); 
list-style-image: url('chrome://browser/skin/icons/back.png'); 
-moz-image-region: rect(0px 32px 32px 0px); 
} 
#back-button[buttonover="true"] { 
-moz-image-region: rect(32px 32px 64px 0px); 
} 
#back-button[disabled="true"] { 
-moz-image-region: rect(64px 32px 96px 0px);

Man sieht auf den ersten Blick, daß in diesen Zeilen alles steckt, was ich suche: es soll das back.png benutzt werden und an den Zeilen mit den Zahlen kann man gut erkennen,wie alles Vielfache von 32 sind, was klar ist, denn back.png hat ein Größe von 32px x 96(=3x32) px. und wie je nach Zustand entweder das oberste Drittel, das mittlere oder das untere Drittel von back.png angezeigt werden soll.

Wenn einem nun egal ist, ob das Icon sich ändert, wenn man mit der Maus drauf ist oder wenn das Icon inaktiv ist, löscht man einfach alles raus, was die beiden anderen Zustände angeht. In diesem Fall bleibt dann stehen:

#back-button { 
-moz-binding: url("chrome://browser/skin/browser.xml#toolbar-menu-button"); 
list-style-image: url('chrome://browser/skin/icons/back.png');

Für das back.png kann ich jetzt wieder einfach ein "normales" PNG nehmen. Alles weitere wieder wie oben. Ist zwar ein billiger Trick, aber klappt, wenn man nicht in der Lage ist, mit diesen 3er PNG umzugehen. . Es muß nicht immer die browser.css sein, aber auf jeden Fall eine *.css Datei. Es ist immer irgendeine in dem entpackten Ordner Eurer Erweiterung.

Genauso hab ich es schon erlebt, daß *.gif Dateien verwendet werden. D.h.wenn ich die austausche gegen PNG, muß ich auch in der entsprechenden *.css Datei die GIF Endungen gegen PNG austauschen.

D: FIREFOX Icongrößensalat

Was mir auch passiert ist, ist ein Durcheinander von Icon -bzw PNG Größen. Ihr wisst ja alle, daß man die Buttons in der Toolbar auf "Kleine Symbole" oder "Große Symbole" stellen kann. Jetzt wäre es vollkommen normal, daß die kleine Größe 16x16 wäre,und die große Größe 32x32. Leider trifft man immer wieder in älteren Themes oder auch in neuen Erweiterungen auf 20x20 bzw. 24x24.

Handelt es sich jetzt um Fall A, dann ist es wieder einfach: ich ändere einfach die Größe der PNG Datei und ersetze dann. Habe ich es jetzt mit einem 3er PNG zu tun und hab sogar ein eigenes erstellt, muß dann in der jeweiligen *.css Datei die Größe angepaßt werden. Für 20x20 sähe das dann so aus:

0px 20px 20px 0px bzw

20px 20px 40px 0px bzw

40px 20px 60px 0px

Icongröße 3erPNG: 20px x 60px

und für 24x24:

0px 24px 24px 0px bzw

24px 24px 48px 0px bzw

48px 24px 72px 0px

Icongröße 3erPNG: 24px x 72px

Eigentlich ganz einfach, immer nur Vielfache von 20 bzw 24.

Ich erwähne das deshalb, weil bei meinem Theme fast alle Icons in klein die Größe 20x20 haben, d.h. bei neuen Erweiterungen, die ein 16x16 Icon daherbringen, muß ich immer die Größe ändern.

Und wenn dann alles geklappt hat, hat man, egal wieviel und welche Extensions man installiert hat, ein einheitliches Bild in der Toolbar:

Wie immer alles auf eigene Gefahr und so weiter..

In der Hoffnung, der eine oder andere kann da was mit anfangen, wünsch ich viel Spass beim Basteln!!

Tombik

PS: Mögen mir die echten Programmierprofis über meine naive Erklärungsweise hinwegsehen, ich hatte davon keine Ahnung und hab mir das selbst "zusammengereimt"