Höhe der Tabs und der Leiste darunter ändern (inklusive den Symbolen von z.B Addons)

  • Firefox-Version
    77.0 (64-Bit) Beta
    Betriebssystem
    Win 10

    Hallo, ich bin nun nach einer längeren Google-Suche immer noch nicht darauf gekommen, wie ich sowohl die Tabhöhe, als auch die Höhe der Leiste darunter (also dort, wo Vor-und Zurückbutton, Reload, Url, Addon-Symbole etc. sind) ändern kann. Kann mir vlt. jemand helfen?

    Das Problem: Die Symbole von z.B Vor-und Zurück, die (ganze) Suchleiste und andere Symbole von z.B Addons verändern sich nicht. Aber nicht nur die Grösse ändert sich nicht, sie bleiben auch an am selben Ort, sind also nicht mehr zentriert in der Mitte oder gar abgeschnitten. Aber nicht nur das. Wenn ich nun Tabs mit der Maus verschieben will, dann verschwindet die komplette Tableiste (alle Tabs, bis auf den, den ich mit der Maus halte). Unten habe ich ein Bild hochgeladen (Link). Da sieht man ein Vergleich von der Developer Edition und der Beta. Bei der Beta mit code und bei der Dev-Ed. ohne. Das 2. Bild ist davon, wenn ich ein Tab per Maus verschieben will. Den Code habe ich nicht selbst geschrieben, ist aus einer Google-Suche. Und vieles was ich so finde, funktioniert nicht (passiert gar nichts). Der 1. Code ist gerade aktiv. Das Resultat ist so wie im Bild zu sehen.

    CSS
    /* Frank edited file - you are good to go...*/
    
    /*
     * Do not remove the @namespace line -- it's required for correct functioning
     */
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
    
    #tabbrowser-tabs { height: 24px !important; }
    
    #nav-bar { height: 24px !important; }

    https://abload.de/img/firefoxtabdnnermache_qtki2.png

    https://abload.de/img/firefoxtabdnnermache_lnkci.png

    Auf Reddit habe ich von hier ( https://www.reddit.com/r/FirefoxCSS/c…ify_tab_height/) das gefunden(das funktioniert gar nicht):

  • Unter :root werden drei Variablen deklariert, aber nur zwei von ihnen erscheinen dann im Code, werden also angewandt. Die dritte, --tab-min-height, jedoch nicht.

    Ü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 verstehe nicht ganz, was du mit "nur zum Testen" meinst. Was ist nur zum testen?

    Und ich verstehe auch nicht ganz, was der Unterschied zwischen :root und "im Code" ist. Das ganze ist doch der Code ?

  • Und ich verstehe auch nicht ganz, was der Unterschied zwischen :root und "im Code" ist. Das ganze ist doch der Code ?

    Gut, etwas unglücklich ausgedrückt. Aber diese Variablen (CSS-Varbiablen beginnen immer mit zwei Bindestrichen --) werden mit dem Selektor :root nur definiert, sie müssen dann auch im nachfolgenden Code verwendet werden, um wirksam zu werden. Verwendet werden dann nur --height und --right-end, nicht aber --tab-min-height.

    Ü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 verstehe euch gar nicht. Ich weiss doch auch, dass irgendwas an dem CSS-Code falsch ist, sonst würde es ja gehen. Ich verstehe nur nicht, was es ist. Wenn ich aus :root --min-tab-height lösche, dann funktioniert immer noch nichts. Wenn ihr ja sagt, es liegt daran, dass oben etwas definiert ist, was unten nicht vorkommt, dann sollten doch wenigstens die anderen beiden funktionieren, wenn ich --min-tab-heigth lösche ?

    Was bedeutet z.B "calc(var(--height) + 5px)" Also was bedeutet "calc" und "var" ?

  • Versuch das mal: (alles andere in der 'userChrome.css' kannst du löschen)

    CSS
    .tabbrowser-tab {
        min-height: 50px !important;
    }
    #nav-bar {
        min-height: 60px !important;
    }

    Gruß BrokenHeart

    "success has many fathers, failure is an orphan"

  • Wenn ihr ja sagt, es liegt daran, dass oben etwas definiert ist, was unten nicht vorkommt, dann sollten doch wenigstens die anderen beiden funktionieren, wenn ich --min-tab-heigth lösche ?

    Die beiden anderen funktionieren auch sicher. Woran machst du fest, dass sie nicht funktionieren? Die unter :root definierte Variable --tab-min-height legt für die Tabs eine Mindesthöhe von 0 Pixeln fest. Das heißt sie wären de facto nur ein horizontaler Strich, wenn überhaupt. Wenn du sie löschst wird sich nichts verändern, da sie vorher ja nicht wirkte.

    Ü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

  • Dann passt gar nichts mehr:/

    Also bei mir funktioniert es:

    Wobei ich nicht weiß, was letztlich erreicht werden soll.

    Hallo, ich bin nun nach einer längeren Google-Suche immer noch nicht darauf gekommen, wie ich sowohl die Tabhöhe, als auch die Höhe der Leiste darunter (also dort, wo Vor-und Zurückbutton, Reload, Url, Addon-Symbole etc. sind) ändern kann. Kann mir vlt. jemand helfen?

    Edit: Mit vergrößerten Icons in der Nav-Bar (Werte bei Bedarf anpassen) ->

    Gruß BrokenHeart

    "success has many fathers, failure is an orphan"

    Einmal editiert, zuletzt von BrokenHeart (31. Mai 2020 um 20:48)

  • Also bei mir funktioniert es:

    Bei mir auch.

    2002Andreas Im neuen Profil getestet? An die Einstellung in about:config gedacht? ;)

    sotnu Hast du beide Codes in ein- und derselben userChrome.css? Wenn ja, den zweiten Code von Reddit herauslöschen, da sich ansonsten beide Codes in die Quere kommen.

    Ü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

  • @ milupo: Also den langen code habe ich zuvor genutzt und der bewirkt optisch einfach nichts. Den kurzen code der schmälert nur die Leiste, wo auch die Url-Leiste ist ( Das will ich zwar, aber alle Sybole bleiben an der selben Stelle und bleiben gleich gross). Also nein, ich habe oder hatte nicht beides drinn.

    @BrokenHeart's code: Ah, jetzt sehe ich es. Das funktioniert, aber nur nach oben hin. Ich habe es ausprobiert und spätestens ab 30px wird nichts mehr kleiner (ich habe es mit nem anderen Firefox-Browser gegengetestet).

    CSS
    .tabbrowser-tab {
        min-height: 24px !important;
    }
    #nav-bar {
        min-height: 24px !important;
    }

    Dieser code bewirkt bei mir gar nichts unterhalb vom Standart. Man kann alles grösser machen, aber alles unter ~30px bewirkt keine Veränderung mehr.

    CSS
    .tabbrowser-tabs { height: 24px !important; }
    
    #nav-bar { height: 24px !important; }

    Diesen code habe ich momentan gerade drinn (das ist der von der Frage, nur anstatt # ein Punkt. Und dieser verkleinert nur die Leiste wo die Url-Leiste ist (das macht es auch mit einem #). Die Tabs werden nicht weniger hoch. Aber wie gesagt, das Problem ist, dass sich nur die Leiste verkleinert und sonst alles gleich bleibt. Alle Symbole verkleinern sich nicht mit, werden nicht zentriert etc.


    Wobei ich nicht weiß, was letztlich erreicht werden soll.

    Ich will, dass alles oberhalb von der Webseite (also Tabs und die Leiste darunter) dünner machen. Es müssten aber auch alle Symbole in der Leiste (wo die Url jeweils steht) kleiner werden bzw. auch zentriert. Kleiner, weil sie sonst abgeschnitten werden und zentriert, weil das sonst sehr beschissen aussieht.


    Edit:

    CSS
    #nav-bar .chromeclass-toolbar-additional .toolbarbutton-icon
    {
        width: 48px !important; 
        height: 48px !important; 
    }

    Ahh, also dieser Code lässt sich schonmal nach unten skalieren. Also ich kann damit tatsächlich die Symbole auch kleiner als Standart machen (und sind schön zentriert). Nur gibts da ein komisches Problem. Während dem die Symbole rechts etwa Standartgrösse haben, werden die Symbole links extrem klein (siehe Bild vom Link). Kann ich die Symbole irgendwie unabhängig voneinander in der Grösse verkleinern ?

    https://abload.de/img/firefoxtabdnnermache_5zjzx.png

    (Dabei bewirkt bei mir ".chromeclass-toolbar-additional" gar nichts (nur ".toolbarbutton-icon"). Vermutlich ist das eine Leiste, die ich gar nicht eingeschaltet habe?)

    8 Mal editiert, zuletzt von sotnu (31. Mai 2020 um 21:30) aus folgendem Grund: Ein Beitrag von sotnu mit diesem Beitrag zusammengefügt.

  • Mittels var() wird eine zuvor definierte Variable aufgerufen, calc() macht das, was der Name bereits andeutet: Es wird ein Wert berechnet. Nämlich das, was innerhalb der Klammern steht.

    Ach so und die Werte sind da oben bei :root definiert ? und calc steht da, weil am schluss noch (z.B) "+5" steht. Also zur definierten var soll noch +5 hinzu "calculiert" werden?

    Na dann verstehe ich jetzt das mit dem :root und dem, was milupo sagte vom Prinzip.

  • sotnu : Ich hatte gedacht, du wolltest die Abstände und Icons nur vergrößern? mein Fehler...

    Teste bitte mal:

    Gruß BrokenHeart

    "success has many fathers, failure is an orphan"

    Einmal editiert, zuletzt von BrokenHeart (31. Mai 2020 um 21:49) aus folgendem Grund: Selektor für Tableiste geändert!!

  • Diesen code habe ich momentan gerade drinn (das ist der von der Frage, nur anstatt # ein Punkt.

    Schau mal genau hin: Es heißt .tabbrowser-tab aber #tabbrowser-tabs.

    Ü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

  • Nochmal eine Änderung am Code:

    Gruß BrokenHeart

    "success has many fathers, failure is an orphan"

  • sotnu : Ich hatte gedacht, du wolltest die Abstände und Icons nur vergrößern? mein Fehler...

    Teste bitte mal:

    Also dein code hier bewirkt das hier auf dem Bild (unten im Link). Die Symbole sind nun rechts und links gleich gross, das ist schonmal super.

    https://abload.de/img/firefoxtabdnnermache_vaki4.png

    Ich habe gerade ein bisschen herumgebastelt, bevor ich deine Antwort gesehen habe und das gemacht:

    Und das Ergebniss ist folgendes (unten im Link). Mir scheint, als sei der schwarze Bereich hinter den Tabs ein eigener Bereich. kann man den evtl. verkleinern ? Ich glaube, da ist ein schwarzer Hintergrund und wenn ich die Tabs verkleinere, "öffnet" sich eben ein schwarzer Spalt vom Hintergrund

    https://abload.de/img/firefoxtabdnnermache_w3jdg.png


    Nochmal eine Änderung am Code:

    Das bewirkt folgendes:

    https://abload.de/img/firefoxtabdnnermache_hpk8x.png

    Sorry, ich komme gar nicht mit, mir den code anzuschauen, ich schaffe es gerade so, den code einzufügen und zu testen, bevor eine neue Antwort kommt :D

    Einmal editiert, zuletzt von sotnu (31. Mai 2020 um 22:07) aus folgendem Grund: Ein Beitrag von sotnu mit diesem Beitrag zusammengefügt.