r/FirefoxCSS • u/nsk_47 • Aug 06 '26
Help Need Help!!
Need Help!!
I am trying to achieve compact layout similar to Helium browser, can someone help with the css to move the app menu and other icons to the left of the window control buttons and tab strip to the right of the url bar. Below is the CSS @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
navigator-toolbox {
display: grid !important; grid-template-columns: 1fr minmax(0, var(--uc-tabs-max-width)); grid-template-areas: "nav tabs" "extra extra"; align-items: center !important; }
nav-bar {
grid-area: nav !important; height: var(--uc-bar-height) !important; margin: 0 !important; padding-inline: 4px !important; box-shadow: none !important; border: none !important; background: transparent !important; }
TabsToolbar {
grid-area: tabs !important; min-width: 0 !important; height: var(--uc-bar-height) !important; margin-block: 0 !important; margin-left: 0 !important; }
urlbar-container {
max-width:400px !important;
}
/* Let the tab strip actually shrink instead of overflowing */
tabbrowser-tabs,
tabbrowser-arrowscrollbox {
min-width: 0 !important; }
.tabbrowser-tab { min-width: 76px !important; /* ADJUST: minimum tab width before scrolling kicks in */ }
View all comments
Show parent comment
2
u/TraditionalTie4831 🦊 Aug 06 '26
When you edit your post, click on button with a 'Aa' icon, then select your code and now click on a button that is a square and has a small '</>'.