Ergebnis 1 bis 15 von 15
Danke Übersicht4Danke
  • 1 Beitrag von Norbert
  • 2 Beitrag von ditto
  • 1 Beitrag von ditto
Thema: 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 ...
  1. #1
    Moderator Avatar von Norbert
    Registriert seit
    25.02.08
    Ort
    β Aquarii
    Beiträge
    7.288

    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.

    Schwarzer Rahmen mit 1 und 2 Pixel Stärke:
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken -tabrahmen-1px.jpg   -tabrahmen-2px.jpg  
    Geändert von Norbert (04.11.14 um 19:28 Uhr) Grund: Seitentitel erweitert
    lorenzmeyer bedankt sich.

  2.   Anzeige

     
  3. #2
    Brummelchen

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

    Bevor du dich zu sehr auf eine Sammlung einschiesst:
    Firefox Anpassungen -> http://www.camp-firefox.de/forum/viewforum.php?f=16

    Bedingt dadurch wurde das mörderlange Thema (190 Seiten) dazu auch geschlossen:
    http://www.camp-firefox.de/forum/vie...hp?f=4&t=35355
    Ich glaub, da steht vieles drin, wovon andere nicht mal träumen.

    Passend dazu: userchrome.js
    http://www.camp-firefox.de/forum/vie...hp?f=4&t=45294

  4. #3
    Moderator Avatar von hexxxlein
    Registriert seit
    29.04.01
    Ort
    Hogwarts
    Beiträge
    21.609

    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.

  5. #4
    Brummelchen

    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).
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken -fx_domi.png  

  6. #5
    Moderator Avatar von Norbert
    Registriert seit
    25.02.08
    Ort
    β Aquarii
    Beiträge
    7.288

    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.
    Da wollen wir uns doch lieber zurückhalten, nicht dass der Thread hier wegen Überfüllung dicht gemacht wird.
    Brummelchen hat durch dieses Thema ein paar feine Links präsentiert, 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
    Geändert von Norbert (16.08.09 um 16:53 Uhr) Grund: Liste erweitert

  7. #6
    Brummelchen

    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

    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.

  8. #7
    Moderator Avatar von Norbert
    Registriert seit
    25.02.08
    Ort
    β Aquarii
    Beiträge
    7.288

    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.
    Beispiel:
    Code:
    /* Hintergrundbild für die Tableiste */
    .tabbrowser-tabs {
    background-image: url("file:///<Pfad>/fuzzy-lightgrey.jpg") !important;
    background-color: none !important;
    }
    Geändert von Norbert (16.08.09 um 15:57 Uhr) Grund: Code nachgereicht

  9. #8
    Moderator Avatar von hexxxlein
    Registriert seit
    29.04.01
    Ort
    Hogwarts
    Beiträge
    21.609

    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.

  10. #9
    Brummelchen

    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/att...efox_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.
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken -fx_proxo.png   -fx30_leiste.png   -fx35_leiste.png  

  11. #10
    Moderator Avatar von hexxxlein
    Registriert seit
    29.04.01
    Ort
    Hogwarts
    Beiträge
    21.609

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

    >> "Enable a background image for Tabs"
    Wird ja immer verrückter... muss ich nicht haben. Die Tableiste hat doch bereits ein Hintergrundbild.

  12. #11
    Moderator Avatar von Norbert
    Registriert seit
    25.02.08
    Ort
    β Aquarii
    Beiträge
    7.288

    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);
    
    /* Suchmaschine in der Tab-Vorschau abschalten */
    @-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.
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken -ff-support.png  

  13. #12
    ditto

    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/styl...es#agent_sheet

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

    MfG
    Norbert und Jonn bedanken sich.

  14. #13
    Moderator Avatar von Norbert
    Registriert seit
    25.02.08
    Ort
    β Aquarii
    Beiträge
    7.288

    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; }
    }
    
    /* Spalten, Zeilen und Bildgröße in der Tab-Vorschau anpassen */
    #newtab-grid {
        height: 1010px !important;
        max-height: 1010px !important;
    }
    .newtab-cell {
        height: 125px !important;
        width: 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:

  15. #14
    ditto

    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
    Norbert bedankt sich.

  16. #15
    Moderator Avatar von Norbert
    Registriert seit
    25.02.08
    Ort
    β Aquarii
    Beiträge
    7.288

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

    Zitat Zitat von ditto Beitrag anzeigen
    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.

Ähnliche Themen

  1. Firefox 3.01: Kein "Speichern unter", keine Downloads mehr
    Von Supernature im Forum Allgemeine Computerfragen
    Antworten: 14
    Letzter Beitrag: 02.09.08, 17:55
  2. Tipp: Mozilla/Firefox-Erweiterungen "Download with" + "Flashgot"
    Von Supernature im Forum Allgemeine Computerfragen
    Antworten: 8
    Letzter Beitrag: 10.11.04, 16:01
  3. CSS: 1. Schriftgröße "pt" oder "px" ? | 2. gute CSS Referenz ?
    Von Philipp im Forum Programmierung & Webdesign
    Antworten: 3
    Letzter Beitrag: 28.08.04, 14:09

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Search Engine Friendly URLs by vBSEO ©2011, Crawlability, Inc.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55