Fungovanie tejto stránky je z dôvodu údržby dočasne obmedzené. Ak článok nevyrieši váš problém a chcete položiť otázku, napíšte našej komunite podpory na Twitter @FirefoxSupport alebo Reddit /r/firefox.

Vyhľadajte odpoveď

Vyhnite sa podvodom s podporou. Nikdy vás nebudeme žiadať, aby ste zavolali alebo poslali SMS na telefónne číslo alebo zdieľali osobné informácie. Nahláste prosím podozrivú aktivitu použitím voľby “Nahlásiť zneužitie”.

Ďalšie informácie

userChrome.css - Help With Customizing Tabs

  • 1 odpoveď
  • 0 má tento problém
  • 1 zobrazenie
  • Posledná odpoveď od cor-el

more options

I made a small CSS customization to my tabs in FF 115 ESR on Windows 7, so they would be flat on the bottom and rounded on the top, looking a bit more like tabs instead of buttons.

Looked ok in FF 115 ESR.

However, in FF 125, half the tabs are now cut off, including their text (see attached images).

Also the tabs background is darker in FF 115 ESR, providing more contrast between the tabs and the tab bar. In FF 125, it's almost all white and I can hardly distinguish between the tabs and the tab bar.

Why is there such a big difference in appearance between FF 115 ESR on Windows 7, and FF 125 on Windows 10?

Here is the code I used...

/* ------------------ RESIZE TAB BAR ----------------------------- */ \#TabsToolbar { height: 27px !important; margin-top: -1px !important; margin-bottom: 0px !important; } \#tabbrowser-tabs { height:25px!important; min-height:25px!important; }

.tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before {

 min-height:25px!important;

} /* ------------------ RESIZE TAB BAR END ----------------------------- */

/* ------------------ TAB HEIGHT ----------------------------- */

.tabbrowser-tab {
 max-height: 25px !important;
 border-color: #8f939e;

}

.tabbrowser-tabs {

 max-height: 25px !important;
 border-color: #8f939e;

} /* ------------------ TAB HEIGHT END ----------------------------- */

I inserted backslashes at the beginning of the first 2 lines of code above to preserve the hashtag sign (otherwise it displays an index number before those lines), please ignore the backslashes.

I would like my customizations in Firefox 125 to look like the ones I made in 115 ESR.

Is it possible?

Thanks!

I made a small CSS customization to my tabs in FF 115 ESR on Windows 7, so they would be flat on the bottom and rounded on the top, looking a bit more like tabs instead of buttons. Looked ok in FF 115 ESR. However, in FF 125, half the tabs are now cut off, including their text (see attached images). Also the tabs background is darker in FF 115 ESR, providing more contrast between the tabs and the tab bar. In FF 125, it's almost all white and I can hardly distinguish between the tabs and the tab bar. Why is there such a big difference in appearance between FF 115 ESR on Windows 7, and FF 125 on Windows 10? Here is the code I used... <code> /* ------------------ RESIZE TAB BAR ----------------------------- */ \#TabsToolbar { height: 27px !important; margin-top: -1px !important; margin-bottom: 0px !important; } \#tabbrowser-tabs { height:25px!important; min-height:25px!important; } .tab-background-start[selected=true]::after, .tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, .tab-background-end[selected=true]::after, .tab-background-end[selected=true]::before { min-height:25px!important; } /* ------------------ RESIZE TAB BAR END ----------------------------- */ /* ------------------ TAB HEIGHT ----------------------------- */ .tabbrowser-tab { max-height: 25px !important; border-color: #8f939e; } .tabbrowser-tabs { max-height: 25px !important; border-color: #8f939e; } /* ------------------ TAB HEIGHT END ----------------------------- */ </code> I inserted backslashes at the beginning of the first 2 lines of code above to preserve the hashtag sign (otherwise it displays an index number before those lines), please ignore the backslashes. I would like my customizations in Firefox 125 to look like the ones I made in 115 ESR. Is it possible? Thanks!
Priložené obrázky

Upravil(a) Slouch dňa

Vybrané riešenie

Note that attribute selectors for the Tab bar that were previously pseudo-boolean attributes like selected and pinned used (i.e. they had a String value like "true") have been converted in 119+ to a real Boolean. You now need to use only the attribute and omit "=true", so use [selected] and :not([selected]) I'm not seeing a selector like .tab-background-start/end in the Firefox source code, so you likely need .tab-background.


For the height of the Tab bar, you merely need to adjust the relevant CSS variable --tab-min-height.

*|*:root {
  --tab-min-height: 25px !important;
  --tab-min-width:  60px !important; /*minimum:50px*/
/*  --tab-overflow-pinned-tabs-width: 175px */
}

Current code for .tab-background that also uses CSS variables :

.tab-background {
  border-radius: var(--tab-border-radius);
  margin-block: var(--tab-block-margin);
  min-height: var(--tab-min-height);
}

See also the CSS selectors defined at the top of this page:

Čítať túto odpoveď v kontexte 👍 0

Všetky odpovede (1)

more options

Vybrané riešenie

Note that attribute selectors for the Tab bar that were previously pseudo-boolean attributes like selected and pinned used (i.e. they had a String value like "true") have been converted in 119+ to a real Boolean. You now need to use only the attribute and omit "=true", so use [selected] and :not([selected]) I'm not seeing a selector like .tab-background-start/end in the Firefox source code, so you likely need .tab-background.


For the height of the Tab bar, you merely need to adjust the relevant CSS variable --tab-min-height.

*|*:root {
  --tab-min-height: 25px !important;
  --tab-min-width:  60px !important; /*minimum:50px*/
/*  --tab-overflow-pinned-tabs-width: 175px */
}

Current code for .tab-background that also uses CSS variables :

.tab-background {
  border-radius: var(--tab-border-radius);
  margin-block: var(--tab-block-margin);
  min-height: var(--tab-min-height);
}

See also the CSS selectors defined at the top of this page: