FirefoxInternet

Tableiste nach unten in Firefox Version 65



In der aktuellen Firefox Version 65 befindet sich die Tableiste oberhalb der Adressleiste. Ich hatte hier schon mal beschrieben wie man die oberen Leisten untereinander verschieben kann. Das ist ab sofort so nicht mehr möglich. Es besteht nur noch die Möglichkeit mit dem alten CSS-Code die Lesezeichenleiste, Navbar bzw. die Menüleiste zu verschieben, wobei die Tableiste immer oben bleibt. Mit diesem neuen CSS-Code kann man die Tableiste wieder ganz nach unten bekommen, allerdings nur bei Beibehaltung der Reihenfolge der anderen Leisten.

So sieht das Standardmäßig mit der Tableiste aus:

tab oben - Tableiste nach unten in Firefox Version 65

Tableiste nach unten

 

Bis zur Firefox Version 56 war es möglich, solche Änderungen durch diverse Erweiterungen zu erreichen.

Das eine oder andere ist seit der Firefox Version 57 nicht mehr möglich, da Mozilla dafür (zumindest noch) keine Schnittstelle mehr zur Verfügung stellt.

Aus diesem Grund muss man jetzt optischen Änderung am Firefox mit einer userContent.css bzw. einer userChrome.css Datei erstellen.

Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.

userChrome.css erstellen

Und hier mal eine Erklärung für die User, die die Tableiste gerne wieder als unterste Leiste haben möchten. Bitte meinen wichtigen Hinweis weiter unten im Beitrag beachten!

Als erstes gehen wir dazu in den Profilordner vom Firefox, und öffnen den dort selber angelegten Ordner chrome.

Dann im Ordner chrome die userChrome.css Datei öffnen.

In diese Datei tragen wir nun folgenden CSS Code ein:

/* Tableiste nach unten */

#titlebar {
  -moz-box-ordinal-group: 100 !important;
  }

#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
  }

#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 40px !important;
 }

#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-
bar {
  margin-top: 6px !important;
 }

#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
 }

#toolbar-menubar {
  top: 10px !important;
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
 }

#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
 }

#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
 }

#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) 
.titlebar-buttonbox-container {
  top: 4px !important;
 }

@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-
version:windows-win7) {
    
    #main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
      margin-top: 8px !important;
    }
    
    #main-window[tabsintitlebar][sizemode="maximized"]:not
([sizemode="fullscreen"]) #nav-bar {
      margin-top: 4px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
      top: 8px !important;
    }
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-
container {
      top: 0px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not
([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 8px !important;
    }
 }

#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
 }

#main-window[tabsintitlebar][sizemode="fullscreen"] * #TabsToolbar {
 -moz-padding-start: 0px !important;
 }

#main-window[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]) 
.titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ 
#TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
#main-window #TabsToolbar #window-controls {
  display: none !important;
 }

#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
  display: none !important;
 }

@media (-moz-os-version: windows-win7) {
  @media all and (-moz-windows-compositor) {
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) * .titlebar-
buttonbox-container {
      display: none !important;
    }
  }
  @media not all and (-moz-windows-compositor) {
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-
container {
      top: -8px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not
([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 0px !important;
    }
  }
 }

@media (-moz-os-version: windows-win10) {
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not
([disabled="true"]),
  #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-
menuactive="true"]:not([disabled="true"]) {
    background-color: Highlight !important;
    color: HighlightText !important;
  }
 }

#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
 }

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
 }

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
 }

(Dazu am besten den Text kopieren und in die userChrome.css wieder einfügen)

So sieht der Code dann in der userChrome.css Datei aus:

css 2 - Tableiste nach unten in Firefox Version 65

Anmerkung:
Die diversen Abstände (px Werte) müssen evtl. von jedem User individuell noch angepasst werden.



Damit man später noch genau weiß was der jeweilige CSS Code bedeutet, sollte man sich über dem CSS Code einen aussagekräftigen Hinweis erstellen.

Dazu schreibt man vor dem Text erst einen Slash und einen Stern /* dann die Beschreibung der Funktion…und als Abschluss schreibt man diesmal erst den Stern und dann das Slashzeichen */

Die Zeichen vorher und nachher bedeuten, dass der Text auskommentiert ist, und somit keinen Einfluss auf den CSS Code bzw. seine Funktion hat.

Tableiste nach unten

Dann die userChrome.css Datei schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.

Und so sieht das dann mit der Tableiste unten aus:

tab unten - Tableiste nach unten in Firefox Version 65

Wichtiger Hinweis:
Bei Nutzung des CSS-Codes muss die Titelleiste vom Firefox ausgeblendet/deaktiviert sein. Desweiteren dürfen sich keine Icons in der Menüleiste befinden, diese werden nämlich leicht verschoben dadurch. Die Titelleiste wird über das Anpassenfenster vom Firefox unten links, durch entfernen des Hakens deaktiviert.

Möchte man eines Tages diese Änderung nicht mehr nutzen, dann reicht es aus, den CSS Code in der userChrome.css wieder zu löschen.

Danach noch einen Neustart vom Browser machen, und die Tableiste wird wieder oben angezeigt.

Hier hatte ich mal beschrieben was man alternativ zur userChrome.css Datei am besten machen sollte:

userChrome.css aufräumen

Dieser Tipp kann bzw. sollte auch auf die Datei userContent.css angewandt werden.

Vorteil dadurch, es ist alles viel übersichtlicher und man findet schneller mal etwas wieder.

Anker SoundCore 2 Bluetooth Lautsprecher mit Dual Treiber Bass, 24h Spielzeit, 20m Reichweite, IPX5 Wasserfest mit Eingebauten Mikrofon, Kabelloser Lautsprecher für iPhone, Samsung usw.(Schwarz)
2.126 Bewertungen
Anker SoundCore 2 Bluetooth Lautsprecher mit Dual Treiber Bass, 24h Spielzeit, 20m Reichweite, IPX5 Wasserfest mit Eingebauten Mikrofon, Kabelloser Lautsprecher für iPhone, Samsung usw.(Schwarz)
  • BEWUNDERNSWERTER KLANG: Mit zwei 6 Watt Treibern klingt deine Lieblingsmusik so gut wie noch nie!
  • KRAFTVOLLER BASS: Ankers BassUp Technologie deckt Tonleitern selbst im Tiefenbereich detailliert und weitflächig ab. Erstklassiger, tiefer Bass im Vergleich zu ähnlichen Lautsprechern derselben Preisklasse.
Tags
Mehr anzeigen

2 Comments

  1. Das … „Bei Nutzung des CSS-Codes muss die Titelleiste vom Firefox ausgeblendet/deaktiviert sein. “ war mir bis dato nicht bekannt und ich hatte gehofft, es wäre die Lösung. Leider nicht. Auch die hier beschriebene Vorgehensweise funktioniert bei mir nicht. Ich weiß nicht, wie viele Foren ich schon durchsucht und wieviele userChrome.css ich verwendet habe um die Leiste wieder nach unten zu bekommen. Nichts hat geholfen. Außer zwischenzweitlich die Verwendung der ESR-Variante und einer dafür angepassten userChrome.css.
    Nachdem ich das Profil neu erstellen musste, bekomme ich auch beim FF-ESR die Tableiste nicht mehr nach unten. Momentan bin ich fast schon soweit den ganzen FF in die Tonne zu treten und mich nach einer Alternative umzusehen. Was will Mozilla dem User eigentlich noch alles so vorschreiben? Man kann ja fast gar nichts mehr selbst bestimmen.

    1. Hallo @JolRi..
      vorweg, hast du denn in anderen Browsern die Möglichkeit alles nach Wunsch anzupassen!?
      Ansonsten, ich habe den Code eben getestet, er funktioniert einwandfrei wie von mir beschrieben in der Firefox Version 65.0.2.
      Für die ESR Version ist er auch nicht gedacht, bzw. dort braucht es wenn dann einen anderen Code.

      Deine userChrome.css Datei ist im richtigen Ordner? Sie hat die richtige Dateiendung auf .css und nicht auf .txt!?
      Hier hatte ich eine Anleitung zwecks Erstellung davon mal beschrieben. Sieh sie dir bitte mal ganz in Ruhe an:

      https://www.windowspower.de/firefox-userchrome-css-und-usercontent-css-erstellen/

      MfG
      Andreas

      Edit:
      Auch im Fx Beta und Nightly funktioniert der Code einwandfrei.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Back to top button