Tab Höhe und Farbe in der userChrome.css anpassen

  • Hallo Leute,
    ich habe mir hier einen Code für farbige Tabs geklaut und an meine Bedürfnisse angepasst. Er funktioniert auch sehr gut bis auf eine einzige Sache:
    ich mache meine Sitzung mit ca. 30 Tabs auf:


      alle ungeladenen Tabs von der letzten Sitzung --> weiss (passt)
      der aktive Tab --> rot (passt)
      der gelesene Tab --> gelb (passt)
      der neu aufgemachte noch nicht gelesene Link --> blau (passt)

      ABER der blaue TAB wird nach dem anklicken nicht GELB sondern bleibt blau. Wie muss man da den Code anpassen? denn ich möchte alle gelesenen Tabs gelb haben.


    Ich habe wirklich wenig Ahnung von Codes und habe mich durch try and error herangewagt.

    Folgende Anpassungen bräuchte ich noch von euch:


      1. (gelöst) das schließen X soll nur im aktiven Tab zu sehen sein, bei den anderen Tabs kein X
      2. Tabhöhe verringern, die sind viel zu hoch.
      3. die Tabs in der letzten Tabreihe sollen gleiche /fixe Größe haben wie die oberen also bündig untereinander -
      jetzt verlängern sie sich zur Rechten Seite.

    Wäre toll, wenn ein Schrauber mir da zur Hand gehen könnte. Danke mal im voraus.

    [attachment=0]Tabs.png[/attachment]

  • Ich habe den Code mal so angepasst, dass:

    Die Tabhöhe verringert ist. (statt 32px jetzt 28px)
    Alle Tabs die gleiche Breite haben.

    Der Schließenbutton ist bei mir mit deinem Code nur auf dem aktiven Tab zu sehen.

    [attachment=0]Zwischenablage01.png[/attachment]

  • Teste es doch bitte mal mit diesem zusätzlichen Code:

    Dann sollte das Icon nur auf dem aktiven Tab sein.


  • Dann sollte das Icon nur auf dem aktiven Tab sein.


    Super, das funktioniert. Das X ist nur noch auf dem aktiven Tab.


    Die Tabhöhe verringert ist. (statt 32px jetzt 28px)
    Alle Tabs die gleiche Breite haben.


    auch das haut hin, Ich kann mich jetzt mit der Tabhöhe spielen.

    Zwei Probleme sind aufgetaucht:
    1. Rechts ist ein Leerraum, kann man die Tabs bis zum rechten Rand schieben? (das alles ganz ausgefüllt ist?
    2. der ungelesene Linktab ist nicht mehr blau (sondern gelb) und wenn ich den schließe, bleibt einen leerer Platz. Hat das bei dir funktioniert?
    Danke Andreas.
    [attachment=0]Tabs verändert.png[/attachment]

  • Zu 1:
    Ändere mal den Wert von min-width:

    CSS
    .tabbrowser-tab {
        flex-grow: 1 !important;
        display: -webkit-box !important;
        min-height: 28px !important;
     min-width: 130px !important; /* Minimal Wert standardmäßig 76px */ 
    /* max-width: 130px !important; /* Maximal Wert standardmäßig 225px */  */
    }


    Das musst du bestimmt mehrmals testen bis die Tabs genau an die rechte Seite passen.

    Zu 2:
    Das mit dem leeren Platz kann ich bestätigen, hatte ich nicht bemerkt, sorry.

    Der ist entstanden, weil ich im obigen Code den max-width Wert wieder aktiviert hatte, dadurch waren alle Tabs gleich breit.
    Ist er deaktiviert sind immer die Tabs der untersten Leiste breiter. :-??

    Sorry, aber da muss ein Fachmann ran.


  • Das musst du bestimmt mehrmals testen bis die Tabs genau an die rechte Seite passen.


    geht nicht - wenn ich die Breite vergrößere, dann habe ich plötzlich nur noch 7 Tabs in einer Reihe und nicht 9.
    Das kann aber auch an mir liegen, weil ich zu wenig Wissen über die zusammenhängenden Werte habe. Auf jeden Fall habe ich diie letzte halbe Stunde daran gebastelt und es nicht hinbekommen.

    Deswegen gehe ich wieder zum ersten Code und übernehme von dir den Code für die X Buttons.
    Bis dahin DANKE für deine Mühe. :)
    Vielleicht knackt das ja jemand.