Firefox Oberfläche den eigenen Bedürfnissen anpassen

Das Erscheinungsbild der Oberfläche des Mozilla Firefox kann noch in vielerlei Hinsicht angepasst werden. Dies erreicht man durch das Bearbeiten der Datei "userChrome.css". Diese Datei findet sich unter Windows XP in dem Verzeichnis: "C:\Dokumente und Einstellungen\All Users\Anwendungsdaten\Mozilla\Firefox\Profiles\default\chrome".

Statt dem Verzeichnis "All Users" müsst ihr hier eventuell in das Vereichnis mit eurem Windows-Profilnamen wechseln. Das Verzeichnis "default" hat eventuell noch ein paar Zeichen davor stehen.

Existiert hier nun bereits die Datei "userChrome.css", muss diese bearbeitet werden (vorher am besten noch eine Sicherungskopie machen). Sollte diese noch nicht exisitieren, findet sich dort eine Datei mit dem Namen "userChrome-example.css". In diesem Fall muss diese Datei kopiert werden und dann in "userChrome.css" umbenannt werden. Dann kann die Datei bearbeitet werden. Dafür könnt ihr den Windows Editor benutzen.

Im Folgendem findet ihr nun einige Befehle, die ihr 1:1 in eure "userchrome.css" übertragen könnt. Was sie bewirken steht immer darüber in diese Zeichen eingefasst:

/* Das macht der Befehl */

Die Zeichen sagen dem Firefox, dass es sich hierbei nur um Kommentare handelt. So wird alles was zwischen ihnen steht nicht als Befehl erfasst.

Ich benutze den Firefox v2.0.0.14. Solltet ihr eine ältere Version benutzen ist es möglich, dass einige Befehle nicht das gewünschte Ergebnis bringen oder garnicht wirken. Dasselbe kann passieren wenn ihr nicht das originale Theme von Firefox oder ganz bestimmte Erweiterungen installiert habt.

Am besten ist es ihr fügt der Datei einen Befehl hinzu, speichert und startet dann den Firefox. Ist der gewünschte Effekt eingetreten, könnt ihr den Firefox wieder schließen und den nächsten Befehl in die Datei einfügen. Sollte es nicht wie gewünscht funktionieren den Befehl aus der Datei am besten wieder löschen. So ist sichergestellt, dass keine unerwünschten Nebeneffekte auftreten.

Beachtet bitte auch, dass nicht alle hier aufgeführten Befehle kombinierbar sind (z.B. Searchbar ausblenden und Searchbar verkleinern).

Wer CSS kann ist hier übrigens herzlich zur Bastelstunde eingeladen.

So, jetzt aber hier die Befehle, viel Spaß beim ausprobieren:


/* Lesezeichen Symbolleiste abrunden */

#bookmarks-ptf{
-moz-border-radius: 2em !important;
border: 1px solid #CCC !important;
background-color: #eee !important;
}


/* Eine zweite Lesezeichen Symbolleiste anlegen */

#bookmarks-ptf {
display:block;
}
#bookmarks-ptf toolbarseparator {
display:inline;
}


/* Lesezeichen Symbolleiste: Text unter Icons anzeigen */

#bookmarks-ptf > .bookmark-item { -moz-box-orient: vertical !important; }


/* Lesezeichen Symbolleiste: Nur Icons anzeigen */

#personal-bookmarks .toolbarbutton-text {display : none !important;}


/* Lesezeichen Symbolleiste: Abstand der Icons verkleinern */

#personal-bookmarks toolbarbutton {
margin: 1px 1px 1px 1px !important;
padding: 1px 1px 1px 1px !important
}


/* Lesezeichen Symbolleiste: Textfarbe ändern (hier Rot) */

toolbarbutton.bookmark-item>.toolbarbutton-text {
color: red !important;}


/* Lesezeichen-Menü: Fav-Icons ausblenden */

.bookmark-item > .menu-iconic-left > .menu-iconic-icon {display: none;}


/* Lesezeichen-Menü: Verzeichnis-Icons ausblenden */

menu.bookmark-item > .menu-iconic-left { display: none; }


/* Throbber in Menüleiste ausblenden */

#navigator-throbber {display: none !important; }


/* Urlbar: Fav-Icon ausblenden */

#page-proxy-deck { display: none !important;}


/* Urlbar: DropDown-Pfeil ausblenden */

.autocomplete-history-dropmarker { display: none !important; }


/* Searchbar: DropDown-Pfeil ausblenden */

.searchbar-dropmarker-image {
display: none !important;}


/* Searchbar: Icon ausblenden */

.searchbar-engine-image { display: none !important;}


/* DropDown-Pfeil des Zurück- und Vorwärtsbutton ausblenden */

#forward-button .toolbarbutton-menubutton-dropmarker,
#back-button .toolbarbutton-menubutton-dropmarker { display: none !important; }


/* Zurück- Vorwärtsbutton ausblenden wenn nicht benötigt */

#back-button[disabled="true"] { display: none; }
#forward-button[disabled="true"] { display: none; }


/* Searchbar: verkleinern bis Mouse-Over */

#search-container
{
max-width: 35px !important;
}
#search-container > #searchbar .searchbar-textbox
{
display: none ! important;
}
#search-container:focus,
#search-container:hover
{
max-width: none !important;
}
#search-container:hover > #searchbar .searchbar-textbox,
#search-container > #searchbar .searchbar-textbox[focused="true"]
{
display: -moz-box !important;

/* choose a width that suits you */
width: 5em !important;
}


/* Searchbar: ausblenden bis Mouse-Over */

#searchbar { display: none ! important; }
#search-container:hover > #searchbar { display: -moz-box ! important; }


/* Lesezeichen hinzufügen Dialog - Verzeichnisbaum anzeigen & Schlüsselwortfeld hinzufügen */

#addBookmarkDialog {
min-height: 40em !important; /* Adjust this value to change the default height */
}
#folder-tree {
visibility: visible !important;
}
#keywordRow {
display: -moz-grid-line !important;
}
#expander, #keywordRow + row {
display: none !important;
}


/* Extension Manager: Meldung "Erweiterungen herunterladen" ausblenden */

#getMore{display:none;}


/* Fortschrittsanzeige: Farbe und Gestaltung ändern (hier Blau) */

#statusbar-icon > .progress-bar {
-moz-appearance: none !important;
background-color: blue !important;


/* Fortschrittsanzeige ausblenden */

#statusbar-progresspanel {
display: none !important;
}


/* Fortschrittanzeige: Farbe ändert sich bei steigendem Fortschritt */

#statusbar-icon > .progress-bar {
-moz-appearance: none !important;
background-color: #f00 !important; }
#statusbar-icon[value^="1"]:not([value="1"]):not([value="100"]) > .progress-bar {
background-color: #f30 !important; }
#statusbar-icon[value^="2"]:not([value="2"]) > .progress-bar {
background-color: #f60 !important; }
#statusbar-icon[value^="3"]:not([value="3"]) > .progress-bar {
background-color: #f90 !important; }
#statusbar-icon[value^="4"]:not([value="4"]) > .progress-bar {
background-color: #fc0 !important; }
#statusbar-icon[value^="5"]:not([value="5"]) > .progress-bar {
background-color: #ff0 !important; }
#statusbar-icon[value^="6"]:not([value="6"]) > .progress-bar {
background-color: #cf0 !important; }
#statusbar-icon[value^="7"]:not([value="7"]) > .progress-bar {
background-color: #9f0 !important; }
#statusbar-icon[value^="8"]:not([value="8"]) > .progress-bar {
background-color: #6f0 !important; }
#statusbar-icon[value^="9"]:not([value="9"]) > .progress-bar {
background-color: #3f0 !important; }
#statusbar-icon[value="100"] > .progress-bar {
background-color: #0f0 !important; }


/* Statusmeldung "Fertig" bei geladener Seite ausblenden */

.statusbarpanel-text[value="Fertig"]
{ display: none !important; }


/* Statusbar-Display ausblenden */

#statusbar-display {
display: none !important; }


/* Statusbar: Security-Button ausblenden */

#security-button {
display: none !important; }


/* Statusbar: 3D Style */

#status-bar statusbarpanel {
-moz-appearance: none !important; }


/* Statusbar: Farbe ändern (hier Rot) */

#status-bar {
-moz-appearance: none !important;
background-color: red !important;
background-image: none !important;}


/* Statusbar: Höhe ändern */

#statusbar-display {
min-height: 20px !important;
max-height: 20px !important; }


/* Statusbar auch bei Vollbild anzeigen */

#status-bar { visibility: visible !important; }


/* Statusbar: Textfarbe und Textgröße ändern (hier Rot und 110%) */

.statusbarpanel-text {
color: red; font-size: 110% !important; }


/* Farbe aller Tabs und des Tabtextes ändern (Hier Rot und Grün) */

.tab-image-left,
.tab-image-middle,
.tab-image-right
{ background-color: red !important; color: green !important; }


/* Farbe des aktiven Tabs und des Tabtextes ändern (Hier Rot und Grün) */

.tab-image-left[selected="true"],
.tab-image-middle[selected="true"],
.tab-image-right[selected="true"]
{ background-color: red !important; color: green !important; }


/* Farbe der inaktiven Tabs und deren Tabtexte ändern (Hier Rot und Grün) */

.tab-image-left[selected="false"],
.tab-image-middle[selected="false"],
.tab-image-right[selected="false"]
{ background-color: red !important; color: green !important; }


/* Farbe der ladenden Tabs und deren Tabtexte ändern (Hier Rot und Grün) */

tab[busy] .tab-image-left,
tab[busy] .tab-image-middle,
tab[busy] .tab-image-right
{ background-color: red !important; color: green !important; }


/* Tab Icons transparent erscheinen lassen */

.tab-icon {
-moz-opacity: 0.5 !important; }


/* Tab Icons ausblenden */

.tab-icon {
display: none; }


/* Tab Icons ausblenden und bei ladenenden Tabs Throbber anzeigen */

.tab-icon { display: none; }
.tabbrowser-tabs *|tab[busy] .tab-icon { display:-moz-box; }


/* Throbber bei ladenenden Tabs ausblenden */

.tabbrowser-tabs *|tab[busy] .tab-icon { display: none; }


/* Tab-Icon nur bei aktiven Tab anzeigen */

.tabbrowser-tabs tab:not([selected="true"]) .tab-icon {
display: none !important;
}
.tabbrowser-tabs tab:not([selected="true"]) .tab-text {
margin-left: 4px !important;
}
.tabbrowser-tabs tab[selected="true"] .tab-icon {
-moz-opacity: 1 !important;
margin-top: 1px !important;
}


/* Rahmen um angeklickten Tab ausblenden */

tab:focus .tab-text
{
border-style: none !important;
padding-left: 1px !important; /* sonst hüpft der Text beim Anklicken */
}

/* System-Button Tab Look */

#content tab {
-moz-appearance: button !important; }


/* Tab-Text zentrieren */

.tab-text {
text-align: center !important;
}


/* Tableiste: Farbe ändern (hier Rot) */

.tabbrowser-tabs {
background-color: red !important;
background-image: none !important;
}


/* Tab-Scroll-Buttons ausblenden */

.scrollbutton-up, .scrollbutton-down-stack {
display: none !important;
}


/* Tab-DropDown-Button ausblenden */

.tabs-stack .tabs-alltabs-stack {
display: none !important;
}


/* Mouse-Over Effekt der Toolbars abschalten */

toolbarbutton { -moz-appearance: none !important;border: none !important; }

Guten Morgen
ich habe da mal ne Frage, in dem Ordner "All User" konnte ich den Ordner "Anwendungs Daten" nicht finden auch in dem Ordner mit dem Namen meines Benutzerprofils nicht.
Was soll ich tuen?

Das liegt daran, dass der "Anwedungsdaten"- Ordner versteckt ist. Eine einfach Lösung wäre, wenn du in der Windowssuche einfach einmal nach diesem Ordner suchst. Achte dabei auf die Rechtschreibung, ansonsten würdest du wahrscheinlich nichts finden.

Er liegt unter C:\Dokumente und Einstellungen\All Users\

Öffne deine Windowsfestplatte bzw. Windowspartition (wahrscheinlich C:\) im Arbeitsplatz oder im Windows Explorer und wähle oben im Menü "Extras --> Ordneroptionen". Wähle im folgenden Fenster den Reiter "Ansicht" aus. Unter "Erweiterte Einstellungen" mach jetzt ein Häckchen bei "Inhalte von Systemordnern anzeigen". Weiter unten wählst du noch "Alle Dateien und Ordner anzeigen" aus und klickst dann auf "OK".

Wenn du gefragt wirst, ob du die Einstellungen für alle Ordner und Unterordner übernehmen wills, bestätige die Abfrage mit "Ja". Jetzt solltest du den Ordner sehen können. Aber Achtung: Jetzt werden dir alle Systemordner angezeigt. Also nicht wahllos mit den Dateien und Ordnern spielen oder löschen. Übrigens: Im gleichen Ordner wie "All users" sollte auch ein Ordner mit deinem Windows-Benutzernamen vorhanden sein. Diesen zuerst mal versuchen.

Trotzdem immer eine Sicherheitskopie machen, kann sein, dass manche Add-Ons nicht mehr funktionieren. Hatte ich gerade mit FireFTP und IETab ...

Hallo Kato!

Ja, das kann passieren wenn die Erweiterung die selben Einstellungen ändern wollen wie die Befehle oben. Dadurch, dass den obigen Befehlen "!important;" hinzugefügt wird, haben diese die höchste Priorität. das "!important;" sollte aber nicht weggelassen werden, da sonst einige Befehle wahrscheinlich nicht mehr korrekt oder garnicht dargestellt werden. Eventuell passiert das dann auch nur in bestimmten Situationen.
Aber man kann die entsprechenden Befehle einfach wieder aus der Datei "userChrome.css" löschen. Danach sollte wieder alles funktionieren. Deshalb sollte man ja einen Befehl nach dem anderen testen.

FireFTP habe ich nicht installiert, aber IETab läuft bei mir in der Version 1.3.3 wunderbar mit den obigen Befehlen.
Könnte vielleicht auch ein Konflikt mit einer anderen Firefox Erweiterung vorliegen? Wie äußern sich denn deine Probleme?

Meine Probleme äußern sich inzwischen gar nicht mehr, ich konnte das Ganze zum Glück ja beheben. Leider kann ich dir auch nicht mehr genau sagen, welchen Befehl ich verwendet hatte - bin mir aber recht sicher, dass es irgendetwas mit Fenstergrößen zu tun hatte. Auf jeden Fall konnte ich durch Abänderung des Befehls das Add-On (bzw. ja mehrere) wieder zum Laufen bringen ... war aber auch noch zu Firefox 1.5-Zeiten. Aaach, ist das lang her

Gibt es so eine Möglichkeit auch für die Scrollleiste? Im 2er Fos war die, sogar als Extra Feature - ich glaube Mac-Art - noch möglich. Ich habe nun das Problem, dass die Leiste zwar in einigen Themes normal funktioniert, aber eben genau nicht mehr in meiner gebräuchlichen "Outlook"-Theme.

Meinst du Befehle um die Scrolleiste zu verändern? Ja, da gibt es was.Allerdings ist hierbei noch etwas Bastelarbeit gefragt:

/* Farbe & Style der Scrollbars ändern: */

scrollbar * {
display: -moz-box ! important;
background-color: rgb(255,230,192) ! important; }

scrollbar thumb {
-moz-appearance: none ! important;
background-color: rgb(255,230,192) ! important;
border-style: solid !important;
border-color:black !important; }

scrollbar thumb:hover {
background-color: rgb(255,230,192) ! important;
border-style: solid !important;
border-color:black !important; }

scrollbar scrollbarbutton {
-moz-appearance: none ! important;
background-color: rgb(255,230,192) ! important;
border-style: solid !important;
border-color:black !important; }

scrollbar scrollbarbutton:hover {
background-color: rgb(180,33,36) ! important;
border-style: solid !important;
border-color:black !important; }