Benutzeroberfläche verändern
aus FirefoxWiki, der freien Wissensdatenbank
Um die Farben der Benutzeroberfläche von Firefox zu ändern, speichert man folgende Codes in die userChrome.css (z.B. über die Erweiterung ChromEdit ) ab. Diese Codes funktionieren allerdings nur beim Default-Theme mit Sicherheit, bei anderen Themes (mit Hintergrundgrafiken) muss eventuell noch
background: none !important;
oder
list-style-image: none !important;
in die geschweiften Klammern hinzugefügt werden. Nach einem Neustart (alle Fenster schließen!) von Firefox sind die Änderungen wirksam.
Um das Ganze rückgängig zu machen, einfach die entsprechenden Einträge wieder löschen.
| Inhaltsverzeichnis |
Farben ändern
Symbolleisten
/*Farbe Navigations-Symbolleiste ändern*/
#nav-bar
{background-color: #FF6600 !important;}
/*Farbe Lesezeichen-Symbolleiste ändern*/
#PersonalToolbar
{background-color: # B200CC !important;}
Tabs
Tab-Hintergrund, Downloadmanager-Fenster usw.
/*Farbe Tab-Hintergrund, Downloadmanager-Fenster usw. ändern*/
window,
dialog,
wizard,
page
{background-color: # E500CC !important;}
Aktiver Tab
/*Farbe aktiver Tab*/
tab{-moz-appearance: none !important;}
tab[selected="true"]
{background-color: #9F00E5 !important;}
Schriftfarbe aktiver Tab
/*Schriftfarbe aktiver Tab*/
tab{-moz-appearance: none !important;}
tab[selected="true"]
{color: #ff3333 !important;}
Inaktive Tabs
/*Farbe inaktiver Tabs*/
tab:not([selected="true"])
{background-color: #6699ff !important;}
Inaktive Tabs transparent anzeigen
/* Transparenz inaktive Tabs */
tab:not([selected="true"]) {
-moz-opacity: 0.5 !important; }
Schriftfarbe inaktiver Tabs
/*Schriftfarbe inaktiver Tabs*/
tab:not([selected="true"])
{color: #CCCCFF !important;}
Tabs über der Statusbar anzeigen
/* Tabs über der Statusbar anzeigen */
#content > tabbox { -moz-box-direction: reverse; }
Tab-Liste ausblenden (ab Firefox 2.0)
/* Tab-Liste ausblenden */
.tabs-stack .tabs-alltabs-stack {
display: none !important;
}
Tab-Liste ausblenden (ab Firefox 3.0)
/* Tab-Liste ausblenden */
.tabbrowser-tabs .tabs-alltabs-button {
display: none !important;}
Tab-Scroll-Pfeile ausblenden (ab Firefox 2.0)
/* Tab-Scroll-Pfeile ausblenden */
.tabs-stack .scrollbutton-up,
.tabs-stack .scrollbutton-down-stack {
display: none !important;
}
Menüs
/*Farbe Menüleiste ändern*/
menubar, toolbar, .tabbrowser-tabs
{background-color: #FF6600 !important;}
Schriftfarbe weiterführender Menüs
/*Schriftfarbe weiterführender Menüs ändern*/
menu
{color: #33FF00 !important;}
Schriftfarbe Menü-Inhalte
/*Schriftfarbe Menü-Inhalte ändern*/
menuitem
{color: #33FF00 !important;}
Schriftfarbe weiterführender Menüs spezifisch
/*Schriftfarbe weiterführender Menüs spezifisch ändern*/
menu[label="Extras"]
{color: #3333FF !important;}
Schriftfarbe Menü-Inhalte spezifisch
/*Schriftfarbe Menü-Inhalte spezifisch ändern*/
menuitem[label="Einstellungen..."]
{color: #3333FF !important;}
Hintergrundfarbe weiterführender Menüs spezifisch
/*Hintergrundfarbe weiterführender Menüs spezifisch ändern*/
menulabel="Favoriten"]
{background-color:#FFCC00 !important;}
Hintergrundfarbe Menü-Inhalte spezifisch
/*Hintergrundfarbe Menü-Inhalte spezifisch ändern*/
menulabel="Erweiterungen"]
{background-color:#FFCC00 !important;}
Sonstige
Popup-Menüs
/*Farbe Popup-Menüs ändern*/
menupopup,
#toolbar-context-menu,
#contentAreaContextMenu
{background: #66CCFF !important;}
Statusbar
/*Farbe Statusbar ändern*/
statusbar, statusbarpanel
{background-color: #CEEFBD !important;
color: #000000 !important;
-moz-appearance: none !important;}
/*Farbe Adressleiste ändern*/
#urlbar,
.searchbar-textbox
{-moz-appearance: none !important;
background-color: #66CCFF !important;}
/*Farbe Suchleiste ändern*/
.searchbar-textbox {-moz-appearance: none !important;
background-color: #66CCFF !important;}
Farbe leerer Seiten (about:blank) über about:config ändern.
browser.display.background_color in den Filter eingeben und per Doppelklick den Hexadezimal-Farbwert (http://de.wikipedia.org/wiki/HTML-Farben) ändern.
Lesezeichen Tweaks
Mehrzeilige Lesezeichen-Symbolleiste
/* Multi-row bookmarks toolbar */
#bookmarks-ptf {display:block}
#bookmarks-ptf toolbarseparator {display:inline}
Lesezeichen-Symbolleiste auf Favicons reduzieren
/* In der Lesezeichen-Symbolleiste nur Favicons anzeigen. */
toolbarbutton.bookmark-item>.toolbarbutton-text { display:none !important; }
toolbarbutton.bookmark-item { padding:1px !important; }
Lesezeichen-Namen in der Lesezeichen-Symbolleiste unterhalb der Favicons anzeigen
/* Lesezeichen-Beschriftung unter Symbolen */
#bookmarks-ptf > .bookmark-item { -moz-box-orient: vertical !important; }
Die Breite von Lesezeichen-Sidebar verändern:
/* Sidebar beliebig verkleinern und vergrößern: */
#sidebar
{ max-width: none !important;
min-width: none !important; }
Sehr nützlich z.B. um beim Lesen von RSS-Feeds oder beliebiger Webseiten die ungewünschte Werbung links oder rechts abzuschneiden - man passt die Breite der Lesezeichen-Sidebar so an, dass diese Werbung nicht sichtbar ist ;-)
Die Breite von RSS-Feeds (dynamischen Lesezeichen) verändern:
/*RSS-Feeds breiter machen*/
.bookmark-item[livemark = 'true'] .bookmark-item {max-width:70em !important;}
Bei diesem Beispiel gibt das 70em an, dass ein dynamisches Lesezeichen höchstens so breit wie 70 Zeichen des Buchstabens 'm' lang sein darf.
Adress-Suchleiste
Größe der Suchleiste verändern (funktioniert nicht mit allen Themes)
/* Größe des Suchfeldes verändern */
#search-container, #searchbar {
-moz-box-flex: 1 !important;}
Mit dem Wert 1 kann herumprobiert werden. Er regelt die relative Größe des Suchfeldes zur URL-Leiste, verkleinert man das Fenster, verkleinern sich beide Leisten dynamisch.
Alternativ: Die Erweiterung Resize Search Box (http://www.erweiterungen.de/detail/244) ruft den selben Effekt hervor.
Adressleiste und Suchleiste abrunden (funktioniert nicht mit allen Themes)
/* Adressleiste abrunden */
#urlbar {
-moz-appearance: none !important;
-moz-border-radius: 2px !important;
padding-right: 1px !important; }
/* Suchleiste abrunden */
.searchbar-textbox {
-moz-appearance: none !important;
-moz-border-radius: 2px !important; }
Mit dem Wert 2px kann herumprobiert werden. (Z.B. mal auf 3px ändern.)
Alternativ: Die WellRounded (http://www.erweiterungen.de/detail/245)-Erweiterung ruft den selben Effekt hervor.
Sidebar
Sidebar rechts anzeigen
/* Sidebar auf der rechten Seite anzeigen */
window > hbox { direction:rtl; }
window > hbox > * { direction:ltr; }
Sidebar unten anzeigen
#browser {-moz-box-orient: vertical; -moz-box-direction: reverse}
#sidebar-box {-moz-box-orient: horizontal; -moz-box-direction: reverse}
#appcontent {-moz-box-orient: horizontal}
#sidebar {max-width: inherit !important; min-height: inherit !important}
#sidebar-box > sidebarheader {
-moz-box-orient: vertical;
-moz-box-direction: reverse;
-moz-box-pack: end;
border-left: 1px solid ThreeDHighlight;
margin-left: 1px; }
#sidebar-box .tabs-closebutton > .toolbarbutton-icon {
padding: 4px 2px !important }
#sidebar-title {display: none}
#sidebar-throbber {margin-left: 4px}
Suchfeld Chronik in der Sidebar entfernen
/* Suchfeld in Chronik Sidebar entfernen */
sidebarheader, #history-Panel > hbox { display: none !important; }
Suchfeld Lesezeichen in der Sidebar entfernen
/* Suchfeld in Lesezeichen Sidebar entfernen */
sidebarheader, #bookmarksPanel > hbox { display: none !important; }
Größe der Sidebar beliebig verändern
Standardmäßig hat die Sidebar eine bestimmte Minimal- und Maximalgröße. Diese können sie mit diesem Code aufheben:
/* Sidebar beliebig verkleinern und vergrößern: */
#sidebar
{ max-width: none !important;
min-width: 0 !important; }
Sonstiges
Unerwünschte Menüeinträge ausblenden
Sie können Menüeinträge, die Sie nicht interessieren, einfach ausblenden.
/*Überflüssige Menüeinträge ausblenden*/
menuitem[label="Web-Suche"],
menuitem[label="E-Mail lesen (0 neue)"],
menuitem[label="Neue Nachricht..."],
menuitem[label="Neue Nachricht..."] + menuseparator,
menuitem[label="CookieCuller"],
menu[label="Gehe"]{
display: none !important;}
Menu bezeichnet das ganze Menü (z.B. Gehe); menuitem bezeichnet eine bestimmte Option innerhalb eines Menüs. Mit + menuseparator wird eine vohandene Trennlinie ausgeblendet.
Die kursiv geschriebenen Einträge sind als Beispiel zu verstehen und müssen an Ihre Bedürfnisse angepasst werden.
Beinhaltet ein Menüeintrag Umlaute, so werden diese von einigen Editoren in einem falschen Zeichensatz (http://de.wikipedia.org/wiki/Zeichensatz) in der userChrome.css gespeichert, weshalb diese Einträge weiterhin angezeigt werden. Um diese Einträge auszublenden, muss man wie bei den Trennlinien vorgehen, hinter dem Plus-Zeichen aber menuitem statt menuseparator verwenden. Oder man speichert bei Umlauten z.B. im UTF-8 Format.
Alternativ: Mit der Menu Editor (http://www.erweiterungen.de/detail/37)-Erweiterung lassen sich ebenfalls Menüeinträge (auch Kontextmenü) ausblenden.
Größe des Optionen- (Einstellungen-) Fensters verändern
Bei der Verwendung einiger Themes kann es vorkommen, dass Elemente in diesem Fenster "abgeschnitten" werden. Dann kann das Fenster auf eine passende Größe gebracht werden . In diesem Beispiel: Breite 600 Pixel, Höhe 400 Pixel.
/* Größe des Einstellungen-Fensters verändern */
#BrowserPreferences {width: 600px !important;
height: 400px !important;}
Das Wort 'Go' des Go-Button entfernen
Wenn die Symbolleiste angepasst wird und der Text von den Symbolen ausgeblendet, dann bleibt beim Go-Button das Wort 'Go' sichtbar. Mit diesem Code wird das 'Go' auch ausgeblendet:
/* Das Wort 'Go' des Go-Button entfernen */
#go-button .toolbarbutton-text { display: none !important; }
#go-button .toolbarbutton-icon { margin-top: 2px !important;
margin-bottom: 1px !important; }
#go-button .toolbarbutton-icon { margin-right: 1px !important; }
Beschriftung des Zurück-Buttons immer anzeigen
Mit folgendem Code können Sie den Text des Zurück-Buttons auch im Symbol-Modus anzeigen lassen. Dadurch wird der Knopf größer und einfacher anzuklicken.
/*Beschriftung des Zurück-Buttuns immer anzeigen*/
toolbar[mode="icons"] #back-button > toolbarbutton
{-moz-box-orient:horizontal !important;}
toolbar[mode="icons"] #back-button > toolbarbutton > label
{display:-moz-box !important; padding-left:4px !important;}
Stop- und Reload-Buttons zusammenlegen
Damit verschwindet der Stop-Button, wenn die Seite fertig geladen ist. Andersherum verschwindet der Reload-Button, wenn die Seite gerade geladen wird. Der Stop- muss vor dem Reload-Button sein.
/* Stop-Reload-Button */
/* Stop muss vor Reload-Button sein! */
#stop-button:not([disabled="true"]) { display: -moz-box !important; }
#stop-button[disabled="true"] { display: none !important; }
#stop-button[disabled="true"] + #reload-button { display: -moz-box !important; }
#stop-button:not([disabled="true"]) + #reload-button { display: none !important; }
Tab-Leiste links oder rechts anzeigen
Um die Tab-Leiste links anzuzeigen, fügen Sie folgenden Code in die userChrome.css ein:
/* Tabs auf der linken Seite */
.tabbrowser-strip {
-moz-box-orient: vertical;/* note: you can set this to -moz-scrollbars-vertical instead, but then the scrollbar will
*always* be visible. this way there is never a scrollbar, so it behaves like the tab bar normally does */
overflow: -moz-scrollbars-none;
}
.tabbrowser-tabs {
min-width: 10ex; /* you may want to increase this value */
-mox-box-pack: start;
-moz-box-align: start;
-moz-box-orient: horizontal;
}
.tabbrowser-tabs > hbox {
-moz-box-align: stretch;
-moz-box-orient: vertical;
-moz-box-pack: start;
}
.tabbrowser-tabs > hbox > tab {
-moz-box-align: start;
-moz-box-orient: horizontal;
}
/* remove the close-tab button. trust me, you need to do this. */
.tabbrowser-tabs > stack {
display: none;
}
Um die Tab-Leiste auf der rechten Seite anzuzeigen, fügen Sie zu obigem Code noch folgendes hinzu:
#content > tabbox {
-moz-box-orient: horizontal;
}
Siehe auch
- Sidebar anpassen
- Throbber anpassen
- ChromEdit - Erweiterung zur Bearbeitung der userChrome.css, userContent.css, user.js und prefs.js
- userChrome.css
Weblinks
- ColorZilla (http://www.erweiterungen.de/detail/141) Farbpipette als Erweiterung für Firefox.
- ColorPad (http://www.webmasterfree.com/colorpad.html) Farbpipette für den ganzen Desktop.
- Farbpalette, Farben-Hexa-Code, HTML (http://www.farbpalette.de/)
- Hexadezimale Farbwerte in HTML (http://users.ntua.gr/el00025/colours.htm)
- Wikipedia - Standardisierte Farbnamen (http://de.wikipedia.org/wiki/Webfarben)
