Mehrzeilige Tableiste für aktuelle Firefox-Versionen

    Firefox-Version
    FF73.0
    Betriebssystem
    Win10

    Neues Update (26.11.2024):

    Updateverlauf:


    :!:Wichtig: Dieses Skript wird nicht mehr weiterentwickelt. Die letzte Firefox-Version, die noch unterstützt wird ist 137.:!:


    Für aktuelle Versionen ab FF133+:

    Das Script richtet sich in erster Linie an Nutzer, die sich nicht mit CSS beschäftigen wollen, aber trotzdem eine mehrzeilige und optisch angepasste Tableiste nutzen möchten.

    Diese neue Version besteht ausschließlich aus einem User-JavaScript. Es sind keine zusätzlichen CSS-Eintragungen mehr nötig!

    In den 'UserSettings' (und bitte nur diesen Teil editieren!) sind sehr viele kommentierte Einstellmöglichkeiten, mit denen die Optik und Funktionalität angepasst werden können (z.B.: 6 Möglichkeiten, die Tableiste zu positionieren, u.a, links und rechts, eigene Hintergründe, Farben, seitenweises/zeilenweises-Scrollen, Tab-Wheel-Navigation um mit dem Mausrad durch die Tabs zu navigieren uvm.)

    Hier ein paar Screenshots und eine Animation zu den Optionen

    Fünf 'fixe'-Positionen und eine 'Autopopup'-Position für die Tableiste:

    Unterschiedliche Größen(mit der Möglichkeit auch Schrift und Icons anzugleichen):

    Sehr viele Optionen zur optischen Anpassung:

    Hier ca. 300 Tabs, die nur bei Bedarf herausfahren(Autohide), durch Einstellung der vertikalen Breite:

    Wichtig:

    Alles ,was vorher in der 'userChrome.css' für die Tabs/Tableiste angepasst wurde, muss zum Testen entweder auskommentiert oder entfernt werden. Sonst wird es ein heilloses Durcheinander geben. Am besten anfangs ganz ohne 'userChrome.css' testen.

    Auf gar keinen Fall dürfen die Größenangaben und Abstände für die Tabs, sowie die Anzahl der sichtbaren Reihen in der 'userChrome.css' neu definiert werden. Dann nämlich funktioniert das Scrollen nicht mehr richtig...

    Hier das Script (Inhalt kopieren und als Text-Datei 'MultiRowTabs.uc.js' ins 'chrome'-Verzeichnis einfügen):

    Links und Erklärungen zum Thema User-JavaScripts:

    'User-JavaSkripts' um dem FireFox neue Funktionalität hinzuzufügen oder zu verändern:

    2002Andreas hat eine übersichtliche Zusammenfassung aller notwendigen Quellen verfasst um JavaScripts zum Laufen zu bringen.

    Dort befindet sich auch der Link auf die bebilderte Anleitung von Endor, die ich wirklich empfehlen kann.

    und auch eine Videoanleitung von Zitronella.

    Für Eilige hier noch eine Kurzfassung :):

    QuickStart: User-JavaSkripte

    1 ) firefox-anpassungen.zip herunterladen und entpacken.

    2 ) Entpackte Dateien/Verzeichnisse in folgende Verzeichnisse verteilen:

    - Datei config.js und das gesamte Verzeichnis userChromeJS werden in den Firefox-Installationsordner (standardmäßig unter Windows ist das 'C:\Programme\Mozilla Firefox' unter Linux ist es '/usr/lib/firefox' ) kopiert.

    - Datei config-prefs.js wird im Firefox-Installationsordner(s.o.) in das Unterverzeichnis '\defaults\pref' kopiert.

    - Datei userChrome.js (befindet sich in der entp. zip-Datei im Ordner 'chrome') wird in das 'chrome' Verzeichnis des Profil-Ordners kopiert (an die Stelle, wo sich auch die 'userChrome.css' befindet).

    3 ) Danach unbedingt den FireFox neu starten!

    4 ) Fertig!

    Gruß BrokenHeart

    "success has many fathers, failure is an orphan"

    85 Mal editiert, zuletzt von BrokenHeart (8. April 2025 um 11:24) aus folgendem Grund: Neue Version!

    Auch wenn ich die beschriebenen Codes bzw Scripte nicht nutze:

    Vielen Dank für diese hervorragend zusammengestellte Anleitung! :) :thumbup:

    PS: Du weisst aber schon, das du jetzt für die jeweilige Aktualität verantwortlich bist? ;)

    Hallo Broken Heart

    Wollte deine CSS mit der CSS kombinieren welche die Tabs wieder nach unten bringt.

    Beitrag 1:
    Fx 71 - Tableiste unten

    Die erste Tabreihe ist dann zwar unten, die nächsten Tabreihen schieben sich aber nach oben über NAV und
    Favoriten.

    Gibt es eine Möglichkeit die zusätzlichen Tabreihen nach unten zu öffnen?

    Hallo,

    genau die Frage hatte ich auch schon gestellt, blieb aber unbeantwortet, daher gehe ich davon aus, dass das momentan nicht geht. Auch bei mir schieben sich dann die Tabreihen bis in die Menüleiste. Da ich dort Icons habe, sind die nicht zu gebrauchen. Vermutlich muss man die Abweichungen wieder korrigieren. Bin aber sicher, dass das die Experten bald hinbekommen. Allerdings gewöhnt man sich schnell wieder an die Tableiste oben. Wenn's nicht anders geht, werde ich es so lassen. Hauptsache die Tabs sind mehrzeilig.

    Bitte mal testen:

    Kleines Problem dabei, man kann die Tabs nur über den Thumb scrollen, nicht mit dem Mausrad.:/

    Evtl. findet ja ein anderer User eine Möglichkeit dafür...danke.

    Edit:

    Der Code funktioniert doch nicht richtig, siehe Beitrag Nr. 28

    Bei mir funktioniert die mehrzeilige Tabreihe auch unten, wenn ich das kleine User-JavaSkript von aborix (?) verwende, welches Boersenfeger gestern gepostet hat:

    JavaScript
    /* Tabs runter.uc.js */
(function(){
var tabbar = document.getElementById("TabsToolbar");
tabbar.parentNode.parentNode.appendChild(tabbar);
})()

    Falls noch nicht geschehen, würde ich wirklich dazu raten, JS-UserSkripte auf euren FF-Installation lauffähig zu machen ( so schwer ist die Einrichtung nicht ;)), aber es multipliziert die Möglichkeiten, FF zu verändern.

    Wenn ihr keine JS-Userskripte benutzt bzw. benutzen wollt, dann macht es so, wie Andreas es gepostet hat.

    2002Andreas : Danke für deinen CSS-Vorschlag. :thumbup:

    Gruß BrokenHeart

    "success has many fathers, failure is an orphan"

    Einmal editiert, zuletzt von BrokenHeart (8. Dezember 2019 um 17:33)

    Zitat von 2002Andreas

    Kleines Problem dabei, man kann die Tabs nur über den Thumb scrollen, nicht mit dem Mausrad.

    Hallo Andreas

    Kann Ich nicht bestätigen, bei mir geht es per Mausrad.

    Meine Werte muss Ich noch anpassen aber grundsätzlich funktioniert es.

    Es gibt nur ein Problem beim Hintergrund der Tabreihen bei mir.

    Ich hab ein Hintergrundbild im kompletten Bereich:

    #main-window

    {

    -moz-appearance: none !important;

    background-image:url(file:///D:/...............png) !important;

    background-repeat: no-repeat! important;

    }

    Bei deinem CSS wird ein grauer Hintergrund verwendet (scrollbox).

    Wenn Ich diese Zeile lösche sehe Ich zwar mein Bild, aber bei den zusätzlichen Tabreihen wird das Bild
    nicht angezeigt. (Bilddatei wäre groß genug)

    Mein Bild wird also bei den zusätzlichen Tabreihen nicht mit nach unten angezeigt.

    Ersetze Ich die graue Farbe durch mein Bild ist es eine Überlappung von zwei Bildern, da die Scrollbox ein
    extra Bild wäre.

    Hallo zusammen,

    ich habe jetzt das Java-Script für "Tabs unten" in Kombination mit dem CSS-Code für die mehrreihigen Tabs und deren Aussehen kombiniert... Langsam bin ich wieder begeistert, zumal sich das mit den JavaScripten als sehr einfach erwiesen hat! Super Anleitung! Allerdings - finde den Fehler - Tipp: rechts neben den Tabs... Die doppelten Schaltflächen aus der Menüleiste (Minimieren, Verkleinern, Schließen -> siehe Screenshot)... Wo kommen die her und wie verschwinden sie? Dann wäre alles perfekt... Mausrad-Scrolling funktioniert hier übrigens auch...

    CSS-Code:

    JavaScript:

    Code
    /* Tabs runter.uc.js */

(function(){
var tabbar = document.getElementById("TabsToolbar");
tabbar.parentNode.parentNode.appendChild(tabbar);
})()

    ...und noch mal DANKE! an alle, die sich hier die Mühe machen!!!

    Genau aus diesem Grund hatte ich die Codes 1+2 vor ein paar Stunden nochmal angepasst ( siehe hier ).

    Es geht um folgenden Code, der eingefügt werden muss, damit die Titlebar-Buttons wieder ausgeblendet werden:

    CSS
    #TabsToolbar > .titlebar-buttonbox-container {
    display: none !important;
}

    Also noch mal testen bitte...

    Edit: Und wieder war Andreas ein paar Sekunden schneller...;)

    Gruß BrokenHeart

    "success has many fathers, failure is an orphan"

    Und hättest trotzdem darauf hinweisen müssen, weil das wahrscheinlich wieder niemand gelesen hätte.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    Da brauchst du nicht mehr danach suchen. Ist doch auch schon was. :) Und für mich trifft das noch mehr zu. ;)

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    // Ich weise aus gegebenen Anlass darauf hin, das JavaScript nichts mit der Programmiersprache JAVA zu tun hat. Um Irrungen und Wirrungen vorzubeugen, bitte auf die korrekte Schreibweise achten, wie auch bei den Bezeichnungen der Dateien userChrome.css bzw userContent.css.

    Hallo,

    ich habe mir jetzt mal die Userchrome.css von 2002Andreas aus #5 genommen und unten noch "meine farblichen Veränderungen" angefügt.

    - Leider ist jetzt der Button bzw. das Kreuz, um neue Tabs zu öffnen, weiß.... man sieht es nicht so gut... wie kann man das schwarz färben?

    - und der Button zum Tab schließen ist leider nicht mehr in den inaktiven Tabs sichtbar... ich würde gerne in allen Tabs das schwarze Kreuz sehen...

    - Wäre es möglich, die Lesezeichenleiste unter die Tableiste zu schieben?

    Ein riesengroßes Dankeschön!!! an die fleißigen Helfer in diesem Forum! - Ich bin Euch sooo dankbar für die Hilfe!


    Meine jetzige Userchrome.css: