Firefox "userChrome.css" und "userContent.css" - Nützliche Anpassungen

Norbert

Moderator
Teammitglied
Firefox "userChrome.css" und "userContent.css" - Nützliche Anpassungen

Den aktiven Tab besser hervorheben

Mit der Datei userChrome.css lässt sich das Aussehen der Benutzeroberfläche von Firefox mit Hilfe von CSS (Cascading Style Sheets) individuell verändern.
Sollte die Datei noch nicht vorhanden sein, muss sie im Firefox-Profilordner erstellt werden:

%APPDATA%\Mozilla\Firefox\Profiles\<Profilordner>\chrome\
(%APPDATA% = C:\Dokumente und Einstellungen\<Username>\Anwendungsdaten)

Im folgenden wird der aktive Tab mit einem Rahmen versehen, um ihn besser von den inaktiven Tabs zu unterscheiden. Der Rahmen kann beliebig eingefärbt (...-colors: black) und in unterschiedlichen Linienstärken und -stilen (border: ?px solid) dargestellt werden. Dazu einfach den unten stehenden Code kopieren und in die userChrome.css einfügen. Anschließend die Datei speichern und den Firefox neu starten. Dieser Codeabschnitt erzeugt eine schwarze durchgezogene Linie mit einer Stärke von 2 Pixeln um den aktiven Tab:
Code:
/* Aktiven Tab besser hervorheben */
.tabbrowser-tab[selected="true"] {
-moz-border-top-colors: black !important;
-moz-border-left-colors: black !important;
-moz-border-bottom-colors: black !important;
-moz-border-right-colors: black !important;
border: 2px solid !important;
}
Dieses einfache Beispiel zeigt, dass man auch mit simplen Bordmitteln anstatt aufwendiger Addons die Optik vom Firefox verschlimmbessern kann.:D

Schwarzer Rahmen mit 1 und 2 Pixel Stärke:
 

Anhänge

  • TabRahmen 1px.jpg
    TabRahmen 1px.jpg
    26,5 KB · Aufrufe: 1.630
  • TabRahmen 2px.jpg
    TabRahmen 2px.jpg
    27,7 KB · Aufrufe: 1.632
Zuletzt bearbeitet:
AW: Firefox "userChrome.css" - Nützliche Anpassungen

Ja man kann mit der userChrome.css allerhand an und einstellen.
Vieles ist dabei nur Spielerei.
Ich habe mich nur auf wenige Einträge beschränkt und bin damit ganz zufrieden.
Schlankes Aussehen sowie ein Hintergrundbild für die Leisten. :)
 
AW: Firefox "userChrome.css" - Nützliche Anpassungen

Falls sich jemand fragen sollte, wie man an das entsprechend DOM kommt:
https://addons.mozilla.org/de/firefox/addon/6622
https://developer.mozilla.org/En/DOM_Inspector

Wenn der installiert wurde, unter "Extras" aufrufen.
Das Browserfenster findet sich unter "Datei" > "Chrome-Dokument inspizieren".
Bisschen nach unten scrollen und "window" suchen, dort in der Untergruppe
"toolbox" (Schaltflächen), "hbox" und "vbox" rumklick0rn - es blinkt dann
mit einem roten Rahmen auf, da durch lassen sich gewünschte Klassen bzw ID finden.
Die userchrome.css ist eine CSS-Datei, Klassen und ID werden genutzt.
class = . und id = #
Manchmal muss es die ID sein, manchmal die class (in die entsprechenden Spalten schauen).
 

Anhänge

  • fx_domi.png
    fx_domi.png
    93,8 KB · Aufrufe: 1.915
AW: Firefox "userChrome.css" - Nützliche Anpassungen

190 Seiten in dem einen Link auf camp-firefox.de, meine Fresse, da kann man ja stundenlang stöbern.:eek:
Da wollen wir uns doch lieber zurückhalten, nicht dass der Thread hier wegen Überfüllung dicht gemacht wird.:ROFLMAO:
Brummelchen hat durch dieses Thema ein paar feine Links präsentiert,(y) die ich noch etwas ergänzen möchte:
Auf die Idee, dass es den DOM Inspector auch als Firefox-Addon geben könnte, kam ich noch gar nicht.
Feine Sache, werde ich gleich mal in der DLS einbringen.

Nun, wenn aus diesem begonnenem Versuch eines Tutorials eine nützliche Link-Sammlung mit zusätzlichen Tipps zum Thema wird, ist das ja sicher auch recht.

Vielen Dank für die tollen Tipps und Links
Norbert:)
 
Zuletzt bearbeitet:
AW: Firefox "userChrome.css" - Nützliche Anpassungen

Norbert - es spricht nichts dagegen, die Essentials daraus zu übernehmen und auch diverse
Anfragen dazu zu beantworten. Du hast allerdings direkt vor Augen, wohin das führen kann :D

Meine userchrome ist ja auch nicht unbefleckt, allerdings sind das eher harmlose
Einträge, die mit den Einträgen dort eher wenig bis nichts gemein haben. Die schrauben
da drüben an kompletten Webseiten und Aussehen von Firefox über die userchrome,
was ich persönlich für overkill halte. Und von build zu build muss da nachgebessert
werden, weil Firefox jedesmal selbst schon Änderungen im DOM mit sich bringt.
D.h. man sollte schon dazuschreiben, welcher Firefox genutzt wird. Auch TMP selbst
bringt schon Änderungen mit, d.h. dein Eintrag könnte damit schon wieder nutzlos sein.
Oder mit ColorfullTabs - oder... man muss das Gesamtsystem betrachten - und
deswegen auch die 190 Seiten.
 
AW: Firefox "userChrome.css" - Nützliche Anpassungen

Stimmt, und gerade weil weder ColorfulTabs noch Tab Mix Plus die gezeigte optische Modifikation bietet, hatte ich sie hier vorgestellt.

Auch gibt es eine kleine Inkompatibilität zwischen den beiden Erweiterungen, was den Hintergrund der gesamten Tab-Leiste betrifft. Da anscheinend TMP nach ColorfulTabs geladen wird, bleibt die Option "Enable a background image for Tabs" von ColorfulTabs wirkungslos. Das lässt sich zwar wieder einschalten, ist beim nächsten Firefox-Start aber wieder weg. Bis zur TMP-Version 0.3.7pre.080816 gab es dieses Problem noch nicht. Wo nun der Code in den neueren TMP-Versionen geändert werden muss, hab ich in dem umfangreichen Quellcode noch nicht gefunden.

Aber auch hier hilft ein Eintrag in der userChrome.css (hexxxlein hat's ja anscheinend schon so gemacht) und das Abschalten der Option in ColorfulTabs.
verborgener Text:
Code:
/* Hintergrundbild für die Tableiste */
.tabbrowser-tabs {
background-image: url("file:///[I]<Pfad>[/I]/fuzzy-lightgrey.jpg") !important;
background-color: none !important;
}
 
Zuletzt bearbeitet:
AW: Firefox "userChrome.css" - Nützliche Anpassungen

Nun, ich muss gestehen, ich hab auch nicht einfach so in der userChrome rumgefummelt. Ich musste mich dazu ebenfalls viel, viel belesen.
Was dann letztendlich Sinn oder eben keinen Sinn macht, musste ich mir auch erklären lassen. :)

Edit: 2 Einträge für ein Hintergrundbild. Symbol bzw. Lesezeichenleisten und Statusleiste, wobei ich das Bild eher dezent und farblich angepasst gebastelt habe.
 
AW: Firefox "userChrome.css" - Nützliche Anpassungen

>> "Enable a background image for Tabs"

"Hintergrundbild für Tabs verwenden" ok, mein CT spricht deutsch.
Halte ich aber eher für ne nette Spielerei statt sinnvoll. CT hatte
in den früheren Versionen Bilder für die Farben, heute per CSS.
Und je nach anderen Einstellungen, auch grad in TMP, konnte man
die Tabs lesen oder nicht. CT verändert auch die Transparenz (Opacity)
für inaktive Tabs, alles rückt nach hinten ab.

Hintergrundbild für die Leisten:
oben
Code:
menubar, statusbar, toolbox, toolbar, .tabbrowser-tabs, .searchbar, findbar, sidebarheader{
  background-image: url("bild.bmp") !important;
  border-style: none !important; /* Toolbars without Borders */
}
unten
Code:
statusbarpanel {
 -moz-appearance: none !important;
  background-image: url("bild.bmp") !important;
}
Dieses !important sagt aus, dass es zwingend ist.
Ohne dem kann es verwendet werden, wird aber nicht immer.

Vielleicht sieht ja jemand das hier:
Code:
/*Tabs ohne Textrahmen */
tab:focus .tab-text
{
   border-style: none !important;
   padding-left: 1px !important; /* sonst hüpft der Text beim Anklicken */
}
Oder die Zwischenlinien ausblenden, die sich mit einem Hintergrundbild ergeben:
Code:
/*Begrenzungslinien weg
#toolbar-menubar {min-height: 12px !important; border: none !important;}
#nav-bar {border: none !important; padding: 0px !important;}
#PersonalToolbar {border: none !important;}
#navigator-toolbox {border-bottom-width: 0px !important;}
.tabbrowser-strip {border: none !important; }
#tabbar {border: none !important; }
*/

/*Begrenzungslinien weg 2*/
toolbar, #nav-bar, #PersonalToolbar, statusbarpanel {
  border: none !important;
 -moz-appearance: none !important;
}
RSS-Feed-Button und Such-Lupe weg
Code:
textbox#urlbar #feed-button, #search-view {
  display: none !important;
}
Zwischenleiste zwischen Webseite und Strg+H (Sidebar) weg
Code:
#sidebar-splitter {
    margin-right: -5px; !important;
}
Das sind aber alles Anpassungen, die hier im Gesamtkontext zu sehen sind
für Firefox 3.5 (!) (für Firefox 3.0 sieht das etwas anders aus).

Im Anhang die Unterschiede bzw Werdegang zu Firefox 2,3,3,5

Fx2
https://www.supernature-forum.de/at...ser-firefox-3-0-und-updates-firefox_hoehe.png
Dann davor mal so, danach Fx3/3.5, die sich kaum unterscheiden.
Grund war damals, dass es das Spuler-Thema "Smoke" nicht mehr für den
3er gab und ich komplett umstellen musste. Seitdem ist das "Kempleton".
Daher auch diese Einträge in der userchrome, die diese Leisten oben
sehr schmal anzeigen lassen und mir maximalen Platz ohne F11 bieten.
 

Anhänge

  • fx_proxo.png
    fx_proxo.png
    26,1 KB · Aufrufe: 608
  • fx30_leiste.png
    fx30_leiste.png
    25,9 KB · Aufrufe: 564
  • fx35_leiste.png
    fx35_leiste.png
    60,2 KB · Aufrufe: 553
AW: Firefox "userContent.css" - Nützliche Anpassungen

Überall verfolgt einen die Google Suchmaschine, jetzt auch seit der Version 31 vom Firefox in dessen Tab-Vorschau und frißt den Platz weg. Eine einfache Möglichkeit, die Eingabezeile in den Einstellungen abzuschalten, gibt es jedoch nicht. Zeit also, diesen alten Thread mal wieder auszugraben.

Und so geht es:

about:support in die Adresszeile vom Firefox eingeben und Enter drücken,
beim Profilordner auf "Ordner anzeigen" klicken (Bild),
im nun geöffneten Windows-Explorer den Ordner chrome anwählen,
dort dann die Datei userContent.css mit einem Text-Editor (Windows-Editor) öffnen.
Sollte sie nicht vorhanden sein, einfach eine neue Textdatei mit diesem Namen erstellen.

Dort die folgenden Zeilen einfügen und die Datei speichern:
Code:
@namespace url(http://www.w3.org/1999/xhtml);

[COLOR="#008000"]/* Suchmaschine in der Tab-Vorschau abschalten */[/COLOR]
@-moz-document url("about:newtab") {
    #newtab-search-container { display: none !important; }
}
Sollte die erste Zeile (@namespace...) schon vorhanden sein, muss sie nicht nochmal eingefügt werden.

Nach dem nächsten Neustart vom Fuchs ist die Googlesuche aus der Tab-Vorschau verschwunden.
 

Anhänge

  • FF support.PNG
    FF support.PNG
    31,2 KB · Aufrufe: 736
AW: Firefox "userChrome.css" - Nützliche Anpassungen

Wer sich effektiv mit Styles beschäftigt oder beschäftigen will, kommt um Stylish nicht herum.
https://addons.mozilla.org/de/firefox/addon/stylish/

- Zum einen ist eingegebener Code sofort nutzbar,
- Stylish beinhaltet einen Code-Wächter, Fehler werden sofort angezeigt,
- Firefox muss nicht neu gestartet werden (schlechte Idee, wenn noch diverse Webseiten und Antworten offen sind)
- Styles können chirurgisch angepasst werden, ist per userchrome nicht machbar.
- Firefox könnte bei userchrome durch falsch zugeordnete Styles abstürzen
- manche Styles sind in der userchrome nicht machbar oder werden nicht ausgeführt. (zB für about:blank)
- eine Datei für alles = unübersichtlich

Styles für Firefox müssen explizit ein /* AGENT-SHEET */ als allererste Zeile beinhalten
https://github.com/JasonBarnabe/stylish/issues/162
https://github.com/JasonBarnabe/stylish/wiki/Overwriting-page-styles#agent_sheet

AGENT SHEET
USER SHEET
AUTHOR SHEET
Assigning property values, Cascading, and Inheritance

MfG
 
AW: Firefox "userChrome.css" und "userContent.css" - Nützliche Anpassungen

Vorwort:
In der Tab-Seitenvorschau werden seit der Version 33.0 die Vorschaubilder nicht mehr skaliert, sie haben immer eine feste Größe.
Weiterlesen...

Eigentlich mache ich ja keine Crosspostings, den gleichen Beitrag hatte ich schon kurz nach der Veröffentlichung vom Firefox 33.0 bei Dr.Windows geschrieben, aber hier mache ich mal der Vollständigkeit halber eine Ausnahme:

Nach dem Durchlesen des Artikels FF 33 - weniger Tabreihen und Tabspalten im Camp Firefox und ein paar eigenen Experimenten mit den Werten habe ich nun ein annehmbares Ergebnis für die Tab-Vorschau erzielt. Die Größe der Kacheln wird sogar wieder den in about:config eingestellten Spalten und Zeilen angepasst. Im Folgenden beschreibe ich das mit den Werten mal an meinem Beispiel, wo die Fenstergröße vom Inhalt etwa 1515 x 1010 Pixel beträgt. Hierzu müssen zwei neue Einträge der Datei userContent.css hinzugefügt werden, und zwar wie in obigem Link auch zu lesen, #newtab-grid und .newtab-cell.

Zunächst stellt man in #newtab-grid die Höhe ein, welche maximal der Fensterhöhe vom Inhalt entsprechen sollte, hier also 1010 Pixel. Es darf auch etwas weniger sein, wir sind ja hier nicht beim Metzger.

Um nun eine möglichst gleichmäßige Verteilung der Kacheln ohne zu große freie Flächen zu bekommen, wird zunächst in .newtab-cell die gewünschte Größe der Kacheln eingestellt, hier 200 x 125 Pixel. Dabei sollte der Wert für ein optimales Ergebnis dem Seitenverhältnis des Monitors angepasst sein, in diesem Fall also 16:10.

userContent.css:
Code:
@namespace url(http://www.w3.org/1999/xhtml);

/* Suchmaschine in der Tab-Vorschau abschalten */
@-moz-document url("about:newtab") {
    #newtab-search-container { display: none !important; }
}

[COLOR="#008000"]/* Spalten, Zeilen und Bildgröße in der Tab-Vorschau anpassen */[/COLOR]
#[COLOR="#666600"]newtab-grid[/COLOR] {
    [COLOR="#FF0000"]height[/COLOR]: 1010px !important;
    [COLOR="#FF0000"]max-height[/COLOR]: 1010px !important;
}
.[COLOR="#666600"]newtab-cell[/COLOR] {
    [COLOR="#FF0000"]height[/COLOR]: 125px !important;
    [COLOR="#FF0000"]width[/COLOR]: 200px !important;
}

Zu guter Letzt wird nun noch in about:config die gewünschte Anzahl der Spalten und Zeilen festgelegt, wobei der der Zeilenwert um 1 oder 2 größer als die tatsächlich angezeigten Zeilen sein sollte, ansonsten verschiebt sich die letzte Zeile ein bisschen nach rechts.

browser.newtabpage.columns = 6
browser.newtabpage.rows = 7

Damit ergibt sich bei mir eine Matrix von 6 x 6 Vorschaubildern, groß genug und auch nicht zu klein, wie ich finde.

Nach Änderungen in der userContent.css ist ein Neustart vom Firefox erforderlich, nach den Änderungen in about:config jedoch nicht.


Natürlich kann man das Ganze auch umgekehrt machen und zuerst die Spalten- und Zeilenanzahl festlegen, um danach Bildgröße und Höhe des darzustellenden Inhalts solange zu verändern, bis es passt. Mir erschien die beschriebene Reihenfolge jedoch am einfachsten, das muss halt jeder selbst mal probieren.
Und wer das Addon "Stylish" schon hat, mag es damit vielleicht einfacher finden, ich kenne es jedoch noch nicht und habe es mir gerade erst installiert.

Screenshot - Vorher / Nachher:
 
AW: Firefox "userChrome.css" und "userContent.css" - Nützliche Anpassungen

wird nun noch in about:config die gewünschte Anzahl der Spalten und Zeilen festgelegt

browser.newtabpage.columns = 6
browser.newtabpage.rows = 7
Also wenn schon, dann sowas nur per user.js und nicht in die prefs (about:config) - diese Datei lässt sich sichern, bei der prefs.js schauen die meisten wie ein Schweins ins Uhrwerk (nichtssagend).

user_pref("browser.newtabpage.columns", 6);
user_pref("browser.newtabpage.rows", 7);

Wer AdwCleaner nutzt, sollte allerdings aufpassen, sonst ist die mit weg ;)

MfG
 
AW: Firefox "userChrome.css" und "userContent.css" - Nützliche Anpassungen

Also wenn schon, dann sowas nur per user.js ...
Eine ganz hervorragende Idee, das erhöht auch die Übersichtlichkeit betreffs den eigenen Änderungen erheblich und die ist bei mir sogar noch leer.

Danke dir. :)
 
Oben