UserChrome.css

aus FirefoxWiki, der freien Wissensdatenbank

Mit der Datei userChrome.css lässt sich das Aussehen der Benutzeroberfläche von Firefox mit Hilfe von CSS (http://de.wikipedia.org/wiki/Cascading_Style_Sheets) individuell verändern.

Inhaltsverzeichnis

1 Allgemeines 2 CSS-Codes 3 Beispiele für das Anpassen der Benutzeroberfläche 4 Siehe auch 5 Weblinks

Allgemeines

Da die Datei nicht standardmäßig vorhanden ist, muss sie manuell im Profilordner im Verzeichnis chrome erstellt werden.

Vorhanden ist allerdings eine Datei mit dem Namen userChrome-example.css. In diesem Stylesheet befinden sich bereits einige auskommentierte (http://de.wikipedia.org/wiki/Kommentar_%28Programmierung%29) Beispiele.

Um die Datei zu nutzen, muss sie in userChrome.css umbenannt werden.

Der gewünschte Code muss dann am Ende eingefügt werden.

CSS-Codes

Die Datei userChrome.css hat die Form

Selektor { Style-Definition(en) }
Selektor { Style-Definition(en) }
...

Ein Selektor beschreibt die zu verändernden Elemente, und die Style-Definitionen beschreiben die zu tätigenden Änderungen. Innerhalb der Datei können an beliebiger Stelle Kommentare auftreten:

/* einzeiliger Kommentar */
/* mehrzeiliger
   Kommentar */

Zeilenumbrüche und mehrfache Leerzeichen werden ignoriert.

Die userChrome.css befolgt somit die "normale" CSS (http://de.wikipedia.org/wiki/Cascading_Style_Sheets)-Syntax. Ihre CSS-Regeln werden allerdings nicht auf HTML-Dokumente angewandt, sondern auf die in XML (http://de.wikipedia.org/wiki/XML_User_Interface_Language) geschriebene Benutzeroberfläche("Chrome") des Browsers.

Um gezielt Selektoren für den Firefox zu finden, ist der DOM Inspector überaus praktisch. Informationen dazu in englischer Sprache finden sich hier (http://www.eightlines.com/neil/mozskin/findstuff.html). Weitere Informationen zu CSS-Selektoren gibt es auf der Seite von Michael Jendryschik (http://jendryschik.de/wsdev/einfuehrung/css/selektoren#universalselektor).

Neben den in HTML generell erlaubten Style-Definitionen (http://www.css4you.de/css-a-z.html) sind auch die zahlreichen CSS-Erweiterungen von Mozilla (http://developer.mozilla.org/en/docs/Mozilla_CSS_Extensions) in der userChrome.css erlaubt.

Häufig ist das Schlüsselwort !important hinter jeder Style-Definition notwendig, um die Standardwerte zu überschreiben. Siehe hierzu die Erläuterung bei selfhtml.org (http://de.selfhtml.org/css/formate/kaskade.htm#ursprung).

Beispiele für das Anpassen der Benutzeroberfläche

Beispiele für das Anpassen der Benutzeroberfläche sind im Artikel 'Benutzeroberfläche verändern' vorhanden.

Unter anderem:

• Farben von Tabs, Adressleiste usw. verändern
• Lesezeichen Tweaks
• Sidebar verändern
• Grösse von Adress- oder Suchleiste verändern

Siehe auch

• ChromEdit - Erweiterung zur Bearbeitung der userChrome.css, userContent.css, user.js und prefs.js
• userContent.css

Weblinks

• Customizing auf mozilla.org (http://www.mozilla.org/unix/customizing.html) viele Beispiele in englischer Sprache
• Application styles auf userstyles.org (http://userstyles.org/style/list/app) von Benutzern zur verfügung gestellte userChrome.css-Codes
• userChrome.css-Codes gesucht! (http://www.firefox-browser.de/forum/viewtopic.php?t=35355) - Sammelthread im Firefox-Forum