Standardmäßig erkennt man den aktiven Tab nur an der kleinen blauen Leiste über dem Tabtext. Wer das gerne deutlicher haben möchte, kann das mit einem CSS Code erreichen.

So sieht das standardmäßig aus:

standard

Firefox – Tabs individuell anpassen

userChrome.css und userContent.css erstellen userChrome Dateien wieder nutzen

Und hier nun die Erklärung, wie man das mit dem CSS – Code dann machen muss.

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

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

In diese Datei tragen wir nun folgenden CSS Code ein:

/* Tabs individuell angepasst */
 
 /* Inaktiver Tab Tabbreite */
.tabbrowser-tab:not([selected]):not([pinned]) {
     max-width: 150px !important;
    }
    
 /* Aktiver Tab Schrift fett +  schwarz */
.tabbrowser-tab[selected]:not([pinned]) {
    font-weight: bold !important;
    color: black !important;
    }
    
 /* Aktiver Tab Hintergrund orange, und auch der blaue Balken oben weg */
.tabbrowser-tab[selected] .tab-content { 
    background: orange !important;
    }
 /* Aktiver Tab Tabbreite und etwas Abstand nach rechts/links zum nächsten Tab */
.tabbrowser-tab[selected] {
    margin-left: 1px !important;
    width: 250px !important;
    }
    
 /* Tabtext wird nicht ausgeblendet */
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
    mask-image: none !important;
    } 
   
 /* Angepinnter Tab aktiv Hintergrund und Schriftfarbe */
 .tabbrowser-tab[pinned] .tab-content[selected="true"] { 
    background: orange !important;
    font-weight: bold !important;
    color: black !important;
    }  
 /* Angepinnter Tab aktiv Text nach rechts verschoben */ 
 .tabbrowser-tab[pinned] .tab-text {
    padding-left: 3px !important;
    }

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

Und so sieht der Code dann in der userChrome.css Datei aus:

css

Hinweis:

Alle Werte und Farben können beliebig verändert werden.

Firefox – Tabs individuell anpassen

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

bunt

Und so sieht das dann mit den angepassten Tabs aus:

Der gerade aktive Tab hat einen orangen Hintergrund, dickeren Text und ist auch breiter als die inaktiven Tabs.

Share.