Menüleiste in Firefox schmaler machen, aber wie?

[Schnabulinski]

Hallo,

kann man die Standartleiste bei Firefox schmaler machen? Wenn ja, wie?

Oben im Bildschirmfenster bei Firefox sind ja standartmäßig drei Leisten untereinander. In der obersten Leiste steht "Datei, Bearbeiten, Ansicht" u.s.w. In der mittleren Leiste sind die offenen Internetseiten aufgeführt. In der untersten Leiste die aktuelle Internetadresse und einige Symbole.

Die Schriftgröße kann man ändern, das habe ich auch gemacht.

Kann man die einzelnen Leistenhöhen der drei Leisten selbst ändern, also schmaler machen, sodass die Standartleiste insgesamt schmaler ist und nicht soviel vom Bildschirm einnimmt?

[Tante Google]

[Holgi]

das geht wohl über die userChrome.css
https://www.userchrome.org/screenshot-tester.html
https://www.userchrome.org/how-create-u ... e-css.html
https://web.archive.org/web/20190928115 ... fault_Skin

[John-Boy]

Vorlagen für die userChrome.css gibt es z.B. hier wenn man diese nicht selber basteln möchte https://firefoxcss-store.github.io/ oder auch hier https://mrotherguy.github.io/firefox-csshacks/

[Holgi]

mein FF sieht jetzt so aus:

Firefox css.JPG

[Schnabulinski]

@Holgi Danke!

[Holgi]

die von @John-Boy aufgezeigte Seite mit den CC-Hacks ist echt genial.
Insbesondere die Autohide CSS ist super.
Das wollte ich natürlich automatisieren. Da zickt Firefox etwas rum, weil man einige Sicherheitsfunktionen "übertölpeln" muss. Normalerweise kann man die Einstellung

Code: Alles auswählen

"toolkit.legacyUserProfileCustomizations.stylesheets", true

nur in about:config ändern.
Aber es gibt einen anderen Weg über die prefs.js/user.js
Darüberhinaus verwendet Firefox normalerweise dynamische Namen für die Profilordner (abcd1234default-release bzw. abcd1234default). Das kann man mit einer profiles.ini umgehen.
Das nachfolgende Script setzt die Profilordner auf Standardnamen (default-release und default), erstellt die prefs.js und user.js sowie den Ordner "chrome", lädt eine angepasste userChrome.css von der Seite https://raw.githubusercontent.com/MrOth ... er/chrome/ herunter, benennt sie um, kopiert sie in den Ordner Chrome und erstellt einen Eintrag user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true) in der Prefs-Datei.
Funktioniert zumindest mit einer frisch aufgesetzten Firefox Installation.

wer das z.B. mal in einer Windows Sandbox ausprobieren möchte, installiert dort zuvor Winget:

Code: Alles auswählen

@Echo off
chcp 1252 >nul 
cmd.exe /c powershell -command "$ProgressPreference = 'SilentlyContinue' ; write-host "Downloade und installiere Abhängigkeiten" ; Invoke-WebRequest -Uri https://github.com/microsoft/winget-cli/releases/download/v1.10.390/DesktopAppInstaller_Dependencies.zip -OutFile .\DesktopAppInstaller_Dependencies.zip ; Expand-Archive -Path .\DesktopAppInstaller_Dependencies.zip -Force ; Add-AppXPackage -Path .\DesktopAppInstaller_Dependencies\x64\Microsoft.UI.Xaml.2.8_8.2501.31001.0_x64.appx ; Add-AppXPackage -Path .\DesktopAppInstaller_Dependencies\x64\Microsoft.VCLibs.140.00.UWPDesktop_14.0.33728.0_x64.appx ; write-host "Installiere Winget" ; Invoke-WebRequest -Uri https://github.com/microsoft/winget-cli/releases/download/v1.10.390/Microsoft.DesktopAppInstaller_8wekyb3d8bbwe.msixbundle -OutFile .\MicrosoftDesktopAppInstaller_8wekyb3d8bbwe.msixbundle ; Add-AppXPackage -Path .\MicrosoftDesktopAppInstaller_8wekyb3d8bbwe.msixbundle"

dann den Firefox:
Kommandozeile (cmd):

Code: Alles auswählen

winget install --id "Mozilla.Firefox.de" -h --source winget

und dann Firefox_CSS.cmd:

Code: Alles auswählen

@echo off
setlocal enabledelayedexpansion

echo == Firefox Setup beginnt ==

:: --- 1. profiles.ini schreiben ---
set "FF_DIR=%APPDATA%\Mozilla\Firefox"
rmdir "%FF_DIR%\Profiles" /s /q >nul 2>&1
mkdir "%FF_DIR%\Profiles"

echo Erstelle profiles.ini...

(
echo [Install308046B0AF4A39CB]
echo Default=Profiles/default-release
echo Locked=1
echo.
echo [Profile0]
echo Name=default-release
echo IsRelative=1
echo Path=Profiles/default-release
echo Default=1
echo.
echo [Profile1]
echo Name=default
echo IsRelative=1
echo Path=Profiles/default
echo Default=0
echo.
echo [General]
echo StartWithLastProfile=1
echo Version=2
) > "%FF_DIR%\profiles.ini"

:: --- 2. Profilordner erstellen ---
echo Erstelle Profilordner...
mkdir "%FF_DIR%\Profiles\default-release" >nul 2>&1
mkdir "%FF_DIR%\Profiles\default" >nul 2>&1

:: --- 3. Firefox beenden ---
echo Beende Firefox...
taskkill /im firefox.exe /f >nul 2>&1
timeout /t 3 >nul

:: --- 4. Profilpfad ermitteln (default-release bevorzugt) ---
set "INI=%FF_DIR%\profiles.ini"
set "PROFILPFAD="

for /f "tokens=1,* delims==" %%A in ('findstr /i /c:"Path=" "%INI%" ^| findstr /i "default-release"') do (
    set "PROFILPFAD=%%B"
)

if not defined PROFILPFAD (
    for /f "tokens=1,* delims==" %%A in ('findstr /i "^Path=" "%INI%"') do (
        if not defined PROFILPFAD (
            set "PROFILPFAD=%%B"
        )
    )
)

if not defined PROFILPFAD (
    echo Fehler: Profilpfad konnte nicht ermittelt werden.
    pause
    exit /b 1
)

set "PROFILORDNER=%FF_DIR%\%PROFILPFAD%"
set "PREFS=%PROFILORDNER%\prefs.js"
set "USERJS=%PROFILORDNER%\user.js"
set "CHROMEPFAD=%PROFILORDNER%\chrome"

:: --- 5. prefs.js schreiben oder aktualisieren ---
echo Setze Einstellung in prefs.js...

set "TEMPFILE=%TEMP%\prefs_tmp.js"
if exist "!TEMPFILE!" del /f /q "!TEMPFILE!"

set "EINSTELLUNG=user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);"

set "FOUND=0"

if exist "!PREFS!" (
    for /f "usebackq delims=" %%L in ("!PREFS!") do (
        echo %%L | findstr /c:"toolkit.legacyUserProfileCustomizations.stylesheets" >nul
        if errorlevel 1 (
            echo %%L>>"!TEMPFILE!"
        ) else (
            echo !EINSTELLUNG!>>"!TEMPFILE!"
            set "FOUND=1"
        )
    )
    if "!FOUND!"=="0" (
        echo !EINSTELLUNG!>>"!TEMPFILE!"
    )
    copy /y "!PREFS!" "!PREFS!.bak" >nul
    move /y "!TEMPFILE!" "!PREFS!" >nul
) else (
    echo !EINSTELLUNG! > "!PREFS!"
)

:: --- 6. chrome-Ordner erstellen ---
if not exist "%CHROMEPFAD%" (
    echo Erstelle chrome-Ordner...
    mkdir "%CHROMEPFAD%"
)

:: --- 7. CSS-Datei herunterladen ---
echo Lade userChrome.css herunter...
powershell -Command "Invoke-WebRequest -Uri 'https://raw.githubusercontent.com/MrOtherGuy/firefox-csshacks/refs/heads/master/chrome/autohide_toolbox.css' -OutFile '%TEMP%\userChrome.css'"

:: --- 8. CSS verschieben ---
echo Kopiere userChrome.css nach chrome-Ordner...
move /Y "%TEMP%\userChrome.css" "%CHROMEPFAD%\userChrome.css" >nul

:: --- 9. user.js setzen ---
echo Setze Einstellung in user.js...
> "%TEMP%\_new_user.js" (
    if exist "%USERJS%" (
        for /f "usebackq delims=" %%L in ("%USERJS%") do (
            echo %%L | findstr /c:"toolkit.legacyUserProfileCustomizations.stylesheets" >nul
            if errorlevel 1 (
                echo %%L
            )
        )
    )
    echo user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
)
move /Y "%TEMP%\_new_user.js" "%USERJS%" >nul

echo == Vorgang abgeschlossen. Starte Firefox neu. ==
"%programfiles%\Mozilla Firefox\firefox.exe"
exit

bitte beachten:
euer Profilordner wird gelöscht. Von daher vorher sichern, oder eben in einer VM/Sandbox ausprobieren!!
Wer einen anderen Stylesheet benötigt, ändert einfach die Downloadadresse im Script. hier:
https://raw.githubusercontent.com/MrOth ... oolbox.css
Viel Spaß bei Ausprobieren!

[mpt]

welchen Code muss ich in die chrome Datei einfügen um die Menüleiste (Datei, Bearbeiten, Ansicht...) in der Höhe wie bei dir zu minimieren?
Können die Tabs auch in der Höhe reduziert werden?

Deine Links habe ich nicht so verstanden. Vielen Dank.

[John-Boy]

Können die Tabs auch in der Höhe reduziert werden?

Tabs in der Höhe ändern

Code: Alles auswählen

/*Tabhöhe*/
:root {
  --tab-min-height: 25px !important; /* Höhe anpassen */
  --tab-toolbar-navbar-overlap: 0px !important; /* für Vollbildmodus */
}

[Holgi]

Deine Links habe ich nicht so verstanden. Vielen Dank.

Schade, dass du da etwas nicht verstehst. Ich könnte dir helfen; aber da müßtest du schon etwas spezifischer werden, was genau du nicht verstehst. Wenn dir Windows "Sandbox", Winget, Kommandozeile etc. keine Begriffe sind, wird es schwierig, aber nicht unmöglich.
Das Beispiel von John-Boy funktioniert übrigens. Danke dafür @John-Boy!
Hier der Unterschied in Bildern:
normal:

FF_Tab_normal.JPG

und verkleinert mit John-Boys Code:

FF_Tab_klein.JPG

am besten die Bilder herunterladen und dann nebeneinander vergleichen.

[mpt]

Können die Tabs auch in der Höhe reduziert werden?

Tabs in der Höhe ändern

Code: Alles auswählen

/*Tabhöhe*/
:root {
  --tab-min-height: 25px !important; /* Höhe anpassen */
  --tab-toolbar-navbar-overlap: 0px !important; /* für Vollbildmodus */
}

Danke für den Code. Kommt dieser in die userchrome.css?

[mpt]

Deine Links habe ich nicht so verstanden. Vielen Dank.

Schade, dass du da etwas nicht verstehst. Ich könnte dir helfen; aber da müßtest du schon etwas spezifischer werden, was genau du nicht verstehst. Wenn dir Windows "Sandbox", Winget, Kommandozeile etc. keine Begriffe sind, wird es schwierig, aber nicht unmöglich.
Das Beispiel von John-Boy funktioniert übrigens. Danke dafür @John-Boy!
Hier der Unterschied in Bildern:
normal:
FF_Tab_normal.JPG
und verkleinert mit John-Boys Code:
FF_Tab_klein.JPG

am besten die Bilder herunterladen und dann nebeneinander vergleichen.

Der Code für die Tabhöhe wurde ja schon gepostet.
Mir ist nicht klar, was von den Links den Code für die userchrome.css beinhaltet, um wie bei dir den Abstand zwischen Menüleiste und Tableiste zu verkleinern.

[Holgi]

mein Beispiel war
a) für eine Windows Sandbox zum Testen
b) für Firefox mit automatischer Ausblendung der Menüleisten (komplett). Also eher nichts für dich.
c) alles automatisiert
Manuell geht das natürlich auch. Ordner Chrome anlegen. Datei userchrome.css mit dem Inhalt von John-Boy anlegen.
Im Firefox noch die about:config aufrufen und die Änderung von "toolkit.legacyUserProfileCustomizations.stylesheets" in "true" vornehmen, sofern noch nicht geschehen.

[John-Boy]

Hier mal eine einfache userChrome.css zum testen...

userChrome.7z

[mpt]

danke für die UserChrome.
Die Tabhöhe habe ich damit reduzieren können.

1. Mir ist es nicht gelungen, den Abstand zwischen den Tabs und der Menüleiste (Datei, Bearbeiten, Ansicht, Chronik...) zu minimieren.
Zum Test habe ich das eingestellt: padding-inline-start: 5px !important;

2. Gibt es online eine Übersicht welche Farben eingetragen werden können bei background-color für die Tabs? Statt red habe ich mal grey und lightgrey als Test ausprobiert, aber mir sind keine (englischen) Farbtöne für ein noch helleres Grau/beige bekannt.

[John-Boy]

Zu 1. probiere das mal

Code: Alles auswählen

/* Abstand zwischen Tabs und Menüleiste verringern */
#TabsToolbar {
  margin-top: -4px !important;  /* Wert anpassen, z.B. -4px bis -8px */
}

/* Optional: Abstand der Tabs selbst verringern */
.tabbrowser-tab {
  padding-block: 0px !important;
  min-height: 24px !important;  /* Wert ggf. anpassen */
}

Zu 2. Farben schaue mal hier https://www.afaik.de/farbangaben/