Firefox-Modding: Themes, Erweiterungen, Codes

Tombik · Beitrag von **Tombik** » 03.01.2007, 15:15

Hi!

Hiermit soll ein Gesamtüberblick gegeben werden über die Möglichkeiten, das Aussehen des Firefox-Browsers zu verändern.
Neben einer Aufzählung der bereits bekannten Möglichkeiten, die hier im Forum auch schon dokumentiert sind, liegt das Hauptaugenmerk auf Erweiterungen, die direkt oder indirekt zum Modden des Firefox geeignet sind:
- durch neue Buttons
- durch Organisieren vorhandener Buttons
- durch Änderungen an der Sidebar
- durch Einbindung externer Scripte
- durch Hinzufügen von Informationen, die das Aussehen des Firefox verändern
- und anderes.

Aufgrund der riesigen Anzahl von existierenden Erweiterungen habe ich mich bei meiner Auswahl an http://www.erweiterungen.de orientiert - der deutschen Seite für Firefoxerweiterungen.

Bei allen auftauchenden Problemen, weiteren Links etc. sei an dieser Stelle auf das deutsche Firefoxforum hingewiesen, wo kompetente Helfer zur Verfügung stehen:
http://www.firefox-browser.de/forum/index.php
Links zu dortigen Threads, die mit Modding zu tun haben:
http://www.firefox-browser.de/forum/vie ... hp?t=45294 Userchrome.js
http://www.firefox-browser.de/forum/vie ... hp?t=45248 Codes, Scripts
http://www.firefox-browser.de/forum/vie ... php?t=2657 Throbber, Logos, Icons
http://www.firefox-browser.de/forum/vie ... hp?t=23601 Beliebte Greasemonkeyscripts
http://www.firefox-browser.de/forum/vie ... php?t=2458 Firefox/Desktopthread

A: Themes, Buttonänderung, Userchrome

1. Themes
Themes sind die einfachste Möglichkeit, das Aussehen des FX zu verändern.
Eine Liste von Links findet man u.a. hier: http://www.deskmodder.de/phpBB3/viewtopic.php?t=1246
2. Buttonänderung
Will man einen oder mehrere Buttons von Erweiterungen und/oder des Themes ändern,
folgt man diesem kleinen Tutorial:

MiniTutorial
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 (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 \skin\classic\images 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ß

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:
http://home.arcor.de/tombik/GANTPics/FXToolbar.jpg

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!!

3. Codes für die Userchrome/Usercontent-Dateien
Hier in diesem Thread in den folgenden Beiträgen!

B: Moddingfähige Erweiterungen

Auch wenn aktuell bereits die Version 2.0.0.1 des Firefox erscheinen ist, werde ich auch Erweiterungen aufführen, die laut Erweiterungen.de nur bis 1.5 lauffähig sind.
Zum einen hat noch nicht jeder seinen Firefox upgedatet, zum anderen ist es oft möglich, durch einen kleinen Trick diese Erweiterungen auch unter 2.0.0.* zu benutzen. Neben der Möglichkeit, die Versionsprüfung zu umgehen mit Hilfe von z.B. der Erweiterung Mr.TechLocalInstall http://www.erweiterungen.de/detail/MR_T ... l_Install/ gibt es auch einen "handwerklichen" Weg: die heruntergeladene XPI-Datei in *.jar umbenennen, entpacken, die install.rdf öffnen. Dort findet man eine Zeile wie z.B. <em:maxVersion>1.5.0.*</em:maxVersion>. Dort die Version auf 2.0.0.* ändern, alles wieder einpacken, umbenennen, fertig. Das muss aber nicht immer zum Erfolg führen. Wenn die Erweiterung in Code des Firefox eingreift, der von 1.5 auf 2.0 stark verändert wurde, kann dieser Weg fehlschlagen. Dann muss man wirklich warten, bis die Autoren der jeweiligen Erweiterungen ein Update bereitstellen.

Desweiteren ist diese Liste bestimmt nicht komplett. Einerseits gibt es Erweiterungen, die nicht auf der deutschen Seite aufgeführt sind, andererseits ist die Grenze, ob eine Erweiterung jetzt zum Modden geeignet ist, fließend. Ich habe jetzt erstmal eine Vorauswahl getroffen, die natürlich durch Vorschläge Eurerseits erweitert werden kann.

Ich werde die Erweiterungen noch in Untergruppen einteilen, um den Überblick zu erleichtern.
Alle Beschreibungen wurden von http://www.erweiterungen.de übernommen und unterliegen dem Copyright der dortigen Autoren. Hier wird nur eine Kurzbeschreibung gegeben, für weitere Infos bitte den Links folgen.

1. Erweiterungen, die Scripte etc einbinden/verwalten/bearbeiten.
Greasemonkey http://www.erweiterungen.de/detail/Greasemonkey/ 1.5 - 2.0.0.*
Ein Benutzerskript-Manager für Firefox. Erlaubt es, mit Hilfe kleiner JavaScripts die Art und Weise, wie Webseiten dargestellt werden, zu beeinflussen und anzupassen.
ChromEdit_Plus http://www.erweiterungen.de/detail/ChromEdit_Plus/ 1.5 - 2.0.0.*
Ein Editor für die persönlichen Konfigurationsdateien.
Edit Config Files http://www.erweiterungen.de/detail/Edit_Config_Files/ 1.0 - 2.0.0.*
Bearbeiten Sie die Konfigurations-Dateien (userChrome.css, userContext.css, user.js, prefs.js) in Ihrem bevorzugten Text-Editor.
Stylish http://www.erweiterungen.de/detail/Stylish/ 1.5 - 3.0a1
Ermöglicht ein individuelles Anpassen des Aussehens von Websites sowie der Programmoberfläche mit Hilfe eigener CSS-Stile, ohne auf die Dateien userChrome.css/userContent.css zugreifen zu müssen.

2. Rund um die Tabs
Tab Mix Plus (TMP) http://www.erweiterungen.de/detail/Tab_Mix_Plus/ 1.0 - 3.0a1
Vereint eine Vielzahl zusätzlicher Einstellungsmöglichkeiten für das Tabbed-Browsing.
Aging Tabs http://www.erweiterungen.de/detail/Aging_Tabs/ 2.0 - 3.0a1
Unbenutzte Tabs verblassen mit zunehmendem Alter, während der aktive Tab besonders hervorgehoben wird.
BlankLast http://www.erweiterungen.de/detail/BlankLast/ 1.4 - 1.5.0.*
Leert den letzten Tab, wenn dieser geschlossen wird und verhindert das Ausblenden der Tableiste.

3. Rund um die Sidebar
AiOS http://www.erweiterungen.de/detail/All-in-One_Sidebar/ 1.5 - 3.0a1
AiOS bündelt viele separate Fenster in der Sidebar und erlaubt so den schnellen Zugriff auf alle vorhandenen Panele, u.a. auf Downloads und Erweiterungen.
boox http://www.erweiterungen.de/detail/boox/ 2.0 - 2.0.0.*
Bietet erweiterte Funktionen für die Lesezeichen-Sidebar.
POTO Sidebar Extension http://www.erweiterungen.de/detail/POTO ... Extension/ 1.5 - 2.0.0.*
Eine Opera-ähnliche Sidebar, die sich durch Anlicken oder Berühren (einstellbar) der linken Seite des Browserfensters öffnet.

4. Rund um die Statusleiste
Autohide Statusbar http://www.erweiterungen.de/detail/autoHideStatusbar/ 1.5 - 3.0+
Automatisches Ein-/Ausblenden der Statusleiste.
CacheStatus http://www.erweiterungen.de/detail/Cache_Status/ 1.5 - 2.0.0.*
Einfache Möglichkeit zur Cache-Anzeige und -Verwaltung in der Statusleiste.
CountdownClock http://www.erweiterungen.de/detail/Countdown_Clock/ 1.0 - 2.0.0.*
Zeigt einen Countdown in der Statusleiste an und benachrichtigt akustisch/optisch beim Erreichen des eingestellten Zeitpunkts.
Download Statusbar http://www.erweiterungen.de/detail/Download_Statusbar/ 1.5 - 2.0.0.*
Erlaubt die Überwachung und Verwaltung von Downloads über eine übersichtliche Statusleiste.
FlagFox II http://www.erweiterungen.de/detail/FlagFox_II/ 0.9 - 2.0.0.*
Zeigt in der Statuszeile die Flagge des Standortes des aktuellen Servers.
FootieFox http://www.erweiterungen.de/detail/FootieFox/ 1.5 - 2.0.0.*
Darstellung aktueller Fußballspielstände in der Statusleiste.
Forecastfox http://www.erweiterungen.de/detail/Forecastfox/ 1.0 - 2.0.0.*
Lokale Wettervorhersage mit Symbolen in der Status- oder Symbolleiste.
Forecastfox Enhanced http://www.erweiterungen.de/detail/Fore ... _Enhanced/ 1.0 - 2.0.0.*
Lokale Wettervorhersage mit Symbolen und animierten Wetterkarten in der Status- oder Symbolleiste.
FoxClocks http://www.erweiterungen.de/detail/FoxClocks/ 1.5 - 2.0.0.*
Stellt mehrere Zeitanzeigen für hunderte von Städten weltweit in der Status- oder Symbolleiste dar.
FoxyTunes http://www.erweiterungen.de/detail/FoxyTunes/ 1.5 - 2.0.0.*
Steuern Sie einen beliebigen Medienplayer aus Firefox und anderen Anwendungen.
Organize Status Bar http://www.erweiterungen.de/detail/Organize_Status_Bar/ 1.0 - 3.0a1
Erlaubt das Umorganisieren der Symbole und Einträge in der Statusleiste.
Quitomzilla http://www.erweiterungen.de/detail/Quitomzilla/ 1.0PR - 1.6a1
Kleine Hilfe, wenn man mit dem Rauchen aufhören will.
ReminderFox http://www.erweiterungen.de/detail/ReminderFox/ 1.0 - 2.0b1
Eine einfache Anzeige und Verwaltung von Terminen und Aufgaben mit Erinnerungsfunktion.
Statusbar Clock http://www.erweiterungen.de/detail/Statusbar_Clock/ 1.5 - 3.0a1
Zeigt die aktuelle Uhrzeit und das Datum in der Statuszeile des Browsers an.

5. Rund um die Bookmarks
BookmarksHome http://www.erweiterungen.de/detail/BookmarksHome/ 0.9 - 1.5.0.*
Stellt die Lesezeichen als formatierte Startseite zur Verfügung. Das Layout dafür ist anpassbar.
Delete Bookmark Icons http://www.erweiterungen.de/detail/Dele ... ark_Icons/ 1.0 - 3.0a1
Mit Delete Bookmark Icons kann man die Symbole für ein oder alle Lesezeichen löschen.
Favicon Picker 2 http://www.erweiterungen.de/detail/Favicon_Picker_2/ 1.5 - 2.0.0.*
Ermöglicht es, den Lesezeichen kleine Grafiken, sogenannte Favicons zuzuweisen.
Multi Bookmarks Toolbars http://www.erweiterungen.de/detail/Mult ... _Toolbars/ 1.0 - 1.6a1
Erweitert Firefox um eine zweite Lesezeichen-Symbolleiste.
My Portal http://www.erweiterungen.de/detail/My_Portal/ 1.5 - 2.0.0.*
Stellt die Lesezeichen-Hierarchie als eigene Website-Übersicht dar.

6. Rund um Menüs
CuteMenus2 http://www.erweiterungen.de/detail/CuteMenus2/ 0.9 - 1.5.0.*
Fügt den Menü- und Kontextmenü-Einträgen Symbole hinzu.
Menu Editor http://www.erweiterungen.de/detail/Menu_Editor/ 1.5 - 2.0.0.*
Erlaubt individuelle Anpassungen der Programm-Menüs.
MenuManipulator http://www.erweiterungen.de/detail/MenuManipulator/ 1.5.0.*
Ermöglicht das Verschieben, Bearbeiten oder Erstellen von Menüs, Menüeinträgen und Trennlinien.

7. Rund um Eingabefelder, Textareas
Resizeable Form Fields http://www.erweiterungen.de/detail/Resi ... rm_Fields/ 1.5 - 2.0.0.*
Größe von Texteingabefeldern nach Bedarf anpassen.
Resizeable Textarea http://www.erweiterungen.de/detail/Resizeable_Textarea/ 1.0 - 2.0.0.*
Größe von Texteingabefeldern nach Bedarf anpassen.
Searchbar Autosizer http://www.erweiterungen.de/detail/Searchbar_Autosizer/ 2.0 - 2.0.0.*
Erweitert die Suchleiste automatisch beim Eintippen, sobald nötig, und schrumpft sie wieder, wenn sie leer ist.

8. Unsortiert:
ColorZilla http://www.erweiterungen.de/detail/ColorZilla/ 0.9 - 2.0.0.*
Mittels Fadenkreuz kann aus jedem Browserbereich der entsprechende Farbwert ausgelesen werden.
CompactMenü http://www.erweiterungen.de/detail/Compact_Menu/ 1.4 - 1.5.0.*
Blendet die Hauptmenüs aus (Datei, Bearbeiten, Ansicht usw.) und macht sie platzsparend über ein Symbol zugänglich.
CustomizeGoogle http://www.erweiterungen.de/detail/CustomizeGoogle/ 1.0 - 2.0.0.*
Ermöglicht zahlreiche individuelle Einstellungen für Google-Seiten.
External Application Buttons http://www.erweiterungen.de/detail/Exte ... n_Buttons/ 0.9 - 2.0.0.*
Ermöglicht es, Schaltflächen zum Aufruf externer Programme in der Symbolleiste anzulegen.
Fitt's Back Button http://www.erweiterungen.de/detail/Fitts_Back_Button/ 0.9 - 1.6a1
Vergrößert die Zurück-Schaltfläche u.a. durch Anhängen des Symboltextes für bessere Zugänglichkeit.
PrefButtons http://www.erweiterungen.de/detail/PrefButtons/ 0.9 - 2.0.0.*
Stellt Optionsschaltflächen für häufig benötigte Funktionen bereit.
Stop-or-Reload Button http://www.erweiterungen.de/detail/Stop ... ad_Button/ 1.5b1 - 2.0.0.*
Vereint die Stopp- und Neu laden -Schaltflächen zu einer einzigen (wie in Safari).
Titlebar Tweaks http://www.erweiterungen.de/detail/Titlebar_Tweaks/ 1.5 - 3.0.0.*
Individuelle Anpassung der Textanzeige in der Browser-Titelleiste.
WellRounded http://www.erweiterungen.de/detail/WellRounded/ 1.0 - 1.6a1
Rundet die Ecken der Adress- und Suchleiste sowie weiterer Felder ab.

Zuletzt ein Tipp von mir extra, weil auf Erweiterungen.de diese Erweiterung nur bis 1.0 aufgeführt ist:
Toolbar Enhancements Neue Buttons, Symbolleisten links oder echts erstellen, Icongröße seperat einstellbar, Fullscreenmöglichkeiten individuell anpassbar. Eine von mir gebumpte Version, die bis Firefox 2.0.0.* laufen sollte, findet man HIER

Wie immer: Benutzung auf eigene Gefahr!
Verbesserungen, Ergänzungen, Vorschläge einfach hier im Thread posten - ich werde sie dann oben einbauen.

Bitte keine Fragen zu den jeweiligen Erweiterungen hier im Thread!!

Beitrag von **Tante Google** » 03.01.2007, 15:15

Tombik · Beitrag von **Tombik** » 04.01.2007, 15:36

Sollte jemand einen Code haben, der hier reingehört, bitte PN an mich!

Sammlung wurde von mir sortiert.
Ihr findet jetzt:
im 1.Beitrag: userchrome.css Codes
im 2.Beitrag: user.js Codes
im 3.Beitrag: usercontent.css Codes
im 4.Beitrag: Verschiedenes
EDIT By Tombik

Damit ihr die verschiedenen Codes und Tipps zum Verbessern und Verschönern des Firefox-Browsers nicht mühsam im Netz zusammen suchen müßt, würde ich gerne den Thread nutzen um diese hier zu sammeln.

Ps.: es kann durchaus sein das doppelte Codes hier stehen.
Aber besser doppelt als garnicht...

----------------------------------------------------------------------

Alle Codes, die hier stehen, gehören in die
USERCHROME.CSS

Mehrere Reihen für die Lesezeichenleiste